This Laravel Nova Tutorial will help you learn the basic concepts of Nova.

Laravel Framework has gained great success in the field of web development, deployment, and web services for mobile applications. Taylor Otwell has created Laravel Echosystem to build, deploy, and test a web application using various tools. Nova is a powerful administration tool for building Admin Panels and Custom CMS’s.

Let’s quickly head over to understand Nova…

What is Laravel Nova?

Laravel Nova is a single page application built using both the Laravel framework and Vue.js platform. According to the Nova team:

” Nova is a beautifully designed administration panel for Laravel. We’ve sweated the small details and carefully crafted Nova to not only look great but to be a joy to work with.”

Nova is designed and developed by a Laravel team to facilitate Laravel web developers in building, deploying and managing web applications (Not only Laravel based ).

How do you get Nova?It’s a complete composer based, so you can install Nova on an existing Laravel installation using the composer.

Nova is comprised of two parts:

Nova Front-end: The front end part of Nova is a SPA (Single Page Application) developed in Vue.js, Vue Router, and Tailwind. It has very beautiful UI and customizable.

Nova Backend: The Nova backend is powered by Laravel which provides a set of PHP API’s to fetch data from a given source and send it to client-side for display.

In nutshell, Nova is a package which consists of a set of PHP API’s to get data from different sources and populate this data to views using Nova Vue components.

Features of Laravel Nova

Now that we have got a basic idea about Nova, lets head over to the important features of Nova:

# Resource Management

The resources are an integral part of Nova. Resources in Nova corresponds to a Laravel model and makes that model accessible to the admin panel. Nova ships with a complete CRUD interface for Laravel Models. CRUD is the basic feature of Nova to create, read, update, and delete resources in the database.

# Filters

Nova filters allow developers to create PHP classes that can scope resource index queries which are enabled/disabled through the User Interface (UI). Filters are used to filter out the query results for a given value.

# Actions

Nova actions are simply PHP classes that execute a given task on a given resource or a set of resources.

# Lenses

Nova Lense feature is used to customize how the given resource will be displayed in a view.

Web Browsers Supported by Nova

Laravel Nova Pricing

Unfortunately, Nova is not free to use it you need to first purchase a license, then download Nova zip and make installations. You first need to go to Nova Website and register for an account there. Then, to get the Nova code you need to purchase a license.

]]>https://www.techcluesblog.com/ultimate-laravel-nova-tutorial/feed/0Write and Execute First Python Hello World Programhttps://www.techcluesblog.com/write-and-execute-first-python-hello-world-program/
https://www.techcluesblog.com/write-and-execute-first-python-hello-world-program/#commentsFri, 05 Jul 2019 17:07:13 +0000https://www.techcluesblog.com/?p=1480Write and Execute First Python Hello World Program Writing and executing a first hello world program is the starting point to learn any new programming language. So, If you are Python learner then Python Hello World program is a basic step before going to master other python core concepts. The hello world program in Python would […]

]]>Write and Execute First Python Hello World ProgramPython Hello World

Writing and executing a first hello world program is the starting point to learn any new programming language. So, If you are Python learner then Python Hello World program is a basic step before going to master other python core concepts.

The hello world program in Python would make the developer comfortable and confident that he/she can learn with self-learning tool.

Python has dominated the modern world of scripting languages and used in almost every concept – AI, Machine Learning and Big Data Analytics. Due to the robust set of features, Python programming language has entered the complete dimension of data analytics, Artificial Intelligence, Machine Learning, and much more. We will discuss python script to print hello world.

A few years back…When we started our career as C developer, we executed the first hello world program and realized that now we can do anything..with self-learning

Not joking.

Seriously, hello world program introduces the new developer to the new system, language and open his/her doors towards learning.

Why Python?

Even if you are learning core Python, AI, Machine Learning or Big Data, writing and executing a Python Hello world program is a first most, fundamental, and practical step towards learning Python. Every computer programmer improving his skills to learn new languages/technologies like Python, etc..

What is Python?

Python is a modern high-level general purpose programming language, sometimes known as a scripting language.Python is open-source so it has very active python developers community. Python is automatically included with Linux OS distributions, Macintosh computers. It has millions of user base. Python programs can search for files and directory trees, launch other programs, do parallel processing with processes and threads, and so on.

The extension of the python source code file is .py.

How to check the currently installed version of Python on Windows?

Open the command prompt

Make sure that Python executable path is set in the PATH environment variable.

Besides individual developers, Python is used by top major companies for various purposes:

1. Google makes extensive use of Python in its web search systems2. YouTube makes use of Python in the video sharing service.3. The Dropbox storage service codes both its server and desktop client software primarily in Python.4. The widespread BitTorrent peer-to-peer file sharing system began its life as a Python program.5. Maya, a powerful integrated 3D modeling and animation system, provides a Python scripting API.6. JPMorgan Chase, UBS, Getco, and Citadel apply Python to financial market forecasting.

Writing the first Python hello world program

To write the Python hello world program, you can make use of any text editor Notepad++, IDE or Command-line editor (vi in Linux):

Create a new file called helloworld.py .

Open the file and write the following code:

print(“Hello, World in Python!”)

3. Finished writing – save and close the file.

Before running the program lets first understand the basics of Python hello world program…

Internally, how does the python program works under the hood?

First of all, the Python interpreter parses, analyze the source code contained in the .py file. The .py is the extension of the Python script/program which contains all the source code lines.

Here, print() is a function to display the given input string to the user. The string part is “Hello World”. A string in computer programming is basically a sequence of characters having null-terminated character, i.e where the compiler/interpreter know where the string terminates.

The print() is a built-in function provided by the Python standard library for displaying strings.

In this Laravel tutorial, we will have a detailed understanding of Laravel Session, basics of session management in the Laravel framework, how to create session variables, retrieve and save data to/from session variables.

Basic Concepts of Laravel Session

A Session is one of the primary storage for maintaining user information (in the form of session variables) to be accessible across multiple web pages. A Session in a web application is sometimes referred to as server-side web sessions. The client-side web sessions make use of client browser cookies to persist user information.

In nutshell, the session is a method to persist state between different web page requests. Laravel framework provides a very simple interface for session management in laravel.

List of available Session Drivers

Laravel supports the following types of session drivers to store data:1. file – sessions are stored in storage/framework/sessions.2. Cookie – sessions are stored in secure, encrypted cookies.3. Database – sessions are stored in your database.4. Memcached – sessions are stored in one of these fast, cache based stores.5. In-memory Arrays – sessions are stored in a PHP array and will not be persisted.

If you are a beginner to Laravel Framework, then we recommend you to read the following topics:

Laravel Developers can configure all the session settings and drivers in config/session.php. Even we can choose whether or not to encrypt your session data, select which driver to use(file is the default), and specify more connection-specific details like the length ofsession storage and which files or database tables to use.

Session Config file sample code – ..config/session.php

/*|————————————————————————–| Default Session Driver|————————————————————————–|| This option controls the default session “driver” that will be used on| requests. By default, we will use the lightweight native driver but| you may specify any of the other wonderful drivers provided here.|| Supported: “file”, “cookie”, “database”, “apc”,| “memcached”, “redis”, “array”|*/

‘driver’ => env(‘SESSION_DRIVER’, ‘file’),

Accessing/Using Session Data

Laravel provides a unified interface to access, retrieve, save, and delete data from session variables. There are two ways to access the laravel session data – using the global session helper interface and Request instance.

The global session helper is a widely used method to read and write session data.

The unified API of the session management interface allows developers to save and retrieve session data based on individual keys, for example:

Laravel Session Methods to retrieve, save and delete session data

There are two most common methods – get () and put(), but let’s take a complete look at each ofthe available methods and their parameters:

The following is the list of methods available on session instances:

How to retrieve session data in Laravel? Laravel session example

The session()->get($key, $fallbackValue) method is used to retrieve session data. The get() method retrieves the value of the provided key out of the session. If there is no value attached to that key, it will return the fallback value instead (and if you don’t provide a fallback, it will return null).

The fallback value can be a string or a closure, as you can see in the following examples.$points = session()->get(‘blogs’); $points = session()->get(‘blogs’, 0);

Storing Data into Laravel Sessions

The session()->put($key, $value) method is used to store new value into the session data.The put() method stores the provided value in the session at the provided key: session()->put(‘blogs’, 45); $points = session()->get(‘blogs’);

Pushing To Array Session Values

The session()->push($key, $value) is used to insert new values into the array.If any of your session values are arrays, you can use push() to add a value ontothe array: session()->put(‘blogs’, [‘Laravel’, ‘WordPress’, ‘OpenCart’]); session()->push(‘blogs’, ‘Magento’);

How to determive if an item exists in Laravel Session

The session()->has($key) method is used to check whether there’s a value set at the provided key:

if (session()->has(‘points’)) { // do something}

You can also pass an array of keys, and it only returns true if all of the keys exist.

If you face Laravel session not working error in your application, then refer the below articles:

Retrieving All Session Data

How to delete session data in Laravel? laravel session destroy

The session()->forget($key) and session()->flush() methods are used to remove a previously set session value. The flush() method removes every session value, even those set by the framework:session()->put(‘a’, ‘1’); session()->put(‘b’, ‘2’); session()->forget(‘a’); // a is no longer set, b is still set session()->flush(); // after above statements, the session is now empty

Retrieving & Deleting session item at once

The session()->pull($key, $fallbackValue) pull() is the same as get(), except that it deletes the value from the session after pulling it.

Regenerating The Session ID

Due to security reasons, its always recommended that web application must regenerate the session ID frequently. This is achieved using the session()->regenerate() method.

NOTE: This is not a common activity, but if you need to regenerate your session ID, regenerate() isthere for you.

What is Laravel session lifetime?

The default session lifetime is 120 minutes i.e two hours. This is defined in the application’s config/session.php file.

/*|————————————————————————–| Session Lifetime|————————————————————————–|| Here you may specify the number of minutes that you wish the session| to be allowed to remain idle before it expires. If you want them| to immediately expire on the browser closing, set that option.|*/

Endnotes!

Thanks for reading! Now that we have learned the basic concepts of Laravel Session, and how a session works in laravel. Then, we have explored the list of available session methods to retrieve, store and delete items from the session data.

]]>https://www.techcluesblog.com/laravel-session-management-tutorial/feed/0What is Laravel Service Container? How it works?https://www.techcluesblog.com/what-is-laravel-service-container-how-it-works/
https://www.techcluesblog.com/what-is-laravel-service-container-how-it-works/#commentsMon, 01 Jul 2019 07:05:37 +0000https://www.techcluesblog.com/?p=1472What is Laravel Service Container? How it works? Laravel framework comes with a powerful concept of the Laravel Service Container. Laravel has become one of the most popular web development frameworks today. To learn and start with the basic of Laravel framework – read this simple Laravel Tutorial. Being open-source, it has unique modern features like […]

]]>What is Laravel Service Container? How it works?Laravel Service Container

Laravel framework comes with a powerful concept of the Laravel Service Container. Laravel has become one of the most popular web development frameworks today. To learn and start with the basic of Laravel framework – read this simple Laravel Tutorial.

Being open-source, it has unique modern features like Eloquent ORM, Query Builder, Service Container, Homestead, etc. These features are available in the Laravel Framework only. Through this laravel service container tutorial, we will discuss why do we need a service container and how to use it in our laravel projects?

What is Laravel Service Container?

Laravel Service Container is a powerful tool for laravel developers to bind and resolve concrete instances of classes and interfaces. Laravel service container also known as dependency injection container sits at the core of every laravel feature.

In simple terms, Laravel service container is a feature for developers to manage class dependencies and performing dependency injection.

The laravel service container is also known as laravel dependency injection container. This is because the core concept beneath service provider in laravel is dependency injection design pattern.

A Quick Introduction to Dependency Injection

In software application design, dependency injection is a technique whereby one object supplies the dependencies of another object.

A “dependency” is an object that can be used, for example, a service.

Dependency injection means that rather than being instantiated (“newed up”) within a class, each class’s dependencies will be injected in from the outside. This process occurs with the class’s constructor injection, which means an object’s dependencies are injected when it’s created.

When an object or dependency is injected?

The dependency of an object is injected when an object is instantiated. (“constructed”). Dependency Injection minimizes the tight coupling between a class and its dependency. Dependency injection provides a developer with the flexibility of being configurable.

Now, let’s take a simple example to practically understand Laravel service container and how it works.

First, we’re running $this->app->bind(). $this->app is an instance of the container that’s always available on every service provider. The container’s bind() method is what we use to bind to the container.

The first parameter of bind() method is the “key” that we are binding to. Here we have used the FQCN (Fully Qualified Class Name) of the class. The second parameter asks the container what to do to resolve an instance of that given bound key.

How a Laravel service container works?

The service container in laravel is the core concept of the framework, it’s used all over the Laravel.So, it is important for developers to grasp and practice how Laravel service container actually works?

We have seen that whenever an object is injected into the class, it is internally handled and resolved by the laravel service container.

The service container fires an event each time it resolves an object. You can write code to listen this event using the resolving() method.

$this->app->resolving(function ($object, $app) {// This is Called when container resolves object of any type…});

$this->app->resolving(HelpSpot\API::class, function ($api, $app) {// This is Called when container resolves objects of type “HelpSpot\API”…});

What happens when an object is not resolved?

If in any case, the laravel service container failed to resolve the given object or class.Then, the service container throws an exception as an instance of Psr\Container\NotFoundExceptionInterface

Conclusion

Now that we have learned that Laravel Service Container allows laravel developers to define rules for how classes in laravel are auto-loaded during the dependency injection process. Also, note that Laravel Service Container code resides inside the Service Provider class, which must be registered in the configuration file ../config/app.php

Laravel framework provides a very elegant, clean and robust database handling layer known as Laravel Model or Laravel Eloquent Model. The Laravel Model is a crux of any well-designed web application.

What is a Laravel Model?

Models in Laravel acts as a bridge between your laravel application and the underlying database tables.

In the MVC framework, Model is an integral part of the application which provides the database access layer to read/write from the database. The Laravel Eloquent Model primarily controls the data flow between the controller and the actual database – MySQL, etc.

From a programmer’s standpoint, Eloquent Model in Laravel is an object-oriented class which contains the code to interact with the database.

Each Eloquent Model in Laravel corresponds to the specific database table.

For example, the User() model class will represent the “users” table in the database.

Laravel Models are also known as Laravel Eloquent Model. This means that we can easily ‘CREATE, RETRIEVE, UPDATE, or DELETE’ any database record using this Eloquent Model class.

Technically Speaking…

From web developers viewpoint, a Model provides a convenient interface for converting an application object into database table records and vice versa. Also, note that Laravel Model file has the same name as Model class name.

Laravel Model path:

In Laravel 5.5, the models were created inside the “app” folder.

So, in nutshell there’s one class per table, which is responsible for retrieving, representing, and persisting data in that table.

What is Laravel Eloquent ORM?

Laravel Eloquent is an ActiveRecord ORM. It is a database abstraction layer that provides a unified interface to communicate with multiple database types.

The term “ActiveRecord” means that a single Eloquent class is responsible for not only providing the ability to interact with the table as a whole. For example User::all() gets all users from the associated table, but also representing an individual table row (e.g., $user = new User).

Additionally, each instance is capable of managing its own persistence; you can call:

$user->save() or $user->delete().

If you are a beginner to Laravel Framework, then we recommend you to read the following topics:

How to Create a Model in Laravel?

Models are the backbone of any well-designed web application. Creating and defining a new Laravel model is very easy. From laravel 5 onwards, laravel developers can make use of the laravel artisan commands to create and define the laravel model.

Here, Candidate is a model which will be used to retrieve and store information from the candidate’s database table.

NOTE: Like other web frameworks, Laravel also expects the model name to be in the singular form(Candidate), and the underlying table names to be a plural form (Candidates).

So, from the above example, you can observe that a Laravel model is just a PHP class that extends the default Model class.

Note that A model is only useful when it’s associated with an underlying database table.

Understanding Laravel Model Class Attributes

Each Laravel Model class has certain default attributes:

Laravel Model Table name

The default behavior for table name is that Laravel “snake cases” and pluralizes yourclass name, so Candidate model would access a table named candidates. If you’d like to customize the name, set the $table property explicitly on the model:

protected $table = ‘candidate_table’;

Laravel Model Primary key

By default, Laravel assumes that each database table would have an auto-incrementing integer primary key which will be named as id. Optionally, if you want to modify the name of your primary key, then change the $primaryKey property as below:

protected $primaryKey = ‘candidate_id’;

Laravel Model Timestamps

The Model expects that all database tables would have two timestamp fields – created_at and updated_at as columns. To disable the $timestamps functionality: public $timestamps = false;

How does the eloquent Model connect to Database?

By default, all the laravel models use the default database connection as specified in the global database configuration file. To specify a different database connection for a model, make us of the $connection property.

To retrieve the data from the database table, ask the associated Laravel Model. For example to retrieve all data rows from the “candidates” table, use the Candidate()::all() method:

<?php

$candidates = App\Candidate::all();

foreach ($candidates as $candidate)

{ echo $candidate->name; }

?>

Here, the Laravel Eloquent all() method will return all of the results in the model’s table.

Inserting data using Laravel Model

The following steps would insert data using a model in laravel:

Steps to insert new data to the Laravel Model:Step1: First of all create a new instance of associated Laravel ModelStep2: Set values of the table attributes that the Model represents.Step3: Call save() method on the newly created model instance (object).

End Notes!

We have now learned the fundamental concepts behind Laravel Model and the database CRUD operations can be performed using the Models. Laravel developers can use Models to retrieve, create, update or delete any data from the database tables associated with the Model. Each Model represents a specific database table.

]]>https://www.techcluesblog.com/laravel-model-tutorial/feed/0Understanding The Power of JavaScript DOM with Exampleshttps://www.techcluesblog.com/understanding-the-power-of-javascript-dom-with-examples/
https://www.techcluesblog.com/understanding-the-power-of-javascript-dom-with-examples/#respondThu, 23 May 2019 08:13:52 +0000https://www.techcluesblog.com/?p=1409Understanding The Power of JavaScript DOM with Examples In simple words, JavaScript DOM is an internal representation of an HTML web page. As the name specifies, the DOM (Document Object Model) represents an HTML or XML document with a logical tree. The Document Object Model (DOM) is language-independent and a cross-platform application programming interface that represents an […]

]]>Understanding The Power of JavaScript DOM with ExamplesJavaScript DOM Manipulation

In simple words, JavaScript DOM is an internal representation of an HTML web page. As the name specifies, the DOM (Document Object Model) represents an HTML or XML document with a logical tree. The Document Object Model (DOM) is language-independent and a cross-platformapplication programming interface that represents an HTML or XML document as a tree structure. There each node is an object representing a part of the document. JavaScript DOM provides a set of associated properties and methods to access and manipulate individual elements (nodes) of the DOM structure.

Lets first grip the basic concept.

How HTML Page loaded into the browser?

When a user opens a new web page in your web browser, the browser retrieves the web page’s HTML code and parses it. This is like C compiler parses C programs. Then, the browser builds up a model of the document’s structure in standard form and uses this model to draw the page on the screen.

This pictorial representation of the web-page (HTML document) is can be accessed and manipulated at run time using JavaScript DOM methods.

What is DOM (Document Object Model) in JavaScript?

DOM (Document Object Model) is an object that is created by the browser for each new HTML page. Every web page in HTML website is an object of browser which resides under the browser window. This browser object further contains a set of HTML sub-objects.

“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”

The Document Object Model is a W3C (World Wide Web Consortium) standard which defines the logical structure of web pages in a unified representation. DOM provides a standard way in which HTML document is accessed and manipulated using JavaScript DOM methods.

From the developers perspective, DOM is an API (Application Programming Interface) which provides a mechanism to navigate objects in the document.

HTML JavaScript DOM Hierarchy Example

Let’s visualize the JavaScript DOM structure through a very simple example.

JavaScript DOM Tree

What JavaScript can do with DOM?

JavaScript has all the capability to access and manipulate the document object model. With the power of JavaScript DOM, the following actions can be achieved at runtime:

Properties of JavaScript DOM (Document Object Model)

JavaScript DOM has a set of properties associated with an object that can be accessed and modified through JavaScript. The following are common DOM properties:

id – Returns the value of the id of the specified nodeinnerHTML – Returns the HTML code (text, image code, tags, etc.) within the specified node, such as all of the HTML code within a div element

lang – Returns the language value of the specified nodelastChild – Returns the last child node of the specified nodenextSibling – Returns the node following the specified nodenodeName – Returns the name of the specified node (such as div for a div element)nodeType – Returns the type of the specified nodenodeValue – Returns the value of the specified node (such as the text within a div element or the value of an attribute)

attributes An array of all of the attributes in the specified node; the name and value properties of this property can be used to access the attribute name or attribute value for each member of the arraychildNodes An array of all the child nodes of the specified nodeclassName Returns the value of the class attribute of the specified nodeclientHeight Returns the height, in pixels, of the specified nodeclientWidth Returns the width, in pixels, of the specified nodedir Returns the value of the direction of the text in the specified node (ltr or rtl)firstChild Returns the first child node of the specified node

offsetHeight Returns the offset height of the specified nodeoffsetWidth Returns the offset width of the specified nodeownerDocument Returns the document object that contains the specified nodeparentNode Returns the parent node of the specified nodepreviousSibling Returns the node before the specified nodescrollLeft Returns the difference between the left edge and the left edge in view of the specified nodescrollTop Returns the difference between the top edge and the top edge in view of the specified nodescrollHeight Returns the entire height (including anything hidden and viewable via a scroll bar) of the specified nodescrollWidth Returns the entire width (including anything hidden and viewable via a scroll bar) of the specified nodestyle Returns the style object of the specified nodetabIndex Returns the tab index of the specified nodetagName Returns the tag name (in uppercase) of the specified nodetitle Returns the value of the title attribute of the specified node

H2 – List of JavaScript DOM methods

JavaScript DOM Methods are used to access and manipulate DOM elements. Like to get and set values of HTML elements getElementByID() is most popular. The following is the complete list of JavaScript DOM methods:

blur() Removes focus from the specified nodeclick() Executes the click event on the specified nodecloneNode() Creates a clone of the specified nodedetachEvent() Detaches an event from the specified nodedispatchEvent() Executes an event on the specified nodefocus() Gives focus to the specified nodegetAttribute() Returns the value of the attribute name sent to it as a parameter on the specified node

addEventListener() Adds an event listener to the specified node to run a function on the event sent to it as a parameterappendChild() Appends a node as the last child of the specified nodeattachEvent() Attaches an event to the specified node to run a function on the event sent to it as a parameter

getAttributeNS() Returns the value of the attribute name and namespace sent to it as a parameter on the specified nodegetAttributeNode() Returns the attribute node of the attribute name sent to it as a parameter for the specified node

getAttributeNodeNS() Returns the attribute node of the attribute name and namespace sent to it as parameters for the specified node

getElementsByTagName() An array of all the child element nodes with the tag name sent to it as a parameter in the specified nodegetElementsByTagNameNS() An array of all the child element nodes with the tag name and namespace sent to it as parameters in the specified nodehasAttribute() Returns true if the attribute name sent to it as a parameter exists on the specified node, or false if nothasAttributeNS() Returns true if the attribute name and namespace sent to it as parameters exist on the specified node, or false if not.hasAttributes() Returns true if the specified node has any attribute nodes defined, or false if nothasChildNodes() Returns true if the specified node has any child nodes. or false if notinsertBefore() Inserts a node sent to it as a parameter before the node sent to it as a second parameter inside the specified nodenormalize() Normalizes the specified node

removeAttribute() Removes the attribute node for the attribute name sent to it as a parameter from the specified noderemoveAttributeNode() Removes the attribute node for the attribute node object reference sent to it as a parameter from the specified noderemoveAttributeNS() Removes the attribute node for the attribute name sent to it as a parameter with the namespace sent to it as a parameter from the specified noderemoveChild() Removes the child node sent to it as a parameter from the specified noderemoveEventListener() Removes an event listener from the specified nodereplaceChild() Replaces the child node sent to it as the second parameter with the child node sent to it as the first parameter in the specified nodescrollIntoView() Scrolls the specified node into view in the browser windowsetAttribute() Sets an attribute node’s name (first parameter) and value (second parameter) for the specified nodesetAttributeNode() Sets an attribute node as the attribute node object sent to it as a parameter for the specified nodesetAttributeNodeNS() Sets an attribute node as the attribute node object sent to it as a parameter with the namespace sent to it as a parameter for the specified nodesetAttributeNS() Sets an attribute node’s namespace (first parameter), name (second parameter), and value (third parameter) for the specified node

Defining and Using the JavaScript DOM

When an HTML tag is defined in the HTML source code, the browser creates a slot for that object (HTML element) in memory as the page loads. The purpose of an object is to represent some “thing.” in the browser and its Document Object Model.

Final Words

We have learned the basics of JavaScript DOM (Document Object Model) and how an HTML source code is internally represented as a DOM by the web browser. Then, we listed out the most common JavaScript DOM properties and methods to access and manipulate HTML elements (tags).

]]>https://www.techcluesblog.com/understanding-the-power-of-javascript-dom-with-examples/feed/0Debugging JavaScript code using JavaScript Debugger in Chromehttps://www.techcluesblog.com/debugging-javascript-code-using-javascript-debugger-in-chrome/
https://www.techcluesblog.com/debugging-javascript-code-using-javascript-debugger-in-chrome/#respondFri, 17 May 2019 07:45:08 +0000https://www.techcluesblog.com/?p=1379Debugging JavaScript code using JavaScript Debugger in Chrome Introduction to JavaScript Debugging This tutorial will teach you through the fundamental concepts of – Debugging, Google Chrome DevTools, and finally the detailed steps of debugging javascript code using JavaScript Debugger in Chrome. Debugging is the process of analyzing code flow against specific defect or bug in […]

Sometimes fixing a defect in web application becomes a very tedious task for web developers. This is because we are often not aware of the proper debugging tools and techniques. We use console logs that does not help developers to find the exact root cause, and also its time killing the task.

Before we jump into JavaScript Debugger in chrome, Let’s understand basic DevTools.

JavaScript debugger in chrome is a browser-based tool which provides special UI embedded into browsers. This is used to debug javascript applications. It allows web developers to control the execution of javascript code to find and fix bugs.

JavaScript Debugger provides a very simple user interface (UI) for programmers to walk through the code workflow, examine the values of local and global variables and modify the variables instantly at run time to observe the results.

Once a javascript code is loaded into a debugger, developers can execute code line by line to watch – the execution results, set breakpoints, and examine values of local and global variables.

The basic function of the debugger is to stop the execution and calls the debugging function.

What does Chrome Debugger do?

Think of traditional ways of debugging javascript code. At that time, web developers often have to write a series of alert(), window.alert(), and console.log statements to analyze a specific bug in the code. Sometimes you may be using console.log() statements to do the same.

This is very time consuming and inefficient method to debug javascript code. The main issue with this method of debugging is that developers have to write a lot of log statements, going back and forth between browser and editor to see the changes if the issue reproduced or not.

Even, in worst cases, we forget to remove log statements in the final code before delivering to the customer.

No Worries!

JavaScript Debugger in Chrome is now used to make developers life easier than it can be ever since they developing web applications.

Applications of Google Chrome Debugger

Google Chrome browser ships with developer tools (known as Chrome DevTools) that has inbuilt debugger to perform multiple tasks in the client browser.

Following some main applications of JavaScript Debugger tool:1. Editing CSS – You can select an element in the browser, e.g a div, right click on it and select `inspect element`. This opens the dev tools and gives you an option to edit the CSS on the far right.

2. Testing performance – The Chrome Dev Tools has a section called network, in which you can see how long it takes to load your application, especially how long assets take to load. You could also test your application in a bandwidth of your choice (3G, GPRS or EDGE). This is called throttling.

Step2. Open the Chrome Sources Pane

The Sources Panel has three sections:1. File Navigator pane which shows each and every file javascript file loaded in the current web application.2. Code Editor Pane – It shows the contents of the selected JS file.

3. JavaScript Debugging Pane. This section has the main tools to debug javascript code.

Step3: Set Breakpoints in JavaScript Code.

A breakpoint is an important step in debugging which lets you pause the execution of code at a specific point, line number, etc. In simple terms, breakpoints help you analyze the code for bugs.

Step4: Step Into the Code

Stepping into your code helps you to analyze the root cause of the issue/bug. You can examine each and every line of code to find the culprit code.

You can make breakpoints on specific events and line numbers in JS files.

So, its always recommended placing all your JS code into a separate file.

Step5: Examine variable values

While debugging you can also check values of variables to check if expected values (i.e string, integer, etc) are populated into them.

This can be achieved using Scope pane to list values of variables or setting Watch Points.

Step6: Fix and Validate

After you find the root cause of the issues and identified the culprit code line. Modify the code and Re-execute the script.

Let’s take a very simple example of the addition of two numbers. This is the common programming mistake that every programmer have experienced in his coding journey. JavaScript Debugger in Chrome is a very powerful tool for web developers to debug javascript code.

Step1: Replicate the Bug

1. Create a simple HTML + JavaScript program to calculate employee salary. Create an HTML form to input employee HRA and Basic amounts. Then, create a JavaScript function calculate() to add the hra and basic to calculate salary.

Lets input 5000 for HRA and 10000 for Basic, so resultant salary should be 15000. But, the result is 500010000. The result should be 15000.

This is a BUG in JavaScript code as shown below:

Debug JavaScript Code

Step2: Open Chrome DevTools and setup for debugging.

1. Open the DevTools console by pressing Ctrl+Shift+I or F12 in Chrome browser.This opens the Chrome DevTools Console panel. This will open the screen below:

Chrome DevTools JavaScript

2. Click the Sources TabThe Sources pane has three UI sections divided into the following:1. File Navigator – Lists every file in use.2. Code Editor – It displays the contents of the selected file.3. JavaScript Debugging – This is the important section using which we are going to debug our program to find bugs.

Step3. Set Breakpoint in JavaScript code

The first steps towards analyzing the code are to set a breakpoint at the beginning of the code.

A breakpoint is a specific line of code where we want to pause the execution of the program. From the breakpoint, we start analyzing the line by line…

So, a breakpoint in code lets you pause the execution of code anywhere between the code and examine the values of variable, expression.

Breakpoints help developers to find and fix the bugs.

JavaScript Debugger in Chrome is a very simple tool for web developers to debug javascript code.

Coming to our issue in the code.

We can guess that there is something wrong in javascript calculate() function which is not adding two numbers correctly. The calculate() function is called in response to a Click event on Button.

So, the culprit code is calculate() functions, so pause the program execution inside that function.

This is achieved through Event Listener Breakpoints.

Set Breakpoint in JavaScript code

Following are steps to set Breakpoint in JavaScript code:

1. In the JavaScript Debugging pane, click Event Listener Breakpoints to expand the section.DevTools reveals a list of expandable event categories, such as Animation and Clipboard.

2. Next, to the Mouse event category, click Expand Expand icon. DevTools reveals a list of mouse events, such as click and mousedown. Each event has a checkbox next to it.

3. Check the clicked check box. DevTools is now set up to automatically pause when any click event listener executes.Tick the Mouse->Click checkbox…

Set Breakpoint in JavaScript

4. Click on “Calculate Salary” buttonNow notice that Chrome DevTools will pause execution and highlight line of code.

The execution is paused on a different line of code, then press “Resume Script Execution” until you’re paused on the correct line.

4. Step Into the JavaScript Code

Stepping into the code is the process of walking through the code to find the root cause of the issue.

Use the below steps to step into javascript code after you set a breakpoint.1. In the Chrome Sources, click “Step into next function call” to step through the execution of the onClick() function, one line at a time.DevTools highlights the following line of code:

Step5 – Check Variable Values

For a programmer, its very important to examine whether the variables hold an exact type of data.

Method1. Using the Scope Pane. The scope pane defines which local or global variables are being used and what values they hold.

Method2 – Watch Expressions

Now we have identified that values of hra and basic variables are not integers they are treated as a string. Hence, upon adding they are just concatenating together.

Step6 – Fix and Verify the result.

1. To edit the code click on “Resume script execution”2. Edit the following code in Code Editor:

salary = parseInt(hra) + parseInt(basic);

Now the issue is fixed.

Finally, remove breakpoint in JavaScript

How to remove breakpoint in javascript?

After we have analyzed the root cause of the issue, fixed and verified. The next step is to deactivate breakpoint. Click on “Deactivate breakpoints”

Congratulations!

We have learned basics of How to debug javascript code in chrome.

Next Steps

Now you understood the basics of debugging in javascript, Google Chrome DevTools. These tools and debugging steps will save your development time. Then, we learned how to set breakpoints and step into the javascript code.

]]>https://www.techcluesblog.com/debugging-javascript-code-using-javascript-debugger-in-chrome/feed/0Top 10 Best Online JavaScript Editor for Web Developershttps://www.techcluesblog.com/top-10-best-online-javascript-editor-for-web-developers/
https://www.techcluesblog.com/top-10-best-online-javascript-editor-for-web-developers/#respondTue, 14 May 2019 08:09:42 +0000https://www.techcluesblog.com/?p=1362Top 10 Best Online JavaScript Editor for Web Developers Gone are the days when traditional source code editors or heavy IDE’s (Integrated Development Environment) were used by developers to write code, compile and test the results. Setting up a development environment on the local machine (Desktop or Laptop) would require a sufficient amount of developers […]

Gone are the days when traditional source code editors or heavy IDE’s (Integrated Development Environment) were used by developers to write code, compile and test the results. Setting up a development environment on the local machine (Desktop or Laptop) would require a sufficient amount of developers time. The Online JavaScript Editor would resolve all these problems on the fly.

With time, technology has changed and facilitate the life of web developers to instantly write, compile, and validate the results online.

Have you Ever been frustrated with setting up a web development environment?

Top 10 best Online JavaScript editor tools

CodePen is an Online JavaScript Editor used for development environment by front end designers and developers. This provides the best place to build and deploy a website where developers can create code snippets creatively named “pens”, and test them.

It follows a simple philosophy of build test and deploys code. CodePen is also referred to as an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets.

LiveWeave is the most powerful online editor for HTML5, CSS and JavaScript languages. It has capabilities of live preview with coding hints for HTML5, CSS, JavaScript, and JQuery code snippets. It also allows developers to download the .zip file.

Plunker is another online community for creating, sharing and collaborating the web development ideas.

Features of Plunker:

Speed: Plunker editor is designed to load in 2 seconds

Real-time code collaboration

Complete open-source on GitHub under the MIT license

Fully-featured, customizable syntax editor

Live previewing of code changes

Conclusion

Now that we have discussed a great list of online javascript editor collection from different organizations. Web developers can leverage the power of these tools to quickly build web applications. Most of these online editors are used while studying and experimenting with new concepts.

]]>https://www.techcluesblog.com/top-10-best-online-javascript-editor-for-web-developers/feed/0Powerful Features of JavaScript That Every Developer Should Know!!https://www.techcluesblog.com/powerful-features-of-javascript-that-every-developer-should-know/
https://www.techcluesblog.com/powerful-features-of-javascript-that-every-developer-should-know/#respondMon, 13 May 2019 07:52:26 +0000https://www.techcluesblog.com/?p=1345Powerful Features of JavaScript That Every Developer Should Know! This JavaScript Tutorial will acquaint you with the most powerful features of JavaScript that every web developer should know. Most of the web developers may be using JavaScript for client-side validations only. But, JavaScript provides the most powerful features that every developer should know to take […]

This JavaScript Tutorial will acquaint you with the most powerful features of JavaScript that every web developer should know. Most of the web developers may be using JavaScript for client-side validations only.

But, JavaScript provides the most powerful features that every developer should know to take complete benefit of the scripting language.

We will first understand the basics of JavaScript, and finally the powerful features of JavaScript.

Then, we will discuss the core features of the JavaScript language.

What is JavaScript?

JavaScript has still dominated the WWW (World Wide Web) due to its unique features for building client-side interactive web pages. JavaScript is a client-side scripting language used in building web pages using HTML and CSS embedded with JavaScript code.

JavaScript is also simply known as JS.

Today, JavaScript is the only popular programming language used by millions of web developers for client-side scripting. The JavaScript programs are called as scripts which are simply JS code embedded in HTML web pages using the script tags.

JavaScript plays an important role during the development of any web application to make it interactive and dynamic.

Learn Laravel Tutorials:

If you are new to Laravel Framework, then we recommend you read the following topics:

What can be achieved using JavaScript?

Now that We have learned that JavaScript code is embedded into HTML programs and executed at client-side.When we say JavaScript code executed at client-side, it means web browsers are capable enough to understand JavaScript syntax, code and have inbuilt javascript interpreter to execute JS code.

Nowadays, the vast majority of simple to enterprise level websites and web applications make use of javascript code to make them more user-friendly and responding before contacting the web server.

Important Features of JavaScript Programming Language

JavaScript has become the most popular web scripting language because of its powerful features that allow web developers to create stunning user interfaces (UI) for websites and cloud-based web applications. JS follows ECMAScript implementations.

JS is a scripting language used to manipulate, customize and automate some client-side tasks like – user Input/Output operations, input data validation, dynamic HTML generation at runtime and much more. These set of features of JavaScript keep it distinct from other scripting languages.

Here is a list of the most important features of JavaScript:

JavaScript is Simple – JavaScript is very easy to understand and it is an essential part of front-end development.

JavaScript is Scripting Language – A scripting language doesn’t require a program to be compiled before it is executed. JS understands the code on-the-fly by at client side. But, any other programming language, requires the program to be compiled to check for syntax errors. In the case of scripting language, the code is interpreted as it is loaded in the client end. This helps us to test the results of your code more quickly.

Cross Browser Support – JavaScript has been ported on almost all the web browsers available today in the market.

Perform HTML Form validations – JS allows developers to quickly validate the user input data before it is sent to the server. This is a great feature of JavaScript.

Speed – JS provides an immediate response to users.

Object-Oriented – JavaScript is Object-Oriented. Object-based means that JavaScript can use items called objects. However, the objects are not class based but they are just general objects.

I/O Support – JS provides a mechanism to handle input/output operations between user and web application at client-side ONLY. These features of javascript are used in HTML pages.

Dynamic HTML and CSS generation – JavaScript can be used to dynamically change contents and styles in modern browsers dynamically and instantly in response to user interaction

Powerful DOM Model – DOM is a collection of HTML Objects organized in the form of a tree structure. The Document Object Model (DOM) is created when the website is a first time loaded into the web browser.

In simple terms, client-side language runs directly through the client browser being used by the viewer. In the case of JavaScript, the client is a Web browser.

Therefore, JavaScript is run directly in the Web browser and doesn’t require to go through the extra step of sending and retrieving information to and from the remote Web server.

In contrast, A server-side language has to get information from the Web page or the Web browser, send it to a program web server which runs on the host’s server, and then sends back the information to the browser.

So, an intermediate step must first send and fetch information from the web server before theresults of the program are seen in the browser.

How JavaScript run in the browser?

No Surprise!

Have you ever wondered how could JavaScript code execute in the client web browser?

Yeah!

JavaScript code is embedded into HTML code. There is the HTML code you can add some special tags or commands to inform the browser that this code needs to execute as a script (means JS code). The following steps will explain the underlying logic of how JS code executed at the client side:1. First of all, JavaScript code is embedded into HTML code.2. The client web browser has JS Thread running. This JS thread is responsible to handle everything, like scrolling the web page, printing something on the web page, listen to DOM events (like when a user clicks a button) and doing other things.3. Once browser sees special tags (<script> …</script>), it understands and interprets the JS commands and executes the code.4. Finally, JS create, edit, customize or add HTML/CSS code in your web page.

Final Words!

Hope that you have got some points on how powerful is JavaScript with a unique set of features. These features of JavaScript make JavaScript most popular among web developers.

]]>https://www.techcluesblog.com/powerful-features-of-javascript-that-every-developer-should-know/feed/0Ultimate Guide to Google Chrome Update Free Downloadhttps://www.techcluesblog.com/ultimate-guide-to-google-chrome-update-free-download/
https://www.techcluesblog.com/ultimate-guide-to-google-chrome-update-free-download/#respondWed, 08 May 2019 07:12:39 +0000https://www.techcluesblog.com/?p=1339Ultimate Guide to Google Chrome Update Free Download What is Google Chrome? Google Chrome is also known as Chrome which is a free, cross-platform web browser developed by Google. This guide will focus on Google Chrome Update Free Download. Initially, Chrome was released for Microsoft Windows and later it was ported to other non-windows platforms like […]

Google Chrome Update Free Download

In this era of internet security, keeping google chrome up-to-date is mandatory for both security and proper functioning. In fact, it also recommended keeping updating all the chrome extensions, plugins and add-ons. Google Chrome Update Free Download

]]>https://www.techcluesblog.com/ultimate-guide-to-google-chrome-update-free-download/feed/0How to Create a Desktop Shortcut to a website in Chromehttps://www.techcluesblog.com/how-to-create-a-desktop-shortcut-to-a-website-in-chrome/
https://www.techcluesblog.com/how-to-create-a-desktop-shortcut-to-a-website-in-chrome/#commentsTue, 07 May 2019 13:50:33 +0000https://www.techcluesblog.com/?p=1334How to Create a Desktop Shortcut to a website using Google Chrome Shortcuts Today, we are going to learn the very interesting trick of How to Create a Desktop Shortcut to a website. This article teaches you simple and detailed steps on how to create website shortcut on your desktop in Windows 7, 8 or […]

]]>How to Create a Desktop Shortcut to a website using Google Chrome Shortcuts

Google Chrome Shortcuts

Today, we are going to learn the very interesting trick of How to Create a Desktop Shortcut to a website.

This article teaches you simple and detailed steps on how to create website shortcut on your desktop in Windows 7, 8 or 10 using the favorite browsers. After finishing this tutorial, you will be able to easily create a desktop shortcut of any website or web application, or web page.

What is the Desktop Shortcut of Website or Web Application?

Imagine you are frequently navigating to website or some web application using web browsers – Chrome, Firefox, and Internet Explorer. So, each time you have to open the web browser, type the web address and navigate to a favorite web page.

Don’t Worry – We have shortcut solution for you – Desktop Shortcut to Website using Google Chrome Shortcuts.

Creating a Desktop Shortcut of a website or web application will allow you to double-click to open that web page. The shortcut will open the website/portal in the web browser.

Let’s understand different ways to create a desktop shortcut to your favorite website or frequently used web portal, web-page, etc.

Learn Laravel Tutorials:

If you are a beginner to Laravel Framework, then we recommend you to read the following topics:

1. Open your Favorite website/portal or a web page in Google Chrome browser.

2. Click the Chrome Menu button (⋮) at the upper-right corner of the Chrome window.

3. Select “More tools” option

4. Select More Tools -> Create Shortcut option

5. Edit the shortcut name

6. Click on “Create”

Now, look at the desktop it will have a shortcut to your website the given shortcut name.

Method2 – How to create a desktop shortcut of web application using any browser

The following steps will provide the process of creating a desktop shortcut to a website using Firefox, Chrome or Internet Explorer (IE):

1. Open Favorite Website – Navigate to your favorite website or web page2. Resize your Web browser so that you can see the browser and your desktop in the same screen.3. Click on the icon located to the left side of the address bar. This is where you can see the full URL to the website.4. Drag Icon to Desktop – Continue to hold down the mouse button and drag the icon to your desktop. This creates the shortcut.

Method 3 – Create a Shortcut on the Desktop (form Desktop only..)

1. Go to Windows Desktop and Right-click the desktop.

2. Desktop -> New -> Shortcut.

3. Enter the URL and select Next.

4. Type your name for the shortcut and select Finish.

Method4 – Create a Shortcut on the Windows Taskbar

1. Select a shortcut on the desktop.2. Drag the shortcut to the Windows taskbar.

]]>https://www.techcluesblog.com/how-to-create-a-desktop-shortcut-to-a-website-in-chrome/feed/2How PHP Connect to MySQL Tutorial with Examplehttps://www.techcluesblog.com/how-php-connect-to-mysql-tutorial-with-example/
https://www.techcluesblog.com/how-php-connect-to-mysql-tutorial-with-example/#respondSun, 05 May 2019 11:53:55 +0000https://www.techcluesblog.com/?p=1321How PHP Connect to MySQL Database Tutorial with Example PHP is a server-side scripting language that lets web developers insert instructions into your web pages that your web server (Apache, IIS, etc) will execute before it sends back those pages to browsers (clients) that request them. This is how dynamic websites and web applications are created in […]

PHP is a server-side scripting language that lets web developers insert instructions into your web pages that your web server (Apache, IIS, etc) will execute before it sends back those pages to browsers (clients) that request them. This is how dynamic websites and web applications are created in PHP using MySQL database.

Today, PHP has become the first choice of web developers for developing from simple websites to enterprise level cloud-based web portals. So, it becomes necessary to understand how PHP connect to MySQL database server and perform common database operations (INSERT, SELECT QUERY, UPDATE, DELETE, etc) on the selected database.

This tutorial will acquaint you with complete steps of connecting to MySQL database using PHP code with example.

Introduction – PHP connect to MySQL Database

Creating dynamic websites is the need of every web developer. When talking about dynamic websites, the first thing comes to our mind is reading and writing to/from the databases.

PHP extends support for several databases. MySQL is the most popular and widely used Relational Database Management System (RDBMS). PHP based websites make use of MySQL to develop dynamic web applications that have the capacity to scale up from medium to enterprise level software.

Hence, accessing the Database is a very important task of web development in PHP. PHP Connect to MySQL is the backbone of any dynamic website, e-commerce, web portal or any modern application.

MySQL is a robust, simple and optimized DB which can handle the huge volume of data without compromising on quality.

In this tutorial, We will explain and show how does PHP connect to MySQL database.

Let’s quickly understand the basics of MySQL database server.

What is MySQL?

MySQL is a database server. A database server is a program that can store a large volume of information in an organized format that’s easily accessible through programming languages like PHP.

MySQL database is a structured collection of records or data stored in a computer system and organized in such a way that it can be quickly searched and information can be rapidly retrieved.

MySQL is a very simple plain English based interface for database developers. MySQL database consists of tables which further consists of records or rows. The columns are called fields that make rows.

Learn Laravel Tutorials:

If you are a beginner to Laravel Framework, then we recommend you to read the following topics:

Important Database Terms To Remember

While designing and developing dynamic PHP web applications using MySQL, remember the following fundamental terms:

Database – The overall container for a collection of MySQL dataTable – A sub-container within a database that stores the actual dataRow – A single record within a table, which may contain several fieldsColumn – The name of a field within a row

As of now, MySQL is the most popular among web developers while developing web applications.

Different ways of Connecting to MySQL Database using PHP

To retrieve, query or insert the data from the MySQL database, PHP provides the following two ways to make database connections to MySQL:Method1 – PHP Connect to MySQL Database using MySQLi (Here ‘i’ stands for improved version).Method2 – PHP Connect to MySQL Database using PDO

PHP MySQLi = PHP MySQL Improved! Using this method, you will learn how to fetch data from database in php using mysqli.

This is the most popular method of connecting to Mysql using PHP. The PHP MySQLi functions provide you access to MySQL database server.

The process of using MySQL with PHP is as follows:1. Connect to MySQL and select the database to use.2. Build a query string.3. Perform the query.4. Retrieve the results and output them to a web page.5. Repeat steps 2 to 4 until all desired data has been retrieved.6. Disconnect from MySQL.

PHP connect to MySQL Example using MySQLi

Most of the websites developed with PHP contain multiple program files that will require access to MySQL and will thus need the login and password details. Therefore, it’s sensible to create a single PHP file to store these database configurations and then include that file wherever it’s needed.

This example creates a new object called $conn by calling a new instance of the mysqli method which is called as PHP mysqli connect, passing all the values retrieved from the login.php file. Error checking is achieved by referencing the $connection ->connect_error property. php MySQL example. The $connection object is used in the following examples to access the MySQL database.

3. Building and executing a MySQL query in PHPSending a query to MySQL from PHP is as simple as issuing it using the query method of a connection object.

4. Fetching MySQL Query ResultsAfter you have an object returned in $result, you can use it to extract the data you want, one item at a time, using the fetch_assoc method of the object. Following is PHP code to retrieve data from a MySQL database and display in HTML forms.

PHP Close MySQL ConnectionPHP will eventually return the memory it has allocated for objects after you have finished with the script, so in small scripts, you don’t usually need to worry about releasing memory yourself. However, if you’re allocating a lot of result objects or fetching large amounts of data, it can be a good idea to free the memory you have been usingto prevent problems later in your script.

$result->close();$conn->close();

PHP 5 MySQLi Functions

mysqli_affected_rows() Returns the number of affected rows in the previous MySQL operationmysqli_autocommit() Turns on or off auto-committing database modificationsmysqli_change_user() Changes the user of the specified database connectionmysqli_character_set_name() Returns the default character set for the database connectionmysqli_close() Closes a previously opened database connectionmysqli_commit() Commits the current transaction

PHP MySQli Error Functions

mysqli_errno() Returns the last error code for the most recent function callmysqli_error_list() Returns a list of errors for the most recent function callmysqli_error() Returns the last error description for the most recent function call

PHP MySQli Fetch Functions

mysqli_fetch_all() Fetches all result rows as an associative array, a numeric array, or bothmysqli_fetch_array() Fetches a result row as an associative, a numeric array, or both

mysqli_fetch_assoc() Fetches a result row as an associative arraymysqli_fetch_field_direct() Returns meta-data for a single field in the result set, as an objectmysqli_fetch_field() Returns the next field in the result set, as an objectmysqli_fetch_fields() Returns an array of objects that represent the fields in a result setmysqli_fetch_lengths() Returns the lengths of the columns of the current row in the result setmysqli_fetch_object() Returns the current row of a result set, as an objectmysqli_fetch_row() Fetches one row from a result-set and returns it as an enumerated array

PHP MySQli Connect Functions

mysqli_connect_errno() Returns the error code from the last connection errormysqli_connect_error() Returns the error description from the last connection errormysqli_connect() Opens a new connection to the MySQL server

mysqli_data_seek() Adjusts the result pointer to an arbitrary row in the result-setmysqli_debug() Performs debugging operationsmysqli_dump_debug_info() Dumps debugging info into the log

PHP MySQli Field Functions

mysqli_field_count() Returns the number of columns for the most recent querymysqli_field_seek() Sets the field cursor to the given field offsetmysqli_field_tell() Returns the position of the field cursormysqli_free_result() Frees the memory associated with a result

PHP MySQli Get Functions

mysqli_get_charset() Returns a character set objectmysqli_get_client_info() Returns the MySQL client library versionmysqli_get_client_stats() Returns statistics about client per-processmysqli_get_client_version() Returns the MySQL client library version as an integermysqli_get_connection_stats() Returns statistics about the client connectionmysqli_get_host_info() Returns the MySQL server hostname and the connection typemysqli_get_proto_info() Returns the MySQL protocol versionmysqli_get_server_info() Returns the MySQL server versionmysqli_get_server_version() Returns the MySQL server version as an integer

PHP MySQli Miscellaneous Functionsmysqli_info() Returns information about the most recently executed querymysqli_init() Initializes MySQLi and returns a resource for use with mysqli_real_connect()mysqli_insert_id() Returns the auto-generated id used in the last querymysqli_kill() Asks the server to kill a MySQL threadmysqli_more_results() Checks if there are more results from a multi querymysqli_multi_query() Performs one or more queries on the databasemysqli_next_result() Prepares the next result set from mysqli_multi_query()mysqli_num_fields() Returns the number of fields in a result setmysqli_num_rows() Returns the number of rows in a result setmysqli_options() Sets extra connect options and affect behavior for a connectionmysqli_ping() Pings a server connection, or tries to reconnect if the connection has gone downmysqli_prepare() Prepares an SQL statement for executionmysqli_query() Performs a query against the databasemysqli_real_connect() Opens a new connection to the MySQL servermysqli_real_escape_string() Escapes special characters in a string for use in an SQL statementmysqli_real_query() Executes an SQL querymysqli_reap_async_query() Returns the result from async querymysqli_refresh() Refreshes tables or caches, or resets the replication server informationmysqli_rollback() Rolls back the current transaction for the databasemysqli_select_db() Changes the default database for the connection

PHP MySQli Set Functions

mysqli_set_charset() Sets the default client character setmysqli_set_local_infile_default() Unsets user defined handler for load local infile commandmysqli_set_local_infile_handler() Set callback function for LOAD DATA LOCAL INFILE commandmysqli_sqlstate() Returns the SQLSTATE error code for the last MySQL operationmysqli_ssl_set() Used to establish secure connections using SSLmysqli_stat() Returns the current system statusmysqli_stmt_init() Initializes a statement and returns an object for use with mysqli_stmt_prepare()mysqli_store_result() Transfers a result set from the last querymysqli_thread_id() Returns the thread ID for the current connectionmysqli_thread_safe() Returns whether the client library is compiled as thread-safemysqli_use_result() Initiates the retrieval of a result set from the last query executed using the mysqli_real_query()mysqli_warning_count() Returns the number of warnings from the last query in the connection

PDO Method – PHP connect to MySQL using Using PDO

PDO is a PHP extension for connecting mysql databases. Its another method to make connections with db, inseret data, retrieve data, etc. PDO stands for PHP Data Objects. PHP PDO is very clean and consistent way to access databases.

In simple terms, PDO is a set of unified API’s which allows developers to connect to different databases with the same database access layer.

Enable PDO extension in php.iniTo be able to use PDO connections, you need to enable “php_pdo.dll and php_pdo_mysql.dll exist in the php/ext directory, un-comment or add the appropriate lines in php.ini, and restart the web server.”

Conclusion:

Now that we have learned how PHP Connect to MySQL database server. And, how web developers can make connections, read/write from the MySQL database to create a dynamic web application in PHP.

]]>https://www.techcluesblog.com/how-php-connect-to-mysql-tutorial-with-example/feed/0How to install OpenCart on LAMP/WAMP Server?https://www.techcluesblog.com/how-to-install-opencart-on-lmap-wamp-server/
https://www.techcluesblog.com/how-to-install-opencart-on-lmap-wamp-server/#respondThu, 25 Apr 2019 09:19:15 +0000https://www.techcluesblog.com/?p=1297How to install OpenCart on LAMP/WAMP Server? In the previous article What is OpenCart, We have learned fundamentals of OpenCart, OPenCart important features, and major advantages of using OpenCart framework. This How to Install OpenCart guide will teach you detailed steps to properly install OpenCart on a fresh system. The best approach to learn any […]

In the previous article What is OpenCart, We have learned fundamentals of OpenCart, OPenCart important features, and major advantages of using OpenCart framework. This How to Install OpenCart guide will teach you detailed steps to properly install OpenCart on a fresh system.

The best approach to learn any new framework is to first install it on localhost and start exploring and experimenting. Similarly, to master OpenCart Framework and start building e-commerce websites, first, download & install OpenCart framework. Here, you will learn detailed steps to download & install OpenCart on localhost as well on any hosted platform – Ubuntu, AWS, Windows. Below mentioned steps can be followed to install opencart on ubuntu platform, install opencart on amazon ec2, install opencart on xampp, install opencart on hostinger, install opencart on digital ocean, or localhost.

OpenCart Installation Requirements

OpenCart requires certain software requirements to install and operate the eCommerce store properly. First of all, a Web Server must be installed to start OpenCart installation. Domain names and hosting services can easily be purchased for an affordable price.

The following software must be installed:

Web Server (Apache suggested)

PHP 5.4+

Database (MySQLi suggested)

Required PHP libraries/modules

Curl

ZIP

Zlib

GD Library

Mcrypt

Mbstrings

XML

Learn Laravel Tutorials:

If you are a beginner to Laravel Framework, then we recommend you to read the following topics:

Steps to Install OpenCart on local/remote LAMP/WAMP server

Follow the below steps to properly install and configure OpenCart:

Step1: Download OpenCart from www.opencart.com

Go to the official website of opencart (www.opencart.com) and download the latest version.You can use this direct link to opencart download page – OpenCart Download Page https://www.opencart.com/index.php?route=cms/download

It is always recommended to install the latest version of opencart for sake of performance and security.Clicking on the “Download Now” button may ask you to first Signup/Sign-In

Download OpenCart

The output of this step would be .zip archive on your localhost machine.

Step2 – Extract the Downloaded OpenCart Installation Archie

Now, after successful downloaded of OPenCart installation archive, please unzip it on your local computer and navigate to the ‘Upload’ directory.

Install OpenCart

Step3 – Rename OpenCart Configuration Files

Before starting the installation, You need to first rename 2 files in order to perform successful opencart installation:1. Rename ../upload/config-dist.php to ../upload/config.php2. Rename ../upload/admin/config-dist.php to ../upload/admin/config.php

These files contain the database settings and root folders from the opencart is running.

Step4 – Create an OpenCart Database.

To create new database open phpMyAdmin on localhost – http://127.0.0.1/phpmyadmin/

create a new database named – “opencart”

How to Install OpenCart?

Step5 – Upload OpenCart Installation folder to LAMP/WAMP root folder

If you are installing opencart on localhost machine, then copy the entire “upload” folder tothe root folder of LMAP/WAMP installation directory, In our case we have copied it to:

If you want your store to be accessible directly through a root domain name (ex: http://example.com) then you should upload the OpenCart files under the root directory.

Note: To upload opencart archive on a remote hosting machine, use FTP/SFTP program like WinSCP/FileZilla, etc.You can use your cPanel provided hosting provider.

Step6 – Run OpenCart Automatic Installer

Before starting the installation, make sure that the upload folder is writable permission.

Now, all the preparation steps are completed, you can start the installation.Open the browser and goto opencart upload folder – localhost/upload URL – http://localhost/upload/

How to Install OpenCart?

Click “Continue”

Step7 – Fill Database Settings

In this step, you have to input important configuration settings in order to proceed with the installation further.Enter your Host, Database Username, Password, and database name.These settings should be provided to you during the database creation process or by your hosting provider.

Next, you need to input the database username and password, as well as the administrative email address for your main OpenCart admin user.

How to Install OpenCart?

Click “Continue”

Step8 – Wow! – Run eCommerce Store

Congratulations!

How to Install OpenCart?

Now, you have successfully completed your OpenCart installation.you can access your store frontend or the OpenCart admin panel via the links provided on the final page of the installation process.

Step9. Remove Installation Directory:

Please remember to remove the OpenCart Installation Directory from the OpenCart folder.

Thank you so much for reading. If you have any questions, please write in the comments section we will be happy to help you.

]]>https://www.techcluesblog.com/how-to-install-opencart-on-lmap-wamp-server/feed/0What is OpenCart? Features of OpenCart!https://www.techcluesblog.com/what-is-opencart-features-of-opencart/
https://www.techcluesblog.com/what-is-opencart-features-of-opencart/#respondWed, 24 Apr 2019 02:20:37 +0000https://www.techcluesblog.com/?p=1289What is OpenCart? OpenCart Features and Advantages! What is OpenCart? OpenCart is a PHP based online store management system. OpenCart is absolutely free and open-source eCommerce development platform for web developers and merchants. OpenCart has become the most popular and first choice of e-commerce developers, users, and merchants. What is OpenCart – is a very basic question […]

]]>What is OpenCart? OpenCart Features and Advantages!What is OpenCart

What is OpenCart?

OpenCart is a PHP based online store management system. OpenCart is absolutely free and open-source eCommerce development platform for web developers and merchants. OpenCart has become the most popular and first choice of e-commerce developers, users, and merchants. What is OpenCart – is a very basic question comes to our mind when talking about a new framework. Now, you got a basic idea of What is an OpenCart in PHP?

So, if you are looking for a free, open-source webshop, then OpenCart is a great gift for you.

How to check the current opencart version?

Is OpenCart MVC framework?

Yes. OpenCart Framework is a PHP based MVC framework. If you are familiar with any MVC framework, then Learning OPenCart would be a very easy task for you and your team. It consists of the Views, Controllers, and Models in the OpenCart source code. Opencart website is your complete OpenCart ecommerce platform.

Is OpenCart free and open-source?

Yes, OpenCart Framework is a free and open source web-based complete E-commerce website development platform written in the PHP programming language. OpenCart is released under the GNU General public license.

The current stable version of OpenCart is 3.0.3.1 released on January 7, 2019.

History of OpenCart? What is OpenCart?

OpenCart Framework was originally developed by Christopher G. Mann in 1998 for Walnut Creek CDROM and later The FreeBSD Mall. The entire development of the OpenCart platform was in the Perl programming language. And the first official version of OpenCart was released in 11th May 1999. The primary objective behind Opencart development was to provide a very simple eCommerce development platform.

Since its early development in 1998, OpenCart continues to serve thousands of online stores because it is easy to develop, use and configure. Also, there are lots of forums and online articles that address customers main points when using the software.

OpenCart Markets

According to the survey, in February 2017 OpenCart had about 317,000 live OpenCart sites, which was more than Shopify or Magento. What is OpenCart

Read Laravel Tutorials:

If you are a beginner to Laravel Framework, then we recommend you to read the following topics:

Important Features of OpenCart

OpenCart framework provides a very user-friendly and effective interface for e-commerce development with a wide range of extensions and themes.

Opencart is a feature-rich platform for online store development and management. It comes with a great set of in-built features – themes, extensions, modules, payment gateways and much more. The following are some high-level features of opencart: What is OpenCart?

OpenCart Features List:

OpenCart is free and open-source

User-Friendly store frontend and Admin backend UI

Multi-Language support

Multi-Store support

Multi-currency support.

Catalog Management

Order Management

Unlimited Categories and sub-categories

Product Reviews and comments

Automatic Image Zoom-In Effect

Product ratings

Related products feature

Discount coupon system

SEO support

Sales reports

Module system

OpenCart customizations

Sales tax management

Sales trend analysis

Advantages of OpenCart? What is OpenCart?

Opencart is used to set up online stores for small to medium-sized organizations.

If you are planning to launch your online store, then OpenCart is the best option to have a quick setup and start selling your products. It provides developers, users, and merchants with the following list of benefits of using Opencart as compared to other e-commerce development platform:

Simple & Quick Setup – After downloading and installing opencart, it’s very easy to setup opencart for an e-commerce store.

Very simple Backend Admin dashboard – that can be used by non-tech-savvy persons and merchants.

Opencart Themes & Extensions – Robust themes and extensions support.

Oc runs on AJAX technology hence provides good site speed.

Multi-store support – OC provides support for multi-store which allows users to manage and monitor multiple stores from single Admin Panel.

MultiLanguage and Multi-currency support

Responsive & SEO friendly.

Also, read the following interview guides: [Interview Questions on JavaScript]

Is OPenCart a CMS?

Right!!

OpenCart is an e-commerce development CMS that provides users the full control over the content, template management. It provides the whole products content (description, SEO) through the simple and one-stop admin dashboard. What is OpenCart?

What are OpenCart alternatives?

Following are the top 10 alternatives to OpenCart e-commerce framework:

Magento

PrestaShop

WooCommerce

Shopify

osCommerce

ZenCart

BigCommerce

Ecwid

Big Cartel

Duck Shell

So, we have learned What is OpenCart framework, its features, and advantages.

]]>https://www.techcluesblog.com/what-is-opencart-features-of-opencart/feed/0Must Read Interview Questions on JavaScripthttps://www.techcluesblog.com/must-read-interview-questions-on-javascript/
https://www.techcluesblog.com/must-read-interview-questions-on-javascript/#respondWed, 17 Apr 2019 18:10:13 +0000https://www.techcluesblog.com/?p=1284Must Read Interview questions on JavaScript Q1. What is JavaScript or JS? Answer JavaScript is a client-side programming language of the Web. The majority of modern websites and web applications make use of JavaScript in the HTML code. It is supported by all web browsers – Chrome, Mozilla, Netespace, etc. JavaScript helps developers to create […]

Q1. What is JavaScript or JS?

Answer

JavaScript is a client-side programming language of the Web. The majority of modern websites and web applications make use of JavaScript in the HTML code. It is supported by all web browsers – Chrome, Mozilla, Netespace, etc.

JavaScript helps developers to create HTML pages more dynamic and interactive. JavaScript is a high-level, dynamic, untyped interpreted programming language that is well-suited to object-oriented and functional programming styles. Interview Questions on JavaScript

Q5. Differentiate between Core Java vs JavaScript?

Answer:

JavaScript is completely different from the Java programming language. JavaScript has grown as a general purpose web scripting language. JavaScript was created at Netscape in the early days of the Web, and technically, “Java-Script” is a trademark licensed from Sun Microsystems (now Oracle) used to describe.

Netscape submitted the language for standardization to ECMA—the European Computer Manufacturer’s Associationand because of trademark issues, the standardized version of the language was stuck with the awkward name “ECMAScript.”

JavaScript provides a minimal set of Library APIS to achieve basic tasks text, arrays, dates, etc. The JavaScript programming language, developed by Netscape, Inc., is not part of the Java platform. JavaScript cannot be used to create standalone applications, it can be embedded into HTML code only.

JavaScript code runs in a client web browser and Java code execute in JVM. Java code needs to be first compiled while JS is just plain text.

Q6. List the common data types in JavaScript?

Answer:

Computer programs work by manipulating values, such as the number 3.14 or the text “Hi JavaScript”. These kinds of values that can be represented and manipulated in a programming language are known as types, and one of the most fundamental characteristics of a programming language is the set of types it supports. Interview Questions on JavaScript

JavaScript types can be divided into two categories: primitive types and object types. JavaScript’s primitive types include numbers, strings of text (known as strings), and Boolean truth values (known as booleans). A significant portion of this chapter is dedicated to a detailed explanation of the numeric (§3.1) and string (§3.2) types in JavaScript.

Object – Any JavaScript value that is not a number, a string, a boolean, or null or undefined is an object.

Q7. How to declare and access a variable in JavaScript?

Answer:

Before using a variable in a JavaScript program, you should first declare it. Variables are declared with the var keyword, like this:var age; var protocol;

You can also declare multiple variables with the same var keyword:var i, sum;

If you don’t specify an initial value for a variable with the var statement, the variable is declared, but its value is undefined until your code stores a value into it.

Q8. How do you define a function in JavaScript?

Answer:

A function is a block of JavaScript code that is defined once but may be executed, or invoked, any number of times. You may already be familiar with the concept of a function under a name such as a subroutine or procedure.

Q10. Differentiate between DOM vs BOM?

Answer:

DOM:

DOM stands for Document Object Model. Every web browser window, tab, and the frame is represented by a Window object. Every Window object has a document property that refers to a Document object. The Document object represents the content of the window, and it is the subject of this chapter. The Document object does not stand alone, however.

It is the central object in a larger API, known as the Document Object Model, orDOM, for representing and manipulating document content.