Skip to main content

JavaScript Tutorial

Creating Universal Bootstrap Modal using jQuery and Ajax Tutorial

In this tutorial, we will tackle about How to Create a Universlal Bootstrap Modal using jQuery and Ajax. The modal that we are going to create is a modal that can be reusable or can display different content from another file. This technique is very helpful to optimize your file size and this will prevent the redundancy of writting the modal elements. The universal Bootstrap Modal that we will create, will have a dynamic title, content, and size.

Inline Table Row Insert, Update, and Delete using PHP and jQuery Tutorial

In this tutorial, you wil learn how to create an Inline Table Row Insert, Update, and Delete using PHP/OOP, MySQL Database,and JavaScript (jQuery adn Ajax). Our main goal for this tutorial is to display data from database to HTML table that can add, editm remove table row dynamically. The table cells in the table will be editable if the user add or edit a row. The source code must have a field validator for required fields and field text types.

Dynamically Generate Table Data Using jQuery Tutorial

In this code we will tackle about Dynamically Generate Table using jQuery. The program will let you create your own table dynamically. The code uses a jQuery plugin that shortens your native scripting by allowing you to call a single line of code. To learn more about this, just follow the steps below.

Getting started:

First, you have to download the bootstrap framework, this is the link for the bootstrap that I used for the layout design https://getbootstrap.com/.

Creating Simple Drag and Drop using jQuery UI Tutorial

In this tutorial, I've created a simple drag and drop using jQuery and jQuery UI Libraries. In this tutorial, the user will select his/her choice and with the use of jquery, we are going to determine the user's choice. I hope this tutorial will give you knowledge on the topic.

Before we start, please download the following libraries first:

Creating a Simple Upload File with AngularJS Progress Bar and PHP/MySQLi

This tutorial tackles how to create a progress bar in Angular JS. Angular JS is a javascript framework maintained by Google and is capable of creating Single-Page Applications. In the case of this tutorial, we show our progress bar on file upload to track its progress. Increase your upload size by editing your php.ini for uploads.

Creating a Live Filter with Multiple Options using Checkbox with jQuery

In this tutorial, we are going to create a Live Filter with Multiple Options using Checkbox with jQuery. Many projects or systems need this kind of function for fast filtering the data from the database. Filter functions are very common to us, in other cases when you use the filter function it also loads the whole page. In our case, we are going to create a live filter with multiple options using the checkbox without load the whole web page. You can also check the live demo of this simple tutorial, so you can get an idea and you can try this out.

Creating a Simple Shopping Cart Application Using AngularJs

In this tutorial, we will create a simple Shopping Cart Using AngularJs. This simple application purpose is to add the product that the buyer wants to buy, and will be listed to the cart waiting to be paid. We will try to use angularJS to implement this simple task in a different way. The directives within the AngularJs made this application a little bit simpler but full of functions that can be declared like jquery libraries.

Angular JS Login with Session using PHP/MySQLi Tutorial

This tutorial tackles how to create a login page using Angular JS and set SESSION with PHP/MySQLi. Angular JS is a javascript framework maintained by Google and is capable of creating Single-Page Applications. In this tutorial, we'll set up PHP Session to prevent users from going into our homepage if not authenticated.