Forem: Mr.Crystal

Tags Input with Autocomplete using jQuery and PHP

Mr.Crystal — Thu, 20 Apr 2023 17:34:13 +0000

Tags are used to organize posts or articles on the website. Tags provide an effective way to group related posts and make it easier for the user to find relevant posts quickly. It also helps readers to get a brief idea about the post without reading the entire content. Tags are more like categories, but they can describe posts in more detail than categories. Generally, one category is assigned to a post, on other hand you can use multiple tags for a single post.

The tags input field should be allowed to input multiple values separated by a specific separator. Mostly, the comma (,) is used as a separator for the multiple value’s input field. In this tutorial, we will show you how to create multiple tags input field using jQuery. You can build a user interface to manage tags with autocomplete feature using jQuery and PHP.

The example code will integrate a text field to input multiple tags. Also, an autocomplete feature will be provided to display tag suggestions from the database under the input field while the user starts typing.

Tags Input with jQuery
In this code sample, we will use the TagsInput jQuery plugin to convert a simple text input field to the tag list input area and allow the user to input multiple tag values.

The tag can be added by entering a comma (,).
The tag can be removed by a cross icon (x).
Define an HTML input field.

<input type="text" id="tags_input">
Include the jQuery and TagsInput library files.

`

`
Initialize the tagsInput plugin and specify the selector (#tags_input) to attach it to the input field.

<script> $('#tags_input').tagsInput(); </script>
Tags Input with Autocomplete using PHP and MySQL
In the following example code snippet, we will show you how to add autocomplete feature to the tags input field using jQuery and PHP.

Create Database Table:
To store the autosuggestion tags data a table is required in the database. The following SQL creates a tags table with some basic fields in the MySQL database.

CREATE TABLEtags(idint(11) NOT NULL AUTO_INCREMENT,namevarchar(100) COLLATE utf8_unicode_ci NOT NULL,statustinyint(1) NOT NULL DEFAULT 1 COMMENT '1=Active | 0=Inactive', PRIMARY KEY (id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
HTML Input Element:
Create an input element with HTML.

jQuery Library:
jQuery library is required to use the TagsInput plugin.

jQuery UI Library:
To use autocomplete feature in tagsInput, the jQuery UI library is required. Include the jQuery UI library files first.

tagsInput Plugin:
Include the library files of the tagsInput jQuery plugin.

Set server-side script URL in autocomplete_url option of the tagsInput() method.

<br> $('#tags_input').tagsInput({<br> 'autocomplete_url': 'fetchData.php',<br> });<br> Fetch Autocomplete Tags from Database with PHP and MySQL (fetchData.php): ThefetchData.php file is called by the tagsInput()` method to retrieve the tags from the server-side script based on the search term.

Get the search term using the PHP $_GET method.
Fetch the matched records from the database with PHP and MySQL.
Return tags data as JSON encoded array using PHP json_encode() function.
`<?php

// Database configuration
$dbHost = "localhost";
$dbUsername = "root";
$dbPassword = "root";
$dbName = "codexworld";

// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}

// Get search term
$searchTerm = $_GET['term'];

// Fetch matched data from the database
$query = $db->query("SELECT * FROM tags WHERE name LIKE '%".$searchTerm."%' AND status = 1 ORDER BY name ASC");

// Generate array with tags data
$tagsData = array();
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
$data['id'] = $row['id'];
$data['value'] = $row['name'];
array_push($tagsData, $data);
}
}

// Return results as json encoded array
echo json_encode($tagsData);

?>`
tagsInput Options
Various configuration options are available to customize the tagsInput() functionality. Some useful options are given below.

autocomplete_url – URL to fetch the autocomplete data
autocomplete – Options and values for autocomplete data ({option: value, option: value})
height – Height of the tags input area (100px)
width – Width of the tags input area (300px)
defaultText – Placeholder text for the input field (add a tag)
onAddTag – A callback function that triggers when the tag is added
onRemoveTag – A callback function that triggers when the tag is removed
onChange – A callback function that triggers when the tag value is changed
delimiter – Separator for a new tag ([‘,’,’;’] or a string with a single delimiter. Ex: ‘;’)
removeWithBackspace – Remove tag by backspace (true)
minChars – Minimum character limit (default, 0)
maxChars – Maximum character limit (default, no limit)
placeholderColor – Placeholder text color (default, #666666)
Get Value of Input Tags with PHP
Once the form is submitted, you can get the value of the tags input field using the $_POST method in PHP. The following example code snippet shows how to submit the form and get the tags input field’s value using PHP.

HTML Form with Tags Input:

Tags:

<!-- Submit button -->
<input type="submit" name="submit" value="Submit">

`
Get Value of Tags Input:
After the form submission, use the $_POST method in PHP to retrieve the value from the tags input field.

`if(isset($_POST['submit'])){
$tags = $_POST['tags_input'];

echo '<p><b>Selected Tags:</b></p> '.str_replace(',', '<br/>', $tags);

}`
Autocomplete Textbox with jQuery UI using PHP and MySQL

Conclusion
Tags input with autocomplete feature is very useful for the tags management in post/product creation form. You can the example code to allow the user to input multiple tags and manage them easily. The autocomplete functionality helps to find relevant tags quickly and select from the pre-populated list. You can also get multiple values from the input fields and insert tags in the database with PHP and MySQL.

Create Dynamic Image Slider with PHP and MySQL

Mr.Crystal — Wed, 19 Apr 2023 19:58:35 +0000

Image slider is mostly used to display banners or products on the web page. It helps to display multiple images or elements in the same section without taking up much space on the web page. The slider is a very useful component for the eCommerce website. You can use a carousel slider for multiple purposes in the web application, such as displaying featured products, offers, deals, and other important content.

Generally, static images or text contents are used in the slider. But you need to edit and modify the file each time you wish to change or add new images in the slider. To overcome this issue, you can display the images dynamically in the slider. With the dynamic process, the images will be fetched from the database and displayed in the slider. You can change or add images easily from the database without editing the file manually.

In this tutorial, we will show you how to create dynamic image slider with jQuery using PHP and MySQL. The dynamic slider can be used to display images from the database with PHP and MySQL. You can use a dynamic slider to integrate the product slider in PHP with the database. There are various jQuery plugins are available to add slider feature to the webpage. We will use slick carousel slider plugin to create dynamic image slider with PHP and MySQL.

Before getting started to make dynamic product slider with PHP, take a look at the file structure.

dynamic_image_slider_with_php/
├── dbConfig.php
├── index.php
├── slick/
│ ├── slick.css
│ └── slick.min.js
├── images/
├── js/
│ └── jquery.min.js
└── css/
└── style.css
Create Database Table
To store image file information a table needs to be created in the database. The following SQL creates an images table with some basic fields in the MySQL database.

CREATE TABLE `images` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `created` datetime NOT NULL DEFAULT current_timestamp(),
  `modifed` datetime NOT NULL DEFAULT current_timestamp(),
  `status` tinyint(1) NOT NULL DEFAULT 1 COMMENT '1=Active | 0=Inactive',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Now, you need to insert some data in the images table in the database which will be fetched from the database later in the script.

INSERT INTO `images` (`id`, `file_name`, `title`, `created`, `modifed`, `status`) VALUES
(1, 'car-img-1.jpg', 'Demo Product 1', '2023-01-12 16:19:36', '2023-01-12 16:19:36', 1),
(2, 'car-img-2.jpg', 'Demo Product 2', '2023-01-12 16:19:53', '2023-01-12 16:19:53', 1),
(3, 'car-img-3.jpg', 'Demo Product 3', '2023-01-12 16:20:03', '2023-01-12 16:20:03', 1),
(4, 'car-img-4.jpg', 'Demo Product 4', '2023-01-12 16:20:11', '2023-01-12 16:20:11', 1),
(5, 'car-img-5.jpg', 'Demo Product 5', '2023-01-12 16:20:22', '2023-01-12 16:20:22', 1);

Note that: The respective image files must be placed in the images/ folder.

Create Directory to Store Images
A directory is required in the server to store the physical files. Create a folder named images/ to store the image files.

Database Configuration (dbConfig.php)
The dbConfig.php file is used to connect and select the database. Specify the database host ($dbHost), username ($dbUsername), password ($dbPassword), and name ($dbName) as per your MySQL database credentials.

``<?php

// Database configuration

$dbHost = "localhost";

$dbUsername = "root";

$dbPassword = "root";

$dbName = "codexworld_db";

// Create database connection

$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection

if ($db->connect_error) {

die("Connection failed: " . $db->connect_error);

}

?>``
Dynamic Image Slider (index.php)
The images and text contents are fetched from the database and added to the slick slider.

jQuery Library:
The slick.js library has a dependency on jQuery, include the jQuery library file first.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
Slick Carousel Plugin:
The jQuery slick plugin is used to add slider feature in HTML, so, include the CSS and JS library files of the slick slider.

 <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

 <script type="text/javascript" src="slick/slick.min.js"></script>
Use the slick() method to initialize the slider and attach it to the HTML element.

Specify the parent div class (.product-slider) as a selector to bind the slick slider.
You can use some setting options to configure the slider as per the application requirement.
<script> $(document).ready(function(){ $('.product-slider').slick({ slidesToShow: 1, slidesToScroll: 1, dots: false, infinite: true, arrows: true }); }); </script>
Slider Element with Dynamic Images:
The image and title are fetched from the database and listed to define slider markup.

The data are retrieved from the database dynamically using PHP and MySQL.
All the images and titles should be listed under the parent div (.product-slider) whose class is specified as a selector in the slick() method.
`

<?php
// Include database configuration file
require 'dbConfig.php';

// Retrieve images from the database 
$query = $db->query("SELECT * FROM images WHERE status = 1"); 

if($query->num_rows > 0){ 
    while($row = $query->fetch_assoc()){ 
        $imageURL = 'images/'.$row["file_name"]; 
?>
    <div class="slide">
        <img src="<?php echo $imageURL; ?>" alt="" />
        <h6><?php echo $row["title"]; ?></h6>
    </div>
<?php } 
} ?>

`
Testing
Now, if you open the index.php file on the browser, you’ll see a fully functional dynamic slider with the product image and title on the web page.

dynamic-product-slider-with-php-mysql-codexworld
Create Dynamic Image Gallery with Database PHP & MySQL

Conclusion
With this example script, we have tried to provide a step-by-step process to create dynamic slider in PHP with MySQL. You can use this dynamic responsive image slider component to build product slider in online shopping or eCommerce website. Here the slick plugin is used for the slider feature that can be configured or customized as per your needs.

OOP and FP

Mr.Crystal — Sun, 16 Apr 2023 18:45:57 +0000

OOP helps developers understanding complex system by modeling into real-world objects with properties and methods. By applying OOP developers can improve the reusability of code and easier to manage and understand the system.

FP on the other hand, helps developers manage and control the access of data in which reduce the side-effect of having stateful objects like OOP.

It is depend on the project requirement and individual code-style that OOP or FP should be the choice on the project.