How to Add Dropdown Menu in Laravel Defaul Dashboard using Bootstrap

This is an article where the point of specific discussion is about how to add dropdown menu in Laravel Default Dashboard. The one which is being pointed out as Laravel Default Dashboard is the dashboard generated upon adding authentication feature. It can be referred to the article titled ‘How to Create Laravel Project with Authentication’ in this link. The Laravel Default Dashboard is shown in the following image :

After successfully logging in, there is a menu displayed located in the navigation header as shown in the following image :

Continue reading “How to Add Dropdown Menu in Laravel Defaul Dashboard using Bootstrap”

How to Install Bootstrap for Laravel using npm via Command Line in Linux Operating System

This is an article depicting the process of how to install bootstrap using an utility called ‘npm’. The utility itself which is claimed as Javascript Package Manager is actually take part for managing dependency available in a certain web-based application project such as Laravel. So, using npm to manage it, in the context of installing a Javascript additional module such as ‘bootstrap’, that role can be taken by executing a single command. But to execute the command further, the ‘npm’ utility need to be checked first whether or whether not it has already been installed. Below is the output of the ‘npm’ command executed :

Continue reading “How to Install Bootstrap for Laravel using npm via Command Line in Linux Operating System”

ReferenceError: $ is not defined using jquery for bootstrap

In this article, an error which is locatedĀ  or it is similar with the one defined in the title ‘ReferenceError: $ is not defined’ using jquery for bootstrap’. It is happened in the context when a Laravel based web page is being executed. Using Bootstrap to arrange the elements exist in the web page to look better using the grid system, it needs JQuery library so that it can be functioned properly.

The JQuery library needed is in a form of Javascript file. But in this context, the function of a JQuery file based on Javascript type is not only for supporting the usage of Bootstrap but also to support the execution of JQuery snippet code itself.

For an example, disabling a tab so that it cannot be accessed, it is actually can be done with the help of JQuery. For an example, if there is a file importing JQuery where in this context, it is in the form of blade view template executed based on Laravel framework, after defining as shown below :

<script src="{{ URL::asset('js/jquery-3.2.1.min.js') }}"></script>

Below is how to do it in a blade view in order to block the tab for being accessed :

Continue reading “ReferenceError: $ is not defined using jquery for bootstrap”

Bootstrap’s javascript requires jquery version 1.9.1 or higher, but lower than version 4

This is an article written to discuss an error shown because of a certain execution of page developed using Laravel framework based on PHP Programming Language. It is actually simple error based on the usage of Bootstrap which is inappropriate because of lacking of something. Below is the image depicting on the situation or the condition relate to the error stated in the title of the article, “Bootstrap’s javascript requires jquery version 1.9.1 or higher, but lower than version 4 :

Bootstrap's javascript requires jquery version 1.9.1 or higher, but lower than version 4
Bootstrap’s javascript requires jquery version 1.9.1 or higher, but lower than version 4

The above error page is not directly represent the actual page of the page where Bootstrap is used but it is actually a plugin installed in Mozilla Firefox called ‘Firebug’ specifically useful for Javascript debugging on Web browser. It is focusing on editing, debugging and monitoring the test and implementation of CSS, HTML and Javascript real-time on a web page. It is integrated with Mozilla Firefox and it can be activated at any time as long as it has already been installed.

Continue reading “Bootstrap’s javascript requires jquery version 1.9.1 or higher, but lower than version 4”

How to use Bootstrap in Laravel Framework

This is an article where the main purpose of it is to explain on how to use Bootstrap grid framework system in Laravel framework. It is based on the following image :

How to use Bootstrap in Laravel Framework
How to use Bootstrap in Laravel Framework

The above image display is actually in not an arranged display or not in a well-formed position. It is because the library used for Bootstrap grid framework system responsible in arranging the position of all elements exist in the page is not properly functioning.

One of the cause which is might be the reason for this to be happened is because the .js and .css file needed to execute so that Bootstrap can properly performs its function is nowhere to be found.

There is a specific way to define how to import all those files needed in blade view template file. Below is how to correctly import those files :

First of all, check the content of the folder named ‘public’ :

Continue reading “How to use Bootstrap in Laravel Framework”