Skip to main content

Tutorials

Creating A Simple Image Gallery with Viewer Modal using jQuery and Bootstrap Tutorial

In this tutorial, we will be creating a simple a Image Gallery web application with an image viewer modal.The Image Viewer will also have control button for navigating to the pervious or next image. We will be using Bootstrap for the design of the application and jQuery to dispaly image on the viewer modal and for navigation control functionalities.

Creating a Dynamic Confirmation Dialog using jQuery and Bootstrap Modal Tutorial

In this tutorial, I will teach/share with you some techniques that I am using when developing a web application. This tutorial will tackle about Creating a Dynamic Confirmation Dialog using jQuery and Bootstrap Modal. This kind of web application feature can help you to reduce the number of lines you are writing and also to prevent redundancy in creating a function in your source code.

Populating Table From JSON File using jQuery and Ajax Tutorial

In this tutorial, we will tackle about how to Populate HTML Table from JSON File using jQuery and Ajax. This tutorial will teach to populate tables from JSON data using asynchronous HTTP (Ajax) requests. This technique can optimize your application page load by loading the data only when the page or document is ready. You can also refresh or reload the table row items without leaving the page.

Printing a Specific HTML Element using jQuery Tutorial

In this tutorial, we will tackle about how to create a javascript function that Prints a Specific HTML Element using jQuery. This can help you to lessen your work as a programmer in writing and the lines of your codes. This technique can also prevent code duplication.

The Print function that we will be creating is the cloned data from the HTML. Our goal for this tutorial is to duplicate the HTML Element using jQuery along the elements that contains the codes for styling the element to preserve the design of the element.

Handling Dynamic Data Fields using Database Vertical Table Design in PHP Tutorial

In this tutorial, we will tackle Handing Dynamic Data Fileds using Database Vertical Table Design. This idea is very useful for such web applications that handling multiple data. This will prevent multiple columns in your database table. Also, this will help you to store new data fields without making changes in your database table structure.

How to Limit Data to Display and Load when scrolled to bottom in PHP and jQuery Tutorial

In this tutorial, we will tackle about how limit the data to display from database and load automatically when scrolled to bottom using PHP and jQuery. This technique is very useful especially to optimize the speed of loading bulk data. This feature is commonly used in social network sites like the Facebook news feed, it shows limited posts at first and when you reached the bottom of the page, it will automatically load another data. To meet our goal for this tutorial, we will be using MySQL LIMIT and OFFSET Clause.

Creating An Audit Trail/Logs in a Web App using PHP/OOP and Ajax Tutorial oretnom23 Thu, 10/07/2021 - 14:28

In this tutorial, we will tackle about how to create an Audit Trail/Audit Log feature in a web application using PHP/OOP and jQuery Ajax. This feature is useful and a common feature for software or web applications. This is usually included in the project for an application that can be managed by multiple users. With this feature in your PHP Project, you can easily track or monitor the changes or actions made by the user.

Creating an Image Slideshow Using PHP and Simple jQuery Tutorial

Hi everyone! This tutorial is about on how to create an images slideshow using PHP and Simple jQuery. This program requires only a few lines of code. The source code file contains only a simple CSS, Images Container/HTML, jQuery Scripts, and PHP script for listing all the images from a directory. The script is easy to understand.

Now, we will be creating a simple web application and our main goal is to display the slideshow in an HTML container and each slide will be shown at every specific time using the fade-in animation. To this, follow the steps below.