Page 2 of 19

Different color for each menu item

Jawaid Leave a comment

In a recent project I got a requirement that each menu item should be highlighted in different color when visited. The menu items and their required active colors were:

  • Home – Green
  • Portfolio – Blue
  • Team – Yellow
  • Contact – Red

These colors were to be applied only when that page is being visited otherwise color of menu item should be default black color.

So, if user is visiting home page then menu item should something like this

home_menu.png

And if user is visiting Portfolio page then menu should be something like this

portoflio_menu.png

Considering that this was a WordPress theme project where we were using Understrap as a base theme which is based on Twitter Bootstrap. So, when user visits, for example a home page WordPress will attach a .active CSS class to it. Taking advantage of that we added different classes for each menu item and then used following rule to make menu item colors different:

.navbar-nav > .home.active > a {
    color: green!important;
}
.navbar-nav > .portfolio.active > a {
    color: blue!important;
}
.navbar-nav > .team.active > a {
    color: yellow!important;
}
.navbar-nav > .connect.active > a {
    color: red!important;
}

CSS Class Chaining

We utilized the class chaining method here. If you note that .home.active classes are chained together without space and which means it will select an element with both these classes.
That did the trick and all menu items were in different color.

 

Rollover image – Change image on hover/mouse over

Jawaid Leave a comment

Often when designing websites static or dynamic, PHP or ASP.Net, Laravel or WordPress, you have to design in a way if user hovers an image it gets changed and an alternate image is displayed. This can be easily achieved via simple HTML events. The trick is explained here.

It is simple as that.

Sharing data between Laravel and Angular

Jawaid Leave a comment

When building applications with Laravel and Angular you might come across a problem where you want to print data using AngularJS brackets {{}} but before it can be parsed by AngularJS, Laravel blade engine parses it and tries to replace the value if it finds one. Otherwise Laravel will start complaining about the variables. To solve that you just need to prepend brackets with @ sign so blade engine knows that you just need to ignore this expression and AngularJS will take care of it. And AngularJS will parse it and replace the variables with actual data.

Below is a sample snippet to do this:

@{{ article.body }}

In this snippet Laravel blade engine will ignore this and AngularJS will parse it and replace it with article.body data it has.

Laravel: Specified key was too long error on migration

Jawaid Leave a comment

When you install a new Laravel project with ‘laravel new’ and run the migration that comes with it you might get following error:

#php artisan migrate
Migration table created successfully.


 [Illuminate\Database\QueryException]
 SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes (SQL: alter table `users` add unique `users_email_unique`(`email`))

[PDOException]
 SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes

To solve this error edit your app/Providers/AppServiceProvider.php file.

Add the namespace:

use Illuminate\Support\Facades\Schema;

and then add the following line in boot() method of your AppServiceProvider class.

use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider
{
 /**
 * Bootstrap any application services.
 *
 * @return void
 */
 public function boot()
 {
   Schema::defaultStringLength(191);
 } 
}

This should solve your problem. Just delete all the tables and run the migration again.

Setup CodeIgniter Docker container for development

Jawaid 1 Comment

Docker

Docker is the world’s leading software container platform. Developers use Docker to eliminate “works on my machine” problems when collaborating on code with co-workers. Operators use Docker to run and manage apps side-by-side in isolated containers to get better compute density. Enterprises use Docker to build agile software delivery pipelines to ship new features faster, more securely and with confidence for both Linux and Windows Server apps. If you want to learn more about Docker head to their What is Docker section here.

CodeIgniter

CodeIgniter is a powerful PHP framework with a very small footprint, built for developers who need a simple and elegant toolkit to create full-featured web applications. If you want to learn more then head to their official website that has great documentation as well at https://codeigniter.com/

CodeIgniter on Docker

If you’re excited about using Docker for your development and you are working on a CodeIgniter (CI) based PHP project then you are lucky. It is very easy to setup CI based project with Docker. Just follow the instructions below to setup a fresh CI project with Docker.

docker-compose up -d

It will spin up two containers. One for app itself with Nginx and another for MariaDB for your DB. App container will create a directory in your project folder and install CodeIgniter in it.

Now browse http://localhost:8000 in your browser and you’ll see the CodeIgniter page. It’s that easy.

Setup Laravel with Docker containers

Jawaid Leave a comment

Docker

Docker has captured my attention lately and has been growing exponentially for last few years. Docker has revolutionized the virtualization space and has given DevOps engineers and developers a new set of tools that can ease their development as well as infrastructure resource utilization. Mostly Node.js apps have been deployed with Docker but it is not limited to only that. If you’ve been developing apps for web using PHP and Laravel framework then you are lucky that community has developed some great tools to utilize docker in their development workflow. If you are new to Docker and want to learn more about Docker then visit their website docker.com specially the section What is Docker?

Laradock

Laradock does the hard part and facilitate developers to quickly and easily setup Laravel development environment in seconds. Follow the these steps to get started.

Setup fresh environment then install Laravel inside docker

  • Create project directory. e.g. myproject
  • Create another directory within myproject directory for source that you will use commit to git repo. eg. app
  • Clone the laradock repo inside myproject folder, this will create laradock folder
git clone https://github.com/laradock/laradock.git
  • Edit the docker-compose.yml file to map to your project directory once you have it (eg. – ../app:/var/www)
  • Run the following command
docker-compose up -d nginx mysql redis beanstalkd
  • Enter the workspace
docker-compose exec workspace bash
  • cd to /var
  • Install Laravel
composer create-project laravel/laravel www
  • Open your .env file and set the following
DB_HOST=mysql
REDIS_HOST=redis
QUEUE_HOST=beanstalkd

Now open your browser and visit http://localhost

You will see running Laravel app. That was cool!

You can also connect to mysql using these settings.

Host: localhost
User: root
Password: root

If you want to add more services see the official laradock docs. It support tons of other services like memcache, pgsql etc.

Daily Use

Following are some docker related commands that you want to use on daily basis once your development environment is setup.

  • To bring up the servers to run application
docker-compose up -d nginx mysql
  • Enter workspace container to run commands like artisan, composer, phpunit, gulp etc.
docker-compose exec workspace bash

or on Windows PowerShell

docker exec -it {containerid} bash
  • List current running containers
docker ps
  • List current project containers
docker-compose ps
  • Close all running containers
docker-compose stop
  • Delete all existing containers
docker-compose down
  • View the log files
docker logs {container-name}