Forem: Parth Patel

Laravel 8 Authentication using Bootstrap 4 instead of Tailwind

Parth Patel — Thu, 08 Oct 2020 00:00:00 +0000

Laravel 8 has released with a bang! and with it , brought sweeping changes. One such remarkable yet controversial change is Laravel Jetstream. Laravel Jetstream is a beautifully designed application scaffolding and comes with two stacks for Authentication system -

1) Tailwind CSS + Livewire

2) Tailwind CSS + Inertia.js

Now, these two stacks are great, beautiful but very different from Bootstrap/jQuery based stack which developers are used to. So, there is a learning curve for developers if they want to use Laravel's Auth scaffolding which is sad because Laravel does not comes with Bootstrap based Auth scaffolding anymore.

But, that's the beauty of Open Source world. Anyone can modify these systems to their liking or build new plugins or integrations.

Today, we will learn how we can still use Bootstrap based Auth Scaffolding for new Laravel 8 app. We will be using our favourite Laravel/UI package to bring back old Bootstrap based Auth Scaffolding.

1) Create Laravel Project

If you have installed Laravel Installer (You can follow instructions from our Laravel Beginner Tutorial) then simply execute below command:

laravel new laravelauth

else, execute below command:

composer create-project laravel/laravel --prefer-dist laravelauth

then go to your project folder :

cd laravelauth

2) Install Laravel/UI

Laravel UI is an official package that offers basic Auth Scaffolding built on the Bootstrap CSS framework. Latest version of Laravel/UI supports Laravel 8 so we will use this package to import authentication pages, controllers, and other components.

Run below command:

composer require laravel/ui

3) Install Bootstrap in Laravel

Laravel UI offers three options for Auth Scaffolding - 1) Bootstrap, 2) Vue and 3) React. So, we will install bootstrap for our case.

Run below command:

php artisan ui bootstrap --auth

You can observe that we have used —auth flag here. Without that flag, above command will only install bootstrap and basic scaffolding. The —auth flag installs login and registration scaffolding as well.

4) Install NPM packages

We have configured bootstrap and other related dependancies in package.json in previous step, so now we will actually install it.

Before moving forward, make sure you have node installed in your system. You can check node version via below command:

# for node
node -v

# for npm
npm -v

Now, let's install the dependencies and compile our assets.

npm install && npm run dev

5) Database Migration

First, we should configure our database settings. In your .env file located at the root of your project, udpate the database config as per your system. [If you don't find .env file, simply create new one and add the credentials as per the example below] :

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

Then, we will create database tables via migration by executing below command:

php artisan migrate

6) Run Development Server

Finally, it's time to test your Laravel Application with Bootstrap based scaffolding. Sometimes, OLD IS GOLD.

php artisan serve

Screenshots:

I hope this article helped you. There is no clear winner in Bootstrap vs Tailwind. It's all about preference. Since, Laravel 8 prefers Tailwind with Livewire or Inertia stack, it might be confusing for developers who wants to use Bootstrap instead. So, start working on your next project.

Adios!

For more tips & tutorial, join my newsletter

15 Must know Laravel Collection Methods ~ Laravel Collections Tutorial

Parth Patel — Sun, 06 Sep 2020 22:02:39 +0000

Laravel comes with very powerful and convenient wrapper for working with arrays. You must have used collections in Laravel specially while working with Eloquent. Eloquent returns the query results in custom Collection object ~ Eloquent Collection class is inherited from Laravel Collections therefore, it inherits all the powerful methods offered by Laravel Collection and on top, provides few more great methods to use.

In this article, we will review some of the best and must-know Laravel Collection methods to make your life easier working with Laravel.

_ Note : Remember, Eloquent Collection inherits Laravel Base Collection class thus it has access to all of the Base Collection's methods but Base Collection object cannot access custom methods provided by eloquent collection. _

Let's look at how you can create simple Laravel Base Collection Object:

$todocollection = collect([
    [
        'user_id' => '1',
        'title' => ‘Do Laundry,
        ‘description => ‘I ‘have to do laundry ‘
    ],
    [
         'user_id' => '1',
        'title' => ‘Finish Assignment,
        ‘description => ‘I have to finish Maths assignment ‘
    ],
]);

This is how you can create Laravel Collection object. You can use all the powerful methods provided by Laravel Collection.

Now, let's look at an example of Eloquent Collection object:

$todos = ToDo::where('user_id',1)->get();

Here, $todos is an eloquent collection object which contains query results. It is simply an array from inside with some powerful collection methods at your disposal. You can still use Laravel Collection methods but Eloquent Collection also provides additional methods. You can do various things like converting to array, filtering your collection, sorting, mapping etc.

Let's look at some of the best and must-know Laravel Collection Methods:

1) all()

Laravel Collection class has a protected property called $items which contains an array with all the data. Collection wrapper provides additional methods to operate on that array. But if you simply want the array without all those bells and whistles then there is a method for that!

$emails = collect([
        ‘abc@gmail.com,
        ‘user@yahoo.com’,
        ‘example@example.com’,
    ‘test@yahoo.co.in’
    ]);

    $emails_array = $emails->all();

    dd($emails_array);

/*
Array:4 [▼
  0 => "‘abc@gmail.com"
  1 => "user@yahoo.com"
  2 => "example@example.com’"
  3 => “test@yahoo.co.in”
]
*/

2) avg()

Avg method provided by Laravel Collection returns the average value. By default, it will provide average of all the values in collection. But, if collection contains key => value pair, then you can provide key to the function and it will automatically calculate the average of all values to that key.

$simple_collection = collect([2,5,7,35,25,10]);

$s_avg = $simplex_collection->avg();

// 14

$key_collection = collect(['score' => 98], ['score' => 90], ['score' => 70],['score' => 86]);

$key_avg = $key_collection->avg();

//86

3) each()

Each method for Laravel Collection is similar to map function on arrays in PHP and JavaScript. Each method basically takes each element from the collection and applies the callback function on it. This method can be used to apply operations on each element, modify each element etc.

$collection = collect([1,2,3,4]);

$collection->each(function($item){
    return $item*$item;
});

// [1,4,9,16]

4) chunk()

chunk() method is used to split the Laravel Collection into multiple chunks of a given size.

$users = User::all();
$userschunk = $users->chunk(2);

dd($userschunk->toArray());

array:3 [▼
  0 => array:2 [▼
    0 => array:3 [▼
      "id" => 1
      "name" => "John Doe"
      "email" => "johndoe@example.com"
    ]
    1 => array:3 [▼
      "id" => 2
      "name" => "Jack Halt"
      "email" => "jhalt@example.com"
    ]
  ]
  1 => array:1 [▼
    2 => array:3 [▼
      "id" => 3
      "name" => "Sam Pitt"
      "email" => "spitt@example.com"
    ]
  ]
]

*Also Read: *

5) contains()

Often, you will need to check whether a collection contains a value or not. The Laravel Collection provides easy method to check that.

The contains() function is used to check whether the laravel collection contains the value passed to it as a parameter. It will return a boolean value -- true if it contains and false if not.

$users = collect(['name' => 'John Doe', 'email' => "johndoe@example.com"]);

$users->contains('johndoe@example.com');

// true

$users->contains('spitt@example.com');

// false

It can also accept pair of key and value for more granular search. It will check whether the given pair exists or not.

$users = collect(['name' => 'John Doe', 'email' => "johndoe@example.com"]); 

$users->contains('email', 'johndoe@example.com'); 

// true 

$users->contains('name', 'johndoe@example.com'); 

// false

You can also pass a callback function with your own condition to check whether any value passes the given condition.

$collection = collect([11, 25, 30, 45, 50]);

$collection->contains(function ($value, $key) {
    return $value == 55;
});

// false

The contains() method will use loose comparison to apply the condition. For more strict comparison, you can use _*containsStrict() *_method.

6) count() & countBy()

This is very simple yet very helpful method provided by Laravel Collection. How many times you need to count the items in Laravel Collection or an array?

The Count() method gives the total number of items in given Laravel Collection.

$collection = collect([10,20,30,40,50]);

$collection->count();

// 5

Laravel collection also provides more advanced method to count its items.

The CountBy() method gives the count of item's occurrences in given Laravel Collection in array.

$numbercollection = collect([10, 30,30, 50, 50]);

$counts = $numbercollection->countBy();

$counts->all();

// [10 => 1, 30 => 2, 50 => 2]

7) filter()

The _filter() _method is one of the most popular and useful Laravel Collection method. It allows you to filter your collection using the passed callback function. It returns the new collection with filtered items and does not change the original collection.

The callback function is provided with _ key ** __and **value _ as its parameters which you can utilize to create the filter condition.

$users = collect(['name' => 'John Doe', 'email' => "johndoe@example.com"]);

$filter = $users->filter(function($value, $key) {
    if ($value['email'] == "johndoe@example.com") {
        return true;
    }
});

$filter->all();
/*
[
    1 =>[
               'name' => 'John Doe', 
               'email' => "johndoe@example.com"
     ]
]
*/

If you don't provide any callback function, then it will simply remove any items equivalent to _ false __. _So, values like **null, false, ", 0, [] **will be filtered out. This method is easiest way to weed out any empty items in the collection.

8) get()

get()_ _is a method which returns the value at the key you pass to it as a parameter. If no key is passed then null is returned.

$users = collect(['name' => 'John Doe', 'email' => "johndoe@example.com"]);

$value = $users->get('name');

// John Doe

9) search()

search()_ _is another small yet helpful Laravel Collection method. It searches the Collection for the given value and returns the index if found. If it's not found then false will be returned.

$numbers = collect([31,21,53,64,27]);

$numbers->search(27);

// 4

10) groupBy()

Often you will need to group the data as per certain data. Normally, you would group at database level, but still there are many use-cases where you might need to further group the data in collection.

Laravel Collections offer handy method just for that. It works similar to Eloquent's groupBy and groups the items by given key.

$orders = collect([
    ['product_id' => 'p10', 'email' => 'jdoe@example.com'],
    ['product_id' => 'p10', 'email' => 'billy@example.com'],
    ['product_id' => 'p11', 'email' => 'danny@example.com'],
]);

$grouped = $orders->groupBy('product_id');

$grouped->toArray();

/*
    [
        'p10' => [
            ['product_id' => 'p10', 'email' => 'jdoe@example.com'],
            ['product_id' => 'p10', 'email' => 'billy@example.com'],
        ],
        'p11' => [
            ['product_id' => 'p11', 'email' => 'danny@example.com'],
        ],
    ]
*/

11) max()

In Excel, you may used this function many times to get the maximum value in a column or row. Similarly, Laravel Collections provides **max() **function to get the maximum value of given key among collection items.

$counter = collect([['count' => 10], ['count' => 20]]);

$counter->max('count');
// 20

If you don't pass any key to max() function, it will simply compare each item and return the highest one.

12) pluck()

pluck() is one of my favourite and most used method for Laravel Collection and more frequently for Eloquent Collection. It allows us to fetch values for given key from the collection in array.

$users = collect([
['name' => 'John Doe', 'email' => "johndoe@example.com"],
['name' => 'Jack Sparrow', 'email' => "sparrow@example.com"]
]);

$emails = $users->pluck('email');

/*
["johndoe@example.com","sparrow@example.com"]
*/

13) forget()

forget() is a laravel collection method which simply removes given key and its value from all the items in the collection.

$users = collect(['name' => 'John Doe', 'email' => 'johndoe@example.com']);

$users->forget('name');

$users->all();

// ['email' => 'johndoe@example.com']

14) toArray()

**toArray() **is a straightforward Laravel Collection method to convert your collection object to a plain php array.

$users = collect(['name' => 'John Doe', 'email' => 'johndoe@example.com']);

$users->toArray();

/*
    [
        ['name' => 'John Doe', 'email' => 'johndoe@example.com'],
    ]
*/

15) sortBy()

sortBy() is a very helpful method to sort your Laravel Collection by given key. It retains the original keys, just reorders the items in the collection as per the sorting condition.

$products = collect([
    ['name' => 'Laptop', 'price' => 2000],
    ['name' => 'Mouse', 'price' => 100],
    ['name' => 'Keyboard', 'price' => 150],
]);

$sortedproducts = $products->sortBy('price');

/*
    [       
        ['name' => 'Mouse', 'price' => 100],
        ['name' => 'Keyboard', 'price' => 150],
        ['name' => 'Laptop', 'price' => 2000],
    ]
*/

For more advanced sorting, you can also pass a callback function which will handle how to sort the items.

In a nutshell, these are best Laravel Collections methods you must know as a Laravel developer. There are lot more methods offered by Laravel Collections which you can checkout at Laravel Documentation.

The post 15 Must know Laravel Collection Methods ~ Laravel Collections Tutorial appeared first on Parth Patel - a Web Developer.

Career Advice: PHP vs Python vs JS?

Parth Patel — Mon, 13 Apr 2020 14:39:44 +0000

I am a Laravel/Vue full stack developer with 2+ years of experience. While searching for new job, I observed that big companies or small but exciting companies tend to use technologies like React, Python, C# etc. And that sort of demotivated me as I am only efficient in Laravel with bit of experience in Vue.

Should I learn and focus on these technologies? (I love working with Laravel but I want to work for company which has exciting product to work on or bigger companies (everyone fancies working for BIG companies I guess)

If yes,
then I am confused between Python or JS (React mostly as vue is not being used much by bigger companies)

Also, I have experience with only web development which I love but don't know about other development.
My Dilemma comes down to my wish for working for great and exciting company for long term rather than jumping from one startup to another

Laravel 7: How to Clear Cache using Artisan Command

Parth Patel — Fri, 20 Mar 2020 17:28:46 +0000

In your Laravel Application, clear cache easily with these quick and helpful artisan commands.

In this quick tutorial, I will mention few artisan commands you can use to clear various types of cache like config cache, view cache, route cache and application cache from your laravel application.

This can be useful and sometimes essential while working on your Laravel application.

Clear Cache in Laravel using Terminal

Using Terminal, go to the Laravel application's folder. Then execute the following commands as needed to clear cache from laravel.

#### Clear Application Cache

To clear laravel application cache, run the following artisan command:

php artisan cache:clear

#### Clear Route Cache

To clear route cache of your Laravel application run the following artisan command:

php artisan route:clear

#### Clear Configuration Cache

To clear the config cache of your laravel application, run the following artisan command:

php artisan config:clear

#### Clear Compiled Views Cache

To clear the view cache of your laravel application which are basically compiled view files, run the following artisan command:

php artisan view:clear

Sometimes, it's hard to get console access to your laravel application. Thus, it would be easier if we could clear cache of laravel application through browser, right? No worries, we can do that too!

Also, this method is useful for users who are using shared hosting for their laravel application! Since it's bit complex to run artisan commands via terminal in shared hosting, we can and will use browser method.

Clear Cache in Laravel using Browser

Here, we are still using same artisan commands as mentioned above. It's just that, those commands can be run programmatically in Laravel. Thus, we will create special routes to clear cache in Laravel.

// Clear application cache:
 Route::get('/clear-cache', function() {
     $exitCode = Artisan::call('cache:clear');
     return 'Application cache has been cleared';
 });

//Clear route cache:
 Route::get('/route-cache', function() {
     $exitCode = Artisan::call('route:cache');
     return 'Routes cache has been cleared';
 });

 //Clear config cache:
 Route::get('/config-cache', function() {
     $exitCode = Artisan::call('config:cache');
     return 'Config cache has been cleared';
 }); 

 // Clear view cache:
 Route::get('/view-clear', function() {
     $exitCode = Artisan::call('view:clear');
     return 'View cache has been cleared';
 });

Also Read:

The post Laravel 7: How to Clear Cache using Artisan Command appeared first on Parth Patel - a Web Developer.

Python: How to Print Without Newline

Parth Patel — Sat, 14 Mar 2020 02:36:56 +0000

Python is one of the most easiest language yet most powerful language to learn. Normally, one would start with print"hello world". No, you cannot start learning without that! Never!!

In python, you can print any value using print function. Yes! It's that simple. But there is one interesting problem. In most of the languages, if you want to print something on newline, you have to specifically specify that. Otherwise, it will always print in current line and not move to next/new line.

But, python by default always prints to newline. Now, that might become problem if you actually want to print on same line, isn't it? No worries. Let's see the solutions together.

Since, python has two popular but distinct versions ~ Python 2.x and Python 3.x, let's look into the solutions separately.

Print without newline in Python 3

1) Using print function

In python 3, you can print multiple times without newline by simply overriding end parameter in the print function. Basically, by default Python appends newline to print function but you can override it with empty string and it won't print to newline.

Let's see one example:

Code:

print("Hello World", end="")
print(" Again!")

Output:

Hello World Again!)

Let's try one more different example. We will use loop to print multiple integers separated by "." (and not newline ). Here, we are using end parameter to append "." at the end of print statement.

# python print on same line separated by "."
for i in range(1,10):
    print(i, end='.')

2) Using "sys" Library

Okay. Honestly, I cannot think of any situation where you would prefer this over print function, but let's explore this solution at least for fun. You can import and use sys library in python 3 to print strings or variables in same line avoiding newline.

#Import the inbuilt sys library
import sys
#First Line of output
sys.stdout.write("Hello World")
#Second Line of output
sys.stdout.write(" Again!")

Print without newline in Python 2

1) Using print function

In python2, you can use print statement (yes, print is not a function rather a statement in python 2.x) with comma to prevent newline.

Let's see example:

print "Hello World",
print " Again!"

This is how you can print without newline in python 3 using end argument and python 2 using comma. I hope you find it useful. Let me know in comments how you are using this trick.

Also Read:

The post Python: How to Print Without Newline appeared first on Parth Patel - a Web Developer.

PHP: How to generate a Unique id in PHP (Alphanumeric String)

Parth Patel — Tue, 25 Feb 2020 20:12:26 +0000

In php, there are many ways to generate unique alphanumeric id. First of all, we will understand why we might need unique alphanumeric id in first place.

In applications, normally we use unique integer ids which is generally generated by database itself ~ Auto-increment, unique integers. But sometimes we need unique alphanumeric string as ids instead of simple integers.

Few Reasons:

Unique ID is needed if you have multiple-server app architecture i.e -- Your database is stored in multiple servers
If you want to merge different branches of data without clashes
Unique ID is helpful and must if you want to prevent sequence discovery of data in application or API endpoints.

Generate Unique Alphanumeric String using uniqid() function in PHP

In PHP, there is a very helpful function uniqid() which generates unique alphanumeric string for you. The function has two parameters ~ though both are optional --

1) $prefix -- you can prefix the generated id with any string

2) $more_entropy -- By default, it sets to FALSE but if set to TRUE , it will add additional entropy ~ basically it means that it will increase the uniqueness of the returned string

Example:

//generates 13 character random unique alphanumeric id
echo uniqid();
//output - 5e6d873a4f597

//generates 13 character random unique id with prefix - db
echo uniqid("db");
//output - db5e6d875de7ba5

//generates 23 character random unique id with prefix - db but with more randomness
echo uniqid("db",true);
//output - db5e6d8782d90365.80737996

//generates random unique id with random prefix - higher randomness than fixed prefix
echo uniqid (rand (),true);
//output - 5e6d88383c9abdb5e6d88383c9b118314536965e6d88383c9b75.70966391

As you can see above, we can use uniqid() function in different ways to generate unique id.

Generate Unique Alphanumeric String using random_bytes() function in PHP

In PHP 7.x , there is another powerful and more secure function to generate random alphanumeric string -- random_bytes(). It requires only one parameter -- length, and it generates cryptographically secure pseudo-random bytes. Further, passing its output to another function bin2hex(), will give you unique random string.

Example:

$bytes = random_bytes(16);
echo bin2hex($bytes);
//output - 68309ba352806f9a943e16e74e5a9da3

Thus, using any of the above methods, you can create unique random strings and use it instead of basic integers and thus secure your application. Hope this helped you out.

Adios

The post PHP: How to generate a Unique id in PHP (Alphanumeric String) appeared first on Parth Patel - a Web Developer.

How to find nearby places using Latitude and longitude in Laravel 5

Parth Patel — Sat, 19 May 2018 22:23:15 +0000

Often, in real-estate , dating and other similar websites, you might have noticed how they allow you to search nearby to any location. You can easily accomplish that in your laravel application using Haversine formula.

Source -- Tighten.co

Last year, I worked on real-estate project in my college as an capstone project and that's when I got to work on this query. Though haversine formula is easy to find but to use it in laravel through Eloquent was very difficult. I tried many solutions found in Stackoverflow, laracasts forum and other sources but couldn't make them work. Some of them did work but since they were using raw queries, I couldn't paginate the results which is what I needed.

After some trial and error, I finally make it working. So, here I am sharing the code snippet.

  $gr_circle_radius = 6371;
      $max_distance = 500;

      $distance_select = sprintf(
                                    "           
                                    ( %d * acos( cos( radians(%s) ) " .
                                            " * cos( radians( lat ) ) " .
                                            " * cos( radians( long ) - radians(%s) ) " .
                                            " + sin( radians(%s) ) * sin( radians( lat ) ) " .
                                        " ) " . 
                                    ")
                                     ",
                                    $gr_circle_radius,               
                                    $lat,
                                    $long,
                                    $lat
                                   );

        $properties = Property::select('*')
        ->having(DB::raw($distance_select), '<=', $max_distance)
        ->groupBy('properties.id')->paginate(1);

Here, I have set maximum distance = 500 Km so it will show all results within 500 Km of the given Latitude and Longitude (used $lat, $long as variables).

To see the Demo, Check out my real estate project -- FirstFloor

The post How to find nearby places using Latitude and longitude in Laravel 5 appeared first on Parth Patel - a Web Developer.

How to create CSS hoverable side navigation menu

Parth Patel — Fri, 08 Sep 2017 22:11:40 +0000

In this guide, I will explain how to create a vertical side menu using Bootstrap, and CSS and optionally Javascript. Even if you are a beginner, you will be able to implement this and create a hoverable vertical navigation menu with ease.

There are multiple ways to implement hoverable vertical menu though it depends on some factors.

Is the number of sub-items under each menu item equal?
Do you want to use Only css or can use jquery plugin too?

Don't worry if this questions confuse you. Later, when you will see the different examples, you will understand the meaning of these questions.

Method #1– Create Vertical Side Hoverable menu with equal number of sub-items using only CSS

This is the most flexible vertical menu with great user experience though one downside is, you can only keep equal number of sub-items under each menu item which is not usual case generally.

Step 1 – HTML Markup

At first, we will create a basic structure of our vertical menu with 3 menu items and 3-3 sub-items in each menu items.

Note that, here I am using fontawesome too but you are not required to use it. If you do want to use fontawesome icons then don't forget to add font-awesome.css file in header.

<nav>
    <div class="menu-item">
      <h4><a href="#"><i class='fa fa-gear'></i> Settings</a></h4>
      <ul>
        <li><a href="#">Account</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Security</a></li>
      </ul>
    </div>

    <div class="menu-item">
      <h4><a href="#"><i class='fa fa-question-circle'></i> Help</a></h4>
      <ul>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Submit a ticket</a></li>
        <li><a href="#">Network Status</a></li>
      </ul>
    </div>

    <div class="menu-item">
      <h4><a href="#"><i class='fa fa-envelope'></i> Contact</a></h4>
      <ul>
        <li><a href="#">Phone</a></li>
        <li><a href="#">Email</a></li>
        <li><a href="#">Location</a></li>
      </ul>
    </div>
</nav>

Step 2 – Menu Layout

We will start by removing some default margin. Then we will add some basic font styles, margin, and width to vertical navigation menu. We will keep menu width to 200px.

For menu headers a.k.a top level menu items, we will set basic styles like color, font-size, background, border-bottom etc. This will give header a unique distinct look keeping it different from sub-menu items.

* {
  margin: 0px;
  padding: 0px;
}

nav {
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  margin: 50px auto; 
  width: 200px;
}

.menu-item {
  width: 200px; 
}

/*Menu Header Styles*/
.menu-item h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
  background: #b90329;
  border-bottom: 1px solid white;
}
.menu-item h4 a {
  color: white;
  display: block;
  text-decoration: none;
  width: 200px;
}

.menu-item h4:hover {  
  background: #cc002c; 
}

Step 3 – Sub Menu

Here first, we are targeting the sub-menu as whole. We will set the background color of submenu as white. Then we will set other basic styling like font-size, line-height , padding etc. Here you can see that we set the height of ul element to 0. This means, by default submenu will be hidden. We will show submenu on hover only. Also we will set list-style-type to none.

For animation, we are using height animation which will increase the height of submenu using animation. Here we set the height of submenu on hover to 93px. But in your case, this value might be different. If you are using more than 3 sub-menu items or less then 3 items then you have to set accordingly.

/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;

  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}
.menu-item:hover ul {
  height: 93px;
}
.menu-item ul a {
  margin-left: 15px;
  text-decoration: none;
  color: #aaa;
  display: block;
  width: 200px;
}
/*li Styles*/
.menu-item li {
  border-bottom: 1px solid #eee;
}

.menu-item li:hover {
  background: #eee;
}

Demo

One important thing to note here is that we can’t just set the height to auto because for some reason this disables the animation. If we could set the height to auto, we could use different numbers of sub items under menu items. That's why, I will also show another method to display unequal number of sub items in vertical menu using hover.

Method #2 – Create Side Hoverable menu using CSS and Javascript

This is another method to create vertical expanding menu using CSS, jQuery and another jQuery plugin called jQuery-hoverIntent.js.

With this method, there is no limitation of keeping child items of equal numbers. Thus making it a great way to implement the hover expanding functionality but the catch is you need to load special jquery plugin to achieve that. That should not be an issue in normal circumstances.

Ohk so let's see one example.

Step 1 – HTML Markup

First, we will create a basic structure which will contain a vertical menu with 3 menu items and unequal number of child items -- a normal occurrence.

<div id="container">
  <ul id="nav1">
    <li><a href="#">Portfolio</a>
    <ul>
        <li><a href="#">Web</a></li>
        <li><a href="#">Print</a></li>
        <li><a href="#">Other</a></li>
        <li><a href="#">Print</a></li>
        <li><a href="#">Other</a></li>
    </ul>
    </li>
    <li><a href="#">About</a>
      <ul>
      <li><a href="#">History</a></li>
        <li><a href="#">Meet The Owners</a></li>
        <li><a href="#">Awards</a></li>
    </ul>
    </li>
    <li><a href="#">Menu Heading 3</a>
    <ul>
      <li><a href="#">Stage1</a></li>
      <li><a href="#">Stage2</a></li>
      <li><a href="#">Stage3</a></li>
      <li><a href="#">Stage4</a></li>
    </ul>
    </li>
</ul>
<div>

Step 2 -- Menu Layout (CSS)

Now we will use some css to design it a bit. This is just a demo so you can use any css styles you want to style it as per your requirements.

Do notice that we are hiding the child item list by default. We will use jquery plugin to show them on hover in next step.

ul,
li,
a {
  padding: 0px;
  margin: 0px;
}

#nav1 a {
  color: #FFFFFF;
}

#nav1 li ul li a:hover {
  background-color: #394963;
}

div ul li ul {
  background-color: #4a5b78;
  list-style: none
}

#nav1 > li > a {
  background-color: #343434;
  padding: 16px 18px;
  text-decoration: none;
  display: block;
  border-bottom: 2px solid #212121;
  background: linear-gradient(top, #343434, #111111);
}

#nav1 li ul li a {
  padding: 10px 0;
  padding-left: 30px;
  text-decoration: none;
  display: block;
}

div {
  background-color: #000000;
  background-color: #343434;
  width: 280px;
}
/* Hide Dropdowns by Default */
#nav1 li ul {
  display: none;
}

Step 3 -- Hover Expanding Menu using jQuery

Here we are using jQuery as well as jQuery plugin -- jquery.hoverintent.js to make the child menu slidedown and slideup on hover. We could have done this with only jquery without the need of loading another jquery plugin but it leads to flickering issue. Thus, this plugin exists to resolve that issue.

You can get the jquery-hoverintent.js file from here

$(document).ready(function() {
  $("#nav1 li").hoverIntent(
    function() {
      $(this).find('ul').slideDown();
    },
    function() {
      $(this).find('ul').slideUp();
    });
});

Demo

Conclusion

There are some other tricks to achieve the similar effect but they have some user experience issues. Personally I found these methods so far best compared to others.

If you know any other better way to create such hoverable vertical expanding menu then please comment below. I would love to add that here.

The post How to create CSS hoverable side navigation menu appeared first on Parth Patel - a Web Developer.

Object Oriented Programming in PHP for Beginner Series

Parth Patel — Wed, 17 May 2017 02:02:20 +0000

Object-oriented programming is relatively complex topic in php language. Thus, novice programmers find it difficult to understand php oop specially if they don’t have much programming experience.

Object Oriented Programming was introduced from PHP 4 but it (php oops) gained momentum with PHP 5 version. In 5^th version, PHP’s Object model was rewritten which allowed more features with better performance and introduced full object model for php classes.

With this tutorial series, you will gain enough knowledge about PHP OOPs or Object Oriented Programming in PHP to start with.

If you want to learn about php frameworks then you can check our guide on Laravel tutorial.

What is Object Oriented Programming?

Object-oriented programming is a programming style based on the concept of objects. It helps developers by preventing reinventing the wheel and make the code easy to maintain as well as scale.

Object Oriented Programming seems confusing at first but when you go deep, you will realise that it is meant to simplify programming.

Why use Object Oriented Programming?

There are various advantages of using PHP OOP over procedural programming in PHP like:

Re-Usability and Recycling of code :Let’s say you want to create Mercedes car object while your friends want to create Audi car object. You build your objects but you find that both objects have lot of similarities between Mercedes and Audi car like number of tires. The fact is both actually are car. So instead of created those two objects separately from scratch, if you have one car class with generic properties and methods, you can save lot of repetition by reusing and recycling the code.
Modularity : If you are creating multiple separate classes for different entities, you are making it modular as if you want to fix something, you only have to edit that specific class and not others. This modularity proves helpful in troubleshooting.
Scalable : Object Oriented Programs are more scalable than structured programs. An object’s interface provides all the information needed to replace the object thus it makes it easy to replace old code or add new code to scale in future.
Maintenance : Programs needs to be improved on regular basis with many changes. An Object-Oriented program is much easier to modify and maintain than a non-Object Oriented Program.

Understanding Classes and Objects:

What is Class and Object in PHP OOP?

Before we dive further in Object Oriented Programming world, let’s learn about php classes and objects which are the pillars of PHP OOP paradigm.

A class is a programmer-defined data type which contains different types of data as well as different functions.

An object is an instance of a class. Object gets the copy of all the data and functions in the class thus it acts as independent entity.

Let’s understand classes and objects using an example.

Left side of the above image shows car blueprint and right side shows cars created using that blueprint like Mercedes, BMW, Audi etc.

Thus here, Car is a php class which acts like a blueprint and it contains data properties like number of tires, car type, car color etc.

And Mercedes, Audi are known as objects which we created using class ‘Car’.

All the objects were created from same class and thus they have same functions and properties but they may have different values of their properties. For example, in above image, all cars have different values to their color property – Mercedes is green; BMW is blue; Audi is Orange.

What is method and property?

Properties in a class are variables which can store data of different data types. Method is a function defined inside a class.

All the objects instantiated from that class gets copy of that property variable and a copy of all the member functions aka Methods.

How to create class and object?

In class, we will group the code which handles a particular topic. Thus, for naming the class, we should use singular noun like Car which will handle logic about the cars.

The syntax to create class is very easy and straightforward. You have to use class keyword to declare a class followed by the name of the class.

<?php

class Car
{
       // Class properties and methods
}

?>

Notes:

Declare class using keyword class
Use singular noun and Capitalize the first letter
If class name contains more than one word then capitalize each word using upper camel case naming convention. For example: JapaneseCar, AmericanCar
An instance of a class is an object created from existing class.
The new keyword is used to create an object from class.

Now, you can create an object from class very easily using new keyword.

$bmw = new Car;

Thus putting it all together:

<?php

class Car
{
               // Class properties and methods
}

$bmw = new Car;

?>

How to define properties in class?

To add and store data to a class, properties or member variables are used. Properties can store values of data types – string, integer and decimal numbers, Boolean values etc. These are exactly like regular variables but they are bound to the instantiated object and thus you can access the variable only using the object.

Let’s add some properties to the class Car.

<?php

class Car
{
               public $color = ‘red’;
               public $numberOfTires = 4;
}

$bmw = new Car;

?>

Notes :

We used public keyword before class property to determine the visibility of the property about which we will discuss later.
Class property can have default value. Also you can skip the default value.

Here you can see that we added some properties which are necessary for every car object. Obviously, car class needs lot more properties than this but for the tutorial, this is enough.

Now to read any property, access the property using object. For example:

echo $bmw->color;

The arrow (->) is an OOP construct that accesses the properties and methods of a given object.

How to define methods in class?

The PHP functions which are defined in a class are called methods. Methods in PHP OOP are exactly similar to normal php functions.

Let’s create some methods for our Car class.

<?php

class Car
{
              public $color = ‘red’;
              public $numberOfTires = 4;

              public function setColor($val)
              {
                              $this->color = $val;
              }

              public function getColor()
              {
                              return $this->color;
              }
}

$bmw = new Car;

?>

Here we created two methods 1) setColor – which will assign the given parameter to object’s color property and 2) getColor – which will return the value of object’s color property.

Note: $this is used to reference the current object. You can access class properties and methods from within the class using $this keyword.

Now, to use these methods, call these methods using arrow “->”. You need to reference corresponding objects because every instantiated objects have copy of these properties and methods.

Let’s use these newly created methods.

<?php

class Car
{
    public $color = ‘red’;
        public $numberOfTires = 4;

        public function setColor($val)
    {
        $this->color = $val;
    }

    public function getColor()
    {
        return $this->color;
    }
}

$bmw = new Car;
$bmw->setColor(“black”);
echo $bmw->getColor();

?>

Notes:

A code for the method is to be enclosed within a pair of curly braces.
You need to use one of the keyword public, protected or private to create a class method or property. These are visibility keywords. More about this you will read later.
If you haven’t used one of the keyword – public, protected or private then default is public.
You can also access properties and methods of the current instance or object using $this keyword -- $this->color.

Constructor and Destructor

In php there are some methods known as magic methods. Among them, two most important magic methods are __construct and __destruct. These two are methods to create constructor and destructor for the class. Remember, magic methods always start with two underscores.

What is constructor and destructor?

The __construct method is a method which is called by the class when an object is being created. It is used to prepare the new object for use. Constructors can be used to assign parameter values to the object properties.

The __destruct method is a function which is called by the class when an object is being destroyed. It is generally used to clean up memory as object is being destroyed.

We will create a constructor to set value of the Color property.

<?php

class Car
{   
    public $color = ‘red’;    
    public $numberOfTires = 4;

    public function __construct($color)
    {        
        $this->color = $color;        
    }

    public function setColor($val)
    {       
        $this->color = $val;   
    }

    public function getColor()
    {        
        return $this->color;    
    }  
}

$bmw = new Car(“white”);

echo $bmw->getColor(); //this will print “white” because our constructor assigned value “white” to color property

$bmw->setColor(“black”); // this will overwrite color property to black

echo $bmw->getColor();

?>

In the above example, we created a constructor which accepts one argument for color and sets it to the color property. We also changed our object creation code and passed a value to be set to color property.

Remember, as we created a constructor to override the default php constructor, we need to pass a parameter to the constructor.

If you try -- $bmw = new Car(); it will give error because our constructor expects one parameter.

Now we will create a destructor which will print message when object is being destroyed

<?php
class Car
{
    public $color = ‘red’;
    public $numberOfTires = 4;
    public function __construct($color)
    {
        $this->color = $color;
    }
    Public function __destruct()
    {
        echo "Object is being destroyed";
    }
    public function setColor($val)
    {
        $this->color = $val;
    }
    public function getColor()
    {
        return $this->color;
    }
}
$bmw = new Car(“white”);
echo $bmw->getColor(); //this will print “white” because our constructor assigned value “white” to color property
$bmw->setColor(“black”); // this will overwrite color property to black
echo $bmw->getColor();
?>

Notes:

The constructor method is a special magic method introduced with PHP 5 which allows to initialize object properties or perform some action at the time of object instantiation.
The destructor method is a special magic method which allows to perform some actions at the time when object is being destroyed.
Classes which have a constructor method, executes that automatically when an object is instantiated or created.
Classes which have a destructor method, executes that automatically when an object is being destroyed.
The constructor and destructor are not required. Every php class has a default constructor and destructor. If you create a constructor or destructor, the default one is ignored automatically.
PHP only executes one constructor and one destructor ever.
The “__construct” and “__destruct” method starts with two underscores.

Assigning visibility in PHP

Previously we discussed to use one of the keywords – public, private and protected when defining property or a method. Public, Protected and Private are three types of visibility in PHP to control access of properties, variables or methods.

Public: Public method or variable is accessible everywhere.
Private: If property variable or method is private then it is accessible only from inside the class. For example: if color property of class Car is private then you cannot access it outside the class like – echo $bmw->color; but a method like getColor can access it because it is inside the class.
Protected: If property variable or method is protected then it is accessible from inside the class or from inside any class which is inherited from this class.

Why we should not use public visibility all the time?

Because it's not at all secure to keep everything public. To make it secure, PHP OOP has introduced these different visibilities.

Let’s discuss an example showing the importance of private or protected visibility in PHP OOP:

Make changes to our Car Class code as shown below:

<?php
class Car
{
    private $color = ‘red’;
    private $numberOfTires = 4;
    public function __construct($color)
    {
        $this->color = $color;
    }
    public function __destruct()
    {
        echo "Object is being destroyed";
    }
    public function setColor($val)
    {
        $this->color = $val;
    }
    public function getColor()
    {
        return $this->color;
    }
}
$bmw = new Car(“white”);
echo $bmw->color; //this will give error because color property is private
echo $bmw->getColor(); //this will print “white” because our constructor assigned value “white” to color property
$bmw->setColor(“black”); // this will overwrite color property to black
echo $bmw->getColor();
?>

As shown in above code, we made properties private to keep them hidden from the outer world. So, if someone tries to access color property using $bmw->color , it will give error.

And that’s why we created two methods getColor and setColor which are also known as getter and setter methods because they act as a intermediary between outer world and private variable.

So if you want to get the value of color, use $bmw->getColor() and if you want to set value of color , use $bmw->setColor(“white”). This is known as encapsulation.

Static Methods and Properties

A static method or property can be accessed without the need instantiating object. Just use class name, scope resolution operator and property or method name.

We already learnt three modifiers – private, protected and public. Static is the fourth access modifier in PHP OOP which allows access to properties and methods without the need to create objects from the classes.

How to create static method and property

To define methods and properties as static, you need to use reserved static keyword.

Let’s see it in our example:

<?php
Class Car
{
    private $color = ‘red’;
    private $numberOfTires = 4;
    public static $country = “Canada”;
    public function __construct($color)
    {
        $this->color = $color;
    }
    Public function __destruct()
    {
        echo "Object is being destroyed";
    }
    public function setColor($val)
    {
        $this->color = $val;
    }
    Public function getColor()
    {
        return $this->color;
    }
}
$bmw = new Car(“white”);
echo $bmw->color; //this will give error because color property is private
echo $bmw->getColor(); //this will print “white” because our constructor assigned value “white” to color property
$bmw->setColor(“black”); // this will overwrite color property to black
echo $bmw->getColor();
echo Car::$country;
?>

Here I defined a constant name country with value Canada. Now I don’t need an object to access that constant.

Note:

To use the static method and properties within the class, use self

Conclusion

PHP OOP brings lot of advantages compared to procedural programming and it provides easier approach to build complex web applications with easier scalability.

Now, you should be comfortable with Object Oriented Programming style and you should have sound understanding of the basic concepts of PHP OOP i.e Object Oriented Programming.

In the next parts, we will learn advanced concepts of PHP OOP, helpful to create highly modular and complex applications.

Hope you liked this tutorial about OOP in PHP. Do you have any questions or confusion? Comment below.

The post Object Oriented Programming in PHP for Beginner Series appeared first on Parth Patel - a Web Developer.