React CRUD Example with CodeIgniter 4 and MySQL 8

In this tutorial I am going to show you how to build CRUD application using CodeIgniter 4, MySQL and React JS framework. CRUD is an acronym that stands for Create, Read, Update and Delete operations in a particular application. So you are basically creating a record, reading single or all records, updating the existing record and deleting the existing record. In this React CRUD example with Codeigniter 4 and MySQL, I am using React JS as a front-end technology used for building the UI (User Interface), PHP based CodeIgniter 4…

Continue

Online Visitor Tracking System using CodeIgniter 4, MySQL 8 and AJAX

In this tutorial I am going to show you how you can build an online visitor tracking system using PHP based framework CodeIgniter 4, MySQL 8 and AJAX technique. The similar system for tracking online visitors on web site, I built in past, using CodeIgniter 3 framework. As a web site owner you would like to the progress to the count of your visitors, page views, etc. because, it gives you overall idea on the website’s analytical measurements. It will also give you how you can make improvements to your…

Continue

Django 3, MySQL REST API Angular 10 CRUD Example

Here in this tutorial I am going to explain how to integrate Django REST API with Angular framework. CRUD stands for Create, Read, Update and Delete operations which will be performed from UI (User Interface) using Angular framework and on server side Django framework and MySQL server are used. The Angular framework will be used in this example for representing the UI (User Interface) where end users will perform CRUD operations.

Continue

CodeIgniter 4 REST API, MySQL and Angular 10 CRUD Example

I am going to show you an example on Angular CodeIgniter 4 REST API MySQL CRUD. CRUD is an acronym and stands for Create, Read, Update and Delete operations. REST or RESTful is a Representational State Transfer which defines an architectural style in software engineering. The REST API works on HTTP or HTTPS protocol. The Angular framework will be used in this example for representing the UI (User Interface) where end users will perform CRUD operations.

Continue

How to use AJAX in React HTTP GET Request without using Third Party Library

Here I am going to show you how to use AJAX in React HTTP GET request without using Third Party library. To do this I am going to use XMLHttpRequest for fetching data instead of Fetch API (fetch()). AJAX is an acronym that stands for Asynchronous JavaScript and XML. The Fetch API provides an interface to fetch resources from the server. This Fetch API is similar to the XMLHttpRequest but the new Fetch API provides more powerful and flexible feature set.

Continue

How to avoid jQuery namespace collisions using noConflict() function

Here I am going to tell you how you can avoid namespace collision on the DOM (Document Object Model) page. You can load jQuery either via CDN (Content Delivery Network) link or by downloading the jQuery from the website and put it into your application and include in your web page. So whatever method you follow to use the jQuery library (CDN or local), this introduces the $, as a global variable, an alias for the jQuery function and namespace.

Continue

What are jQuery selectors and how to cache jQuery selectors to improve performance of your web page

Every time you use a selector the elements in Document Object Model (DOM) are searched to match your query or selector. Doing this kind of works too often or repeatedly will decrease the performance of your web page. If you refer to a specific selector too often or repeatedly you should consider to add it to a cache by assigning to a variable. Before diving into the actual example I am going to first tell you, what are elements and what are selectors?

Continue

How to load local JSON File in Angular Application

JSON, i.e., JavaScript Object Notation is a lightweight format for interchanging data. It is based on a subset of JavaScript language. For example, this JSON data format is used in the webservice response. In old days webservices used XML for the primary data format but nowadays JSON, being lightweight, is becoming the preferred data format for exchanging data for most of the webservices. JSON is built on two structures: A collection of name/value pairs. In various languages, the JSON structure is realized as an object, record, struct, dictionary, hash table,…

Continue

Docker Compose – Dockerizing Nodejs MySQL REST API CRUD Example

Introduction In this tutorial I am going to explain you how to use docker compose to dockerize your Nodejs MySQL REST API for CRUD operations. I am not going to tell you here how to build the REST CRUD application but you can always go back and check the detail tutorial on this here. I am only going to show you how to dockerize your app using docker compose in Linux environment. It is a best practice for a container to have only one process with single responsibility. But as…

Continue

NodeJS Express MySQL REST API CRUD Example

Here I am going to show you how to create REST API CRUD example using Nodejs Express and MySQL server. CRUD means Create, Read, Update and Delete operations which are performed through REST (Representational State Transfer) resources that works on http/https protocol. REST resources or APIs work on verbs, such as, GET, POST, PUT, DELETE, etc. So it is obvious that GET means you need to fetch data from the server endpoint, POST means you need to create the new resource on server endpoint, PUT means you need to update…

Continue