const { navigation } = props;
navigation.navigate(
  'Gift Codes'
)

The Gift Code screen was a part of different navigation stack named BottomTabNavigator and rendered parallel to the RedeemScreenStack from one of the screens of which I needed to navigate to “Gift Codes” screen which one of the screens in BottomTabNavigator stack. So to repeat the code above worked before but not after the upgrade.

In order to make it work, the following code was incorporated instead.

First of all import “CommonActions” and “useNavigation” component libraries of react-navigation/native library.

import { CommonActions, useNavigation } from '@react-navigation/native';

In the main functional component extract “useNavigation” for handling navigation actions.

const OrderPlacedScreen = () => {
  ......
  const navigation = useNavigation();
  ......
}

And finally call reset method of “CommonActions” functional class.

navigation.dispatch(
  CommonActions.reset({
    index: 0,
    routes: [{ 
      name: 'BottomTabNavigator',
      state: {
        routes: [
          {
            name: 'Gift Codes',
          }
        ]
      }
    }],
  })
)

Remember that using reset method we inside deeply nested routes and screens. We just need to repeat using the name and state in a nested manner.

I hope it helps someone.

The post Fix- Navigating to a screen outside of current Navigation Stack in React Native and Expo appeared first on InimistTech Blogs.

Being a developer, I personally hate slider plugins. In my opinion, they give you so many options that you end up not being able to maintain them without having to do all kinds of magic.

Step One: Download Slick Carousel files:

Create directories called “assets,” “src,” and “library” in the root of your project in the following order. Your-theme > assets > src > library
Create two more directories inside the library called css and js

• Copy the JS from the downloaded file and place it inside the JS folder.
• Copy the CSS and slick-theme.css and place them inside the CSS folder.
• Create another directory called carousel inside assets/src and create a file called js

Step Two: Enqueue the files

Now, go to your functions.php file in your theme and add the functions to enqueue the files.

Function custom_theme_enqueue_styles() {

wp_enqueue_style('slick-css', get_stylesheet_directory_uri().'/css/slick.css');
    wp_enqueue_script('slick-js', get_stylesheet_directory_uri() . '/js/slick.js', array( 'jquery' ), '1.0', true );
}
add_action('wp_enqueue_scripts', 'custom_theme_enqueue_styles');

Step Three: Add HTML for carousel

Now, let’s add the HTML markup for the carousel in the template file where you want the carousel (let’s say index.php )

<div class="posts-carousel px-5">
   <!--Slide One-->
   <div class="card">
      <img width="350" height="233" src="https://via.placeholder.com/150" class="w-100" alt="alt-text">
      <div class="card-body">
         <h3 class="card-title">Your Post heading</h3>
         <p>Your Post Excerpt</p>
         <a href="#" class="btn btn-primary">View More</a>
      </div>
   </div>
   <!--Slide Two-->
   <div class="card">
      <img width="350" height="233" src="https://via.placeholder.com/150" class="w-100" alt="alt-text">
      <div class="card-body">
         <h3 class="card-title">Your Post heading</h3>
         <p>Your Post Excerpt</p>
         <a href="#" class="btn btn-primary">View More</a>
      </div>
   </div>
</div>
If you want to loop through a default post or a Custom post type articles you can put this inside a loop.
$args = [
   'posts_per_page'         => 5,
   'post_type'              => 'post',
   'update_post_meta_cache' => false,
   'update_post_term_cache' => false,
];

$post_query = new \WP_Query( $args );
?>
<div class="posts-carousel px-5">
   <?php
   if ( $post_query->have_posts() ) :
      while ( $post_query->have_posts() ) :
         $post_query->the_post();
         ?>
         <div class="card">
            <?php
            if ( has_post_thumbnail() ) {
               the_post_custom_thumbnail(
                  get_the_ID(),
                  'featured-thumbnail',
                  [
                     'sizes' => '(max-width: 350px) 350px, 233px',
                     'class' => 'w-100',
                  ]
               );
            } else {
               ?>
               <img src="https://via.placeholder.com/510x340" class="w-100" alt="Card image cap">
               <?php
            }
            ?>
            <div class="card-body">
               <?php the_title( '<h3 class="card-title">', '</h3>' ); ?>
               <?php the_excerpt(); ?>
               <a href="<?php echo esc_url( get_the_permalink() ); ?>" class="btn btn-primary">
                  <?php esc_html_e( 'View More', 'aquila' ); ?>
               </a>
            </div>
         </div>
      <?php
      endwhile;
   endif;
   wp_reset_postdata();
   ?>
</div>

Let’s initialize the carousel by calling the .slick() and passing the parent class name of our carousel container as a selector. Notice that the carousel container name is posts-carousel; hence, the selector will be posts-carousel, and the function will be called like so: $(‘.posts-carousel’).slick()

We are also passing the settings for the carousel inside the slick()

( function( $ ) {
  class SlickCarousel {
    constructor() {
      this.initiateCarousel();
    }
    initiateCarousel() {
      $( '.posts-carousel' ).slick( {
        autoplay: true,
        autoplaySpeed: 1000,
        slidesToShow: 3,
        slidesToScroll: 1,
      } );
    }
  }
  new SlickCarousel();
} )( jQuery );

Step Four: Initialise the carousel

Let’s initialise the carousel by calling the .slick() and passing the parent class name of our carousel container as a selector. Notice that the carousel container name is posts-carousel, hence the selector will be posts-carousel and the function will be called like so : $(‘.posts-carousel’).slick()

We are also passing the settings for the carousel inside the slick()

( function( $ ) {
  class SlickCarousel {
    constructor() {
      this.initiateCarousel();
    }
    initiateCarousel() {
      $( '.posts-carousel' ).slick( {
        autoplay: true,
        autoplaySpeed: 1000,
        slidesToShow: 3,
        slidesToScroll: 1,
      } );
    }
  }
  new SlickCarousel();
} )( jQuery );

Also read :-
Using Context API to create text alert or notification at the top of a page

The post Slick Slider WordPress Without Plugin | Slick Carousel appeared first on InimistTech Blogs.

In this tutorial, we’ll build a simple but reusable notification system that displays messages (Success / Error) at the top of the page.

Project Setup

Let’s start by creating a React + TypeScript project.

npx create-vite@latest notifyapp
cd notifyapp
npm install @heroicons/react

We’ll use Tailwind CSS for styling (optional but recommended).

Follow Tailwind setup guide from:

https://tailwindcss.com/docs/guides/create-react-app

Step 1: Create Flash Context:

File: src/context/flash.tsx

import React from 'react';

type FlashProviderPropType = {
  children: React.ReactNode;
};

const defaultMessage = {
  type: "",
  message: ""
}

type MessagePropType = {
  type?: "info"|"success"|"error";
  message: string|string[]
}|null;

interface Flash {
  message: MessagePropType,
  setFlash: React.Dispatch<React.SetStateAction<MessagePropType>>
}

const FlashContext = React.createContext<Flash>({} as Flash);

const FlashProvider: React.FC<FlashProviderPropType> = ({ children }) => {
  const [message, setFlash] = React.useState(defaultMessage as MessagePropType);
  return (
    
    <FlashContext.Provider value={{ message, setFlash }}>
      {children}
    </FlashContext.Provider>
  );
};

export { FlashContext, FlashProvider };

Explanation:

• We define a global FlashContext to share the current notification message and a setter function.
• The provider wraps our app so any component can show a flash message.
• The message has two properties:
  • type: "success" | "error"
  • message: can be a string or an array of error messages.
    

    Step 2: Create the Notification Component

    File: src/components/flash.tsx

    import React from 'react'
    import { FlashContext } from "../context/flash";
    
    import { CheckCircleIcon } from '@heroicons/react/20/solid'
    import { XCircleIcon } from '@heroicons/react/20/solid'
    
    const Flash = () => {
      const { message, setFlash } = React.useContext(FlashContext);
      React.useEffect(
        () => {
          const timer1 = setTimeout(() => setFlash(null), 4000);
          return () => {
            clearTimeout( timer1 );
          }
        },
        [setFlash, message]
      )
    
      if( !message || !message?.message )    {
        return null;
      }
    
      if( !message?.type ) {
        message.type = "success"
      }
    
    
      const Success = () => {
        return (
          <div className="rounded-md bg-green-50 p-2">
          <div className="flex max-w-lg mx-auto items-center">
            <div className="shrink-0">
              <CheckCircleIcon aria-hidden="true" className="size-5 text-green-400" />
            </div>
            <div className="text-left align-middle pl-1">
              <h3 className="text-sm font-medium text-green-800">{message.message}</h3>
            </div>
            <div className="shrink-0 ml-auto">
              <button
                type="button"
                className="ml-3 rounded-md px-2 py-0 text-xs font-normal text-green-800 bg-green-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
                onClick={()=>setFlash(null)}
              >
                Dismiss
              </button>
            </div>
          </div>
        </div>
        )
      }
    
      const Error = () => {
        let errors: string[] = [];
        // console.log("message.message typeof", typeof message.message)
        if(typeof message.message === 'object' && message.message.length > 0 )  {
          errors = message.message;
        } else if(typeof message.message === 'string') errors.push(message.message)
        return (
          <div className="rounded-md bg-red-50 p-2">
          <div className="flex items-start max-w-lg mx-auto">
            <div className="shrink-0 items-start">
              <XCircleIcon aria-hidden="true" className="size-5 text-red-400" />
            </div>
            <div className="text-left align-middle pl-1">
              <h3 className="text-sm font-medium text-red-800">There were {errors.length} errors with your submission</h3>
              <div className="mt-2 text-sm text-red-700">
                <ul role="list" className="list-disc space-y-1 pl-5">
                {errors.map((value, index) => <li key={`err-${index}`}>{value}</li>)}
                </ul>
              </div>
            </div>
            <div className="shrink-0 ml-auto">
              <button
                type="button"
                className="ml-3 rounded-md px-2 py-0 text-xs font-normal text-red-800 bg-red-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
                onClick={()=>setFlash(null)}
              >
                Dismiss
              </button>
            </div>
          </div>
        </div>
        )
      }
    
      return (
        <div className="fixed top-0 right-0 left-0 text-center z-100">
          {message.type === 'success' && <Success />}
          {message.type === 'error' && <Error />}
        </div>
      )
    }
    
    export default Flash

    Key Points:

    • This component listens to the FlashContext state.
    • It automatically disappears after 4 seconds.
    • You can manually dismiss it with the “Dismiss” button.
    • Two inner components handle different message types: Success and Error.
      

      Step 3: Create a Page to Trigger Notifications

      File: src/pages/index.tsx

      import React from "react";
      import { FlashContext } from "../context/flash";
      
      
      export default function Dashboard() {
      
          const { setFlash } = React.useContext(FlashContext);
          return (
              <div className="p-25 flex justify-center">
                  <p><a className='rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white' onClick={() => {
                      setFlash({ message: "Something was done", 'type': "success" })
                  }}>Set Success</a> <a className='rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white' onClick={() => {
                      setFlash({ message: "Something was wrong", 'type': "error" })
                  }}>Set Error</a></p>
              </div>
          )
      }
      

      When a user clicks one of these buttons, it updates the FlashContext, which automatically triggers the Flash component at the top of the screen.

      Step 4: Wrap the App with FlashProvider

      File: src/App.tsx

      import './App.css'
      import Flash from './components/flash'
      import { FlashProvider } from './context/flash'
      import Dashboard from './pages'
      
      function App() {
      
        return (
          <>
            <FlashProvider>
                <AppWrapper />
              </FlashProvider>
          </>
        )
      }
      
      export default App
      
      const AppWrapper = () => {
        return (
          <div className="app-wrapper lg:min-w-[1024px]">
            <Dashboard />
            <Flash />
          </div>
        )
      }

      • The FlashProvider makes the FlashContext available throughout the component tree.
      • Any child (like Dashboard) can now call setFlash() to display messages.
      • App only handles context setup, not UI.
      • Reusable Wrapper –  easily add more global providers (like AuthProvider or ThemeProvider)
      • Consistent Notifications – The Flash component always stays at the top level, so it’s visible on every page.

I have already implemented this notification system in my React project and hosted it on CodeSandbox for reference.
You can explore the full source code and live preview using the following link:

Working Codesandbox: https://codesandbox.io/p/github/InimistTechnologies/react-notification/master (see blow)
Github Repo: https://github.com/InimistTechnologies/react-notification

The post Using Context API to create text alert or notification at the top of a page appeared first on InimistTech Blogs.

For example, look at the picture below. What if you wanted to modify the comprehension test shown in the picture below to have more questions?

The answer is to convert image file to text using some online or offline method. The method I use is quite simple and easy for me.

Using Google Drive to Convert image file to text

To do it all I needed was to have a Google account, which I guess almost every internet user has.

So there are the steps to convert text from image into text

• Login into https://drive.google.com
• Upload image file
  >
• Once upload is completed, right click the uploaded image, right click it and navigate through Open With > and click Google Docs.
  
• Based on the file size the doc file will be opened in a new window or tab within a few second. This file has your image at the top and extracted text at the bottom.

As per this google help article, for the best results, use these tips:

• Format: You can convert PDFs (multipage documents) or photo files (.jpeg, .png and .gif)
• File size: The file should be 2 MB or smaller.
• Resolution: Text should be at least 10 pixels high.
• Orientation: Documents must be right-side up. If your image faces the wrong way, rotate it before you upload it to Google Drive.
• Languages: Google Drive detects the language of the document. Learn more about supported languages
• Font and character set: Use common fonts, such as Arial or Times New Roman.
• Image quality: Use sharp images with even lighting and clear contrasts.

Limitations of Image to Text conversion, as per this google help article:

• The image file is converted, but the format might not transfer:
  • Bold, italics, font size, font type, and line breaks are likely to be retained.
  • Lists, tables, columns, footnotes, and endnotes are not likely to be detected.

Do you know of a better tool to convert image file to text ? If you do please share information about it in the comment section below.

You may be interesting checking out some basic and useful conversion tools created by me!

The post Convert image file to text using Google Drive appeared first on InimistTech Blogs.

To follow along with this tutorial, you’ll need basic knowledge of React, JavaScript and some familiarity with TypeScript. To test it, you should have an existing React App running.

Why to use @ alias in React?

In order to import a Button component from same folder or path we will right it as:

import { Button } from './button';

To import the Button component from a sibling of the parent folder we will write it as:

import { Button } from '../components/button';

And at some point it will go like:

import { Button } from '../../../../components/button';

You see how messy the last statement above has become! @ alias is a workaround to this.

As a React project grows in size and complexity, import statements can become tedious. In particular, the default relative path imports can quickly become long and hinder code readability.

So what is the solution to this? Short answer is, to configure one or more path aliases.

How to use @ alias in react?

In this article, we will explore how to leverage path aliases to enhance the organization and maintainability of your React and TypeScript projects.

Understanding import statements in React and TypeScript apps

In React and TypeScript apps, developers use import statements to bring in functionality from other modules or files. This practice ensures we develop software that is reusable and modular.

Although import statements are useful in this way, they can lead to problems when they aren’t used properly. The code snippet below shows a typical example of this problem:

import React from 'react';
import { Button } from '../../../../components/button'; // this is so unpredictable

function SomeComponent() {
  return <Button />;
};

As you can see, this code snippet uses relative imports from the current file to import the Button component. However, this import pattern is messy because it’s importing the component from a deeply nested directory.

It may be okay for relatively small projects, but as the project grows, typing and reading long import paths becomes tedious. It may also be slow to load as your app has to search for files, rather than just importing them!

How path aliases can help simplify import statements

Path aliases let developers define custom shortcuts for import paths, making them cleaner and more intuitive. With path aliases set up, you can have clean and concise imports regardless of the size of the project, as shown in the code snippet below:

import React from 'react';
import { Button } from '@components/button'; // clean and concise import :)

function SomeComponent() {
  return <Button />;
};

By setting up path aliases in a React and TypeScript app, you can simplify import statements, improve code navigation, and enhance the overall development experience.

Configuring path aliases in the tsconfig.json OR tsconfig.app.json file

You can configure path aliases easily in your project’s tsconfig.json OR tsconfig.app.json file if it exists. tsconfig.app.json takes a precedence. These files are usually found at the root of a TypeScript project.

To configure your path aliases in this file, simply add a paths property in the compilerOptions object. Then, you can map path alias names to file paths as shown in the code snippet below:

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

The above code tells the TypeScript compiler to resolve imports from the @/* alias to the ./src/* directory. Once you set up the path alias, you can use it in your import statements.

For example, you can import a Button component in the src/components directory directly from anywhere in the project like this:

import { Button } from "@/components/Button"; 

function App() { 
  return ( <Button>Click Me</Button> )
}

Without a path alias set up, importing the Button component from another file — for example, src/pages/dashboard/profile/settings/index.tsx — would look something like this:

import { Button } from '../../../../components/Button';

function Settings() {
  return (
    <Button>Click Me</Button>
  )
}

You can take this a step further and add more path aliases, which can be beneficial for large projects that store critical parts of the app in well-defined directories. In the tsconfig.app.json file, update the paths field as shown in the following code snippet:

{
  "compilerOptions": {
    "baseUrl" : "./src",
    "paths": {
      "@components/*": ["./components/*"],
      "@ui/*": ["./components/common/ui/*"],
      "@pages/*": ["./pages/*"],
      "@hooks/*": ["./hooks/*"],
      "@api/*": ["./api/*"],
      "@utils/*": ["./utils/*"],
    }
  }
}

The baseUrl field in the code snippet above is used to make the path aliases shorter to write.

Using Vite? Edit the vite.config.ts

import path from 'path';

...

export default defineConfig({
  ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

You can add more alias as you did in the tsconfig.app.json file above.

There is a plugin which can compile paths defined in the tsconfig.json or tsconfig.app.json and insert them into the defineConfig module of vite. Install this module if you want to save yourself from updating two files each time you add new alias to vite or tsconfig configuration file.

Install vite-tsconfig-paths plugin (optional)

npm install vite-tsconfig-paths

Update vite.config.ts

import tsconfigPaths from 'vite-tsconfig-paths'

And add to plugins

export default defineConfig({
  plugins: [
    react(),
    ....other plugins
    tsconfigPaths()
  ]
})

After adding and setting this plugin next time you have to add new alias in the tsconfig.json or tsconfig.app.json file only.

The post Using @ alias in React for cleaner React and TypeScript imports from various paths appeared first on InimistTech Blogs.

Deploying Next.js application on an Ubuntu VPS with Nginx as the reverse proxy is a reliable and efficient way to serve your web application. In this tutorial, we’ll walk through the steps to set up and deploy Next.js application on an Ubuntu server using Nginx.

Prerequisites

Before you begin deploying Next.js application, make sure you have the following:

• A server running Ubuntu 24.04
• Basic knowledge of the Linux command line.
• A root user access or normal user with sudo rights.

Deploying Next.js Application with Nginx on Ubuntu

Deploying Next.js Application on Ubuntu 24 with Nginx involves some simple server tasks and to install some required software and tools.

Step 1: Update and Secure Your Server

Before deploying Next.js application, it’s essential to update your server packages and secure it.

sudo apt update && sudo apt upgrade -y

Step 2: Install Node.js and npm

For latest version, visit the Node.js official documentation page.

# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

# download and install Node.js (you may need to restart the terminal)
nvm install 22

Verify installation

# verifies the right Node.js version is in the environment
node -v # should print `v22.17.0`

# verifies the right npm version is in the environment
npm -v # should print `10.9.2`

Step 3: Install and Configure Nginx

Install Nginx:

sudo apt install nginx -y

Create a new Nginx configuration file for your application:

sudo nano /etc/nginx/sites-available/your-nextjs-app

Add the following configuration:

server {
    listen 80;
    server_name your_domain_or_ip;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Replace your_domain_or_ip with your domain name or server IP address. Save and close the file.

Create a symbolic link to enable this configuration:

sudo ln -s /etc/nginx/sites-available/your-nextjs-app /etc/nginx/sites-enabled/

Test the Nginx configuration to ensure there are no errors:

sudo nginx -t

If the test is successful, restart Nginx:

sudo systemctl restart nginx

Step 4: Secure Your Application with SSL

It’s highly recommended to secure your application with SSL. You can use Certbot to obtain a free SSL certificate from Let’s Encrypt.

First, install Certbot:

sudo apt install certbot python3-certbot-nginx -y

Then, run Certbot to obtain and configure the SSL certificate:

sudo certbot --nginx -d your_domain

Certbot will automatically configure SSL for your Nginx site.

Step 5: Install Next.js

You can install new Next.js app, or clone an existing app from a git repository to a new folder or just copy an existing app from a git repository to current folder. I will put an example for each app below.

Method 1: Create new Next.js app

npx create-next-app@latest

And follow instructions shown on the screen. For example, I installed a test app for this article, as shown below.

Need to install the following packages:
create-next-app@15.3.5
Ok to proceed? (y) y

 What is your project named? … myapp
 Would you like to use TypeScript? … No / Yes
 Would you like to use ESLint? … No / Yes
 Would you like to use Tailwind CSS? … No / Yes
 Would you like your code inside a `src/` directory? … No / Yes
 Would you like to use App Router? (recommended) … No / Yes
 Would you like to use Turbopack for `next dev`? … No / Yes
 Would you like to customize the import alias (`@/*` by default)? … No / Yes

When installed cd into myapp, or whatever name you chose, folder, and skip to the next step.

Method 2: Clone from git repository

Clone existing app from a git repository you have url for.

git clone https://bitbucket.org/inimisttech/online-tools.git myapp
cd myapp

cd into myapp, or whatever name you chose, folder, and skip to the next step.

Method 3: Use existing git repository in current folder

cd /var/www/html
mkdir myapp && cd myapp

and setup git inside the myapp folder

git init
git remote add "origin" https://bitbucket.org/inimisttech/online-tools.git
git fetch origin master:master
git checkout master

Past this step you should be able to complete your Next.js app setup and deployment.

Deploying Next.js Application – Final Step

Step 6: Build the app and run the app

Since we have all the tools and file ready by now, we can install the necessary node modules mentioned in our package.json file.

npm install

And finally build

npm run build

and run

npm run start

Alternately you could use a server manager such as pm2 to run your app.

I would install pm2 globally

npm i pm2 -g

And run app via it

pm2 start npm --name "inimisttools.com app" -- run start

I have created a very useful inimisttools.com app with various “daily use tools” for deploying Next.js Application. It led me to blog these steps involved to build and Deploy Next.js Application with Nginx on Ubuntu , for my own reference later on as well.

The post Deploying Next.js Application with Nginx on Ubuntu – 2025 appeared first on InimistTech Blogs.

1) What magic methods are
2) The most commonly used magic methods
3) Code examples for each
4) Best practices

What Are PHP Magic Methods?

Magic methods are predefined methods that PHP calls automatically when certain events occur. They are often used to control property access, method calls, and object behavior in a flexible and elegant way.

Common Magic Methods (with Examples)

1. __construct() – Constructor

Called automatically when a new object is created.

<?php
class User {
    public function __construct($name) {
        echo "User $name created!";
    }
}

$user = new User("Alice");
// Output: User Alice created!

?>

2. __destruct() – Destructor

Called when an object is destroyed (end of script or unset).

<?php
class Logger {
    public function __destruct() {
        echo "Cleaning up...";
    }
}

$log = new Logger();
// Output on script end: Cleaning up...
?>

3. __get() – Accessing Inaccessible/Nonexistent Properties

<?php
class Product {
    private $data = ['name' => 'Laptop'];

    public function __get($property) {
        return $this->data[$property] ?? "Property not found!";
    }
}

$p = new Product();
echo $p->name;  // Output: Laptop
echo $p->price; // Output: Property not found!

?>

4. __set() – Setting Inaccessible/Nonexistent Properties

<?php
class Product {
    private $data = [];

    public function __set($key, $value) {
        $this->data[$key] = $value;
    }

    public function __get($key) {
        return $this->data[$key] ?? null;
    }
}

$p = new Product();
$p->name = "Smartphone";
echo $p->name; // Output: Smartphone

?>

5. __isset() and __unset()

Used when calling isset() or unset() on inaccessible properties.

<?php
class User {
    private $data = ['email' => 'test@example.com'];

    public function __isset($key) {
        return isset($this->data[$key]);
    }

    public function __unset($key) {
        unset($this->data[$key]);
    }
}

$u = new User();
var_dump(isset($u->email)); // true
unset($u->email);
var_dump(isset($u->email)); // false

?>

6. __call() – Handling Undefined Method Calls (Object Context)

<?php
class Magic {
    public function __call($name, $arguments) {
        return "Method '$name' does not exist. Arguments: " . implode(", ", $arguments);
    }
}

$obj = new Magic();
echo $obj->doSomething("arg1", "arg2");
// Output: Method 'doSomething' does not exist. Arguments: arg1, arg2

?>

7. __callStatic() – Undefined Static Method Calls

<?php
class StaticMagic {
    public static function __callStatic($name, $args) {
        return "Static method '$name' was called with arguments: " . implode(", ", $args);
    }
}

echo StaticMagic::unknown("x", "y");
// Output: Static method 'unknown' was called with arguments: x, y

?>

8. __toString() – When Object is Treated Like a String

<?php
class Book {
    public function __toString() {
        return "Book object";
    }
}

$b = new Book();
echo $b; // Output: Book object

?>

9. __invoke() – When Object is Called Like a Function

<?php
class Greeter {
    public function __invoke($name) {
        return "Hello, $name!";
    }
}

$greet = new Greeter();
echo $greet("John"); // Output: Hello, John!

?>

10. __clone() – When an Object is Cloned

<?php
class Test {
    public function __clone() {
        echo "Object cloned!";
    }
}

$t1 = new Test();
$t2 = clone $t1;
// Output: Object cloned!
?>

Best Practices for Using Magic Methods

1) Avoid overusing magic methods—they can make code harder to read/debug.
2) Use them only when they provide real flexibility (e.g., dynamic properties or lazy loading).
3) Always document them well for maintainability.

Final Thoughts:

Magic methods in PHP give you the power to create flexible, dynamic, and clean OOP code. Whether you’re building custom property handlers, dynamic method calls, or string representations of objects, these methods can help—but use them wisely.

Read Also:
PHP and JSON: Encode, Decode, and Handle JSON Data

How to Create a Simple Form and Handle Form Data in PHP

The post PHP Magic Methods appeared first on InimistTech Blogs.

Encode PHP Data to JSON

To convert PHP arrays or objects into JSON strings, use the json_encode() function.

Example:

<?php
$user = [
  "name" => "Alice",
  "age" => 25,
  "email" => "alice@example.com"
];

$json = json_encode($user);
echo $json;
// Output: {"name":"Alice","age":25,"email":"alice@example.com"}
?>

You can also use JSON_PRETTY_PRINT for better readability:

<?php
You can also use JSON_PRETTY_PRINT for better readability:
?>

Decode JSON to PHP

To convert a JSON string into a PHP variable, use json_decode().

Example (As Object):

<?php
$json = '{"name":"Bob","age":30,"email":"bob@example.com"}';

$data = json_decode($json);
echo $data->name; // Output: Bob
?>

Example (As Array):
Pass true as the second parameter to get an associative array:

<?php

$data = json_decode($json, true);
echo $data['email']; // Output: bob@example.com

?>

Handling JSON in API Requests
When working with APIs or JavaScript (AJAX), you’ll often receive raw JSON. Here’s how you handle that in PHP:

<?php
// Read raw POST input
$input = file_get_contents("php://input");

// Decode JSON to array
$data = json_decode($input, true);

echo "Name received: " . $data['name'];
?>

Common Use Cases

1) Send JSON to JavaScript: echo json_encode($data);
2) Receive JSON via fetch() or Axios from the frontend
3) Store structured settings or logs in JSON format
4) Build REST APIs that return JSON responses

Error Handling

Always check for decoding errors with json_last_error():

<?php
if (json_last_error() !== JSON_ERROR_NONE) {
    echo "JSON Error: " . json_last_error_msg();
}
?>

Summary

1) Use json_encode() to send PHP data as JSON.
2) Use json_decode() to parse JSON into PHP arrays or objects.
3) Perfect for APIs, AJAX, and frontend-backend communication.
4) Always validate and sanitize incoming data.

JSON is simple yet powerful, and with PHP, it takes just a few lines to integrate it into your project. Whether you’re building modern web apps or connecting APIs, knowing how to handle JSON is a must.

Read Also:
How to Create a Simple Form and Handle Form Data in PHP

How to Connect PHP with MySQL Database

Also Visit:
https://inimisttech.com/

The post PHP and JSON: Encode, Decode, and Handle JSON Data appeared first on InimistTech Blogs.

Follow the steps below to create and handle a simple form in PHP

1.Create a Simple HTML Form

First, create a form that asks for user input, like a name.

<form method="POST" action="process.php">
<label for="name">Enter your name:</label>
  <input type="text" id="name" name="name">
  <button type="submit">Submit</button>
</form>

• method=”POST” means data will be sent securely.
• action=”process.php” means form data will be handled in process.php file.

2. Handle Form Data in PHP (process.php)

Now in process.php, get the data using $_POST.

<?php
// Check if form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
     // Get the value from input field
    $name = $_POST['name'];
// Display the name
    echo "Hello, " . htmlspecialchars($name);
}
?>

• $_POST[‘name’] gets the input data.
• htmlspecialchars() is used for security

3. Using $_GET Instead of $_POST

If you use method=”GET” in the form, you will collect data like this:

<?php
// Get the value if form submitted with GET
$name = $_GET['name'];
echo "Hello, " . htmlspecialchars($name);
?>

• GET method shows data in URL, while POST does not.

Summary

Create a simple form and handle form data in PHP is simple. You design the form using HTML and then capture user input in PHP using $_POST or $_GET.

Read Also :-
How to Connect PHP with MySQL Database

The Role of $wpdb for Custom Queries in WordPress

Also visit:
http://www.inimisttech.com/

The post How to Create a Simple Form and Handle Form Data in PHP appeared first on InimistTech Blogs.

Follow the steps below to connect PHP with MySQL:

1.Create a database

First, create a database using PHPMyAdmin or the MySQL command line.

Example:

Database name: testdb

2. Connect to Database

To connect to a database using procedural style, use mysqli_connect().

<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "testdb";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $database);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully";
?>

3. Connect to Database (Object-Oriented Style)

You can also connect using object-oriented style with new mysqli().

<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "testdb";
// Create connection
$conn = new mysqli($servername, $username, $password, $database);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";
?>

4. Close the Database Connection

To close the connection use

<?php
$conn->close();
?>

Summary

PHP allows you to connect to MySQL easily using either procedural or object-oriented methods. Always check the connection and close it after your work to save server resources.

The post How to Connect PHP with MySQL Database appeared first on InimistTech Blogs.