The question for anyone who runs a blog or content site is: how do you become one of those trusted sources? The answer lies in structured data, specifically JSON-LD Knowledge Graphs that help AI models understand not just what your content says, but how it connects to everything else you've published.

In this tutorial, you'll build a PHP function that auto-generates a JSON-LD Knowledge Graph for every blog post on your site. There are no plugins, no external APIs, and just one function. It will detect entities in your content, map relationships between posts, and output a unified schema that both Google and AI models like ChatGPT can parse as a connected system.

Table of Contents

• Why This Matters Now

• Prerequisites

• The Pipeline

• What Static JSON-LD Looks Like (And Why It Falls Short)

• Step 1: Define Your Entity Helpers

• Step 2: Build the BlogPosting Schema

• Step 3: Detect Topics Automatically

• Step 4: Map Relationships Between Posts

• Step 5: Add Multilingual Connections

• Step 6: Assemble the Graph

• What the Output Looks Like in Production

• Testing Your Implementation

• What I Learned After 3 Months in Production

Why This Matters Now

AI search engines are replacing blue links with synthesized answers. When someone asks ChatGPT a question, it doesn't return a list of URLs. It builds a response by citing the sources it trusts.

According to AccuraCast's research on AI search citations, 81% of pages cited by AI engines use schema markup with JSON-LD as the dominant format. Pages with structured schema are 3 to 4 times more likely to be cited by ChatGPT or Perplexity than pages without it.

Most JSON-LD tutorials teach you to paste a static <script> tag with your title and author name. That gets you into Google's index. But it doesn't get you cited by AI.

For that, you need a Knowledge Graph: a system where your entities (author, site, topics, tools, related articles) are connected through persistent identifiers that machines can follow across every page on your site.

I built this system for my own blog. After three months in production with 52 posts in three languages, I asked ChatGPT, Gemini, and Perplexity to audit the resulting schema. ChatGPT scored it 9.1 out of 10 and called it "production-grade graph design." This article walks you through how to build the same thing.

Prerequisites

To follow this tutorial, you'll need:

• PHP 7.4 or higher running on your server

• A MySQL or MariaDB database with a posts table that stores your blog content (title, slug, content, excerpt, created_at, updated_at)

• Basic PHP knowledge: variables, arrays, functions, and database queries with PDO

• A working blog where you can edit PHP files and add schema markup to your HTML output

The tools we'll use are all built into PHP. No external packages or Composer dependencies are required. The entity detection uses simple string matching with strpos(), the database queries use PDO prepared statements, and the JSON-LD output uses PHP's native json_encode(). If you've built a blog with PHP before, you have everything you need.

The Pipeline

The system works in four stages:

Stage 1: PHP queries MariaDB for the post content, metadata, and related post IDs.

Stage 2: The system scans the content for known topics and tools using keyword matching. No NLP libraries needed. A simple associative array maps keywords to schema entities.

Stage 3: Related posts are fetched and mapped as both navigation links (relatedLink) and knowledge relationships (citation).

Stage 4: Everything gets combined into a single @graph array with five connected entities: WebSite, Organization, Person, WebPage, and BlogPosting. Each entity has a stable @id that machines can reference across pages.

What Static JSON-LD Looks Like (And Why It Falls Short)

Here is what a typical tutorial tells you to add:

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "My Blog Post",
  "author": {
    "@type": "Person",
    "name": "Jane"
  },
  "datePublished": "2026-01-15"
}

This tells Google "there is an article by Jane." It doesn't say what topics the article covers, what tools it mentions, how it connects to other articles on your site, who publishes the site, or what makes Jane an authority on the subject.

For a blog with dozens of posts about interconnected topics, every post exists in isolation. Search engines and AI models can't see that your articles form a system of knowledge. They can't tell that your post about Midjourney prompts connects to your post about AI design workflows, which connects to your post about fintech UX.

By the end of this tutorial, that same post will generate a @graph with five linked entities, automatic topic detection, relationship mapping, multilingual connections, and an abstract that LLMs read before deciding whether to cite you.

Step 1: Define Your Entity Helpers

Three PHP functions define your core entities. They return arrays that get reused on every page of your site.

function getSchemaAuthor($baseUrl) {
    return [
        '@type' => 'Person',
        '@id' => $baseUrl . '/#author',
        'name' => 'Your Name',
        'description' => 'Your professional description.',
        'url' => $baseUrl . '/about',
        'image' => $baseUrl . '/photo.png',
        'jobTitle' => 'Your Title',
        'sameAs' => [
            'https://linkedin.com/in/yourprofile',
            'https://x.com/yourhandle',
            'https://dev.to/yourprofile'
        ]
    ];
}

function getSchemaOrganization($baseUrl) {
    return [
        '@type' => 'Organization',
        '@id' => $baseUrl . '/#organization',
        'name' => 'Your Site Name',
        'url' => $baseUrl,
        'logo' => [
            '@type' => 'ImageObject',
            'url' => $baseUrl . '/logo.png'
        ]
    ];
}

function getSchemaWebSite(\(baseUrl, \)siteName, \(siteDesc, \)langCode) {
    return [
        '@type' => 'WebSite',
        '@id' => $baseUrl . '/#website',
        'name' => $siteName,
        'description' => $siteDesc,
        'url' => $baseUrl,
        'inLanguage' => $langCode,
        'publisher' => ['@id' => $baseUrl . '/#organization']
    ];
}

The @id values are the most important detail. /#author, /#organization, and /#website are persistent identifiers that stay the same across every page.

When a machine reads your homepage and then reads a blog post, it recognizes that https://yoursite.com/#author is the same entity in both places. Without @id, each page creates a new floating entity that machines can't connect.

One decision that matters: the publisher should be an Organization, not a Person. AI systems assign more trust to content published by organizations than by individuals. Even if you're a solo creator, define your site as an Organization for publishing purposes and keep yourself as the Person author.

Step 2: Build the BlogPosting Schema

This function takes a post from your database and the current language code, then builds the core BlogPosting entity.

function generateBlogPostingSchema(\(post, \)langCode) {
    $baseUrl = rtrim(SITE_URL, '/');
    \(siteName = getLocalizedSetting('site_name', \)langCode);
    \(siteDesc = getLocalizedSetting('site_description', \)langCode);
    $defaultLang = getDefaultLanguage();
    \(postSlug = \)post['slug'];

    \(postUrl = \)langCode === $defaultLang
        ? \(baseUrl . '/' . \)postSlug
        : \(baseUrl . '/' . \)langCode . '/' . $postSlug;

    \(excerpt = \)post['excerpt']
        ?: mb_substr(strip_tags($post['content']), 0, 160);

    $blogPosting = [
        '@type' => 'BlogPosting',
        '@id' => $postUrl . '#article',
        'headline' => $post['title'],
        'description' => $excerpt,
        'abstract' => $excerpt,
        'url' => $postUrl,
        'datePublished' => date('c', strtotime($post['created_at'])),
        'dateModified' => date('c', strtotime($post['updated_at'])),
        'author' => [
            '@type' => 'Person',
            '@id' => $baseUrl . '/#author',
            'name' => 'Your Name',
            'url' => $baseUrl . '/about'
        ],
        'publisher' => [
            '@type' => 'Organization',
            '@id' => $baseUrl . '/#organization',
            'name' => 'Your Site Name',
            'logo' => [
                '@type' => 'ImageObject',
                'url' => $baseUrl . '/logo.png'
            ]
        ],
        'isPartOf' => ['@id' => $baseUrl . '/#website'],
        'mainEntityOfPage' => [
            '@type' => 'WebPage',
            '@id' => $postUrl
        ],
        'inLanguage' => $langCode,
        'wordCount' => str_word_count(strip_tags($post['content']))
    ];

Two properties deserve attention.

abstract maps the post excerpt. LLMs read the abstract first to decide whether the rest of the page is worth processing. If your excerpt says "In this post I explore some ideas about..." models may skip you entirely. Make it a direct statement: "To implement a Knowledge Graph you need five connected entities with persistent @id references." That's something an LLM can evaluate immediately.

isPartOf connects the article to the WebSite entity. This tells machines "this article belongs to a larger knowledge source." Without it, each post looks like an independent document.

Notice that author and publisher include both @id and inline properties. The @id connects to the full entity in the @graph. The inline properties are a fallback because some parsers (including Google's Rich Results Test) don't always resolve @id references. Including both ensures zero validation warnings.

Step 3: Add Automatic Entity Detection

This is where static JSON-LD tutorials stop and your Knowledge Graph begins. Instead of manually tagging each post with its topics, the system scans the content automatically.

    \(contentLower = strtolower(\)post['content'] . ' ' . $post['title']);

    $topicMap = [
        'midjourney'      => ['name' => 'Midjourney', 'url' => 'https://midjourney.com'],
        'prompt'          => ['name' => 'Prompt Engineering'],
        'fintech'         => ['name' => 'Fintech UX Design'],
        'ux design'       => ['name' => 'UX Design'],
        'llms.txt'        => ['name' => 'llms.txt', 'url' => 'https://llmstxt.org'],
        'knowledge graph' => ['name' => 'Knowledge Graph'],
    ];

    $aboutItems = [];
    $keywordsList = [];
    foreach (\(topicMap as \)keyword => $meta) {
        if (strpos(\(contentLower, \)keyword) !== false) {
            \(item = ['@type' => 'Thing', 'name' => \)meta['name']];
            if (isset(\(meta['url'])) \)item['url'] = $meta['url'];
            \(aboutItems[] = \)item;
            \(keywordsList[] = \)meta['name'];
        }
    }
    if (!empty($aboutItems)) {
        \(blogPosting['about'] = \)aboutItems;
    }

The same pattern detects tools mentioned in the content:

    $toolMap = [
        'midjourney' => ['name' => 'Midjourney', 'url' => 'https://midjourney.com'],
        'claude'     => ['name' => 'Claude', 'url' => 'https://claude.ai'],
        'chatgpt'    => ['name' => 'ChatGPT', 'url' => 'https://chat.openai.com'],
        'figma'      => ['name' => 'Figma', 'url' => 'https://figma.com'],
    ];

    $mentionItems = [];
    foreach (\(toolMap as \)keyword => $meta) {
        if (strpos(\(contentLower, \)keyword) !== false) {
            $mentionItems[] = [
                '@type' => 'Thing',
                'name' => $meta['name'],
                'url' => $meta['url']
            ];
            \(keywordsList[] = \)meta['name'];
        }
    }
    if (!empty($mentionItems)) {
        \(blogPosting['mentions'] = \)mentionItems;
    }

    if (!empty($keywordsList)) {
        \(blogPosting['keywords'] = array_values(array_unique(\)keywordsList));
    }

The difference between about and mentions matters for AI citation. about declares the main topics. mentions declares tools and references that appear in the content. If a post is a Midjourney tutorial that also mentions Claude, about gets Midjourney and mentions gets Claude.

This distinction helps AI models decide whether to cite your page when someone asks about Midjourney versus when they ask about Claude.

A question that comes up often: do you need NLP for entity detection? No. A keyword map with strpos handles the vast majority of cases for a personal blog. NLP adds complexity, latency, and a dependency you don't need. If your topic map has 20 to 30 entries, keyword matching is fast, predictable, and easy to debug.

Step 4: Map Relationships Between Posts

Each post connects to related posts through two properties: relatedLink for navigation and citation for knowledge relationships.

    \(relatedUrls = getRelatedPostUrls(\)post['id'], $langCode);
    if (!empty($relatedUrls)) {
        \(blogPosting['relatedLink'] = \)relatedUrls;
        \(blogPosting['citation'] = \)relatedUrls;
    }

The helper function queries a post_connections table:

function getRelatedPostUrls(\(postId, \)langCode) {
    $pdo = getDB();
    $baseUrl = rtrim(SITE_URL, '/');
    $defaultLang = getDefaultLanguage();

    \(stmt = \)pdo->prepare(
        "SELECT connected_post_id FROM post_connections WHERE post_id = ?"
    );
    \(stmt->execute([\)postId]);
    \(connections = \)stmt->fetchAll(PDO::FETCH_COLUMN);

    $urls = [];
    foreach (\(connections as \)connId) {
        \(slug = getPostSlugForLanguage(\)connId, $langCode);
        if ($slug) {
            \(urls[] = \)langCode === $defaultLang
                ? \(baseUrl . '/' . \)slug
                : \(baseUrl . '/' . \)langCode . '/' . $slug;
        }
    }
    return $urls;
}

Why use both relatedLink and citation on the same URLs? They signal different things to machines. relatedLink says "the reader might want to visit these pages next." citation says "this article builds on the knowledge in these other articles."

AI models weigh citation more heavily when deciding whether your content is part of a larger knowledge system. Using both tells machines that your related posts aren't just navigation. They're sources this article builds upon.

Step 5: Add Multilingual Support

If your blog publishes in multiple languages, workTranslation connects different language versions of the same article.

    $languages = getActiveLanguages();
    $translations = [];
    foreach (\(languages as \)lang) {
        \(lc = \)lang['code'];
        if (\(lc === \)langCode) continue;

        \(translatedSlug = getPostSlugForLanguage(\)post['id'], $lc);
        if ($translatedSlug) {
            \(translatedUrl = \)lc === $defaultLang
                ? \(baseUrl . '/' . \)translatedSlug
                : \(baseUrl . '/' . \)lc . '/' . $translatedSlug;

            \(stmtT = \)pdo->prepare(
                "SELECT title FROM post_translations
                 WHERE post_id = ? AND language_code = ? LIMIT 1"
            );
            \(stmtT->execute([\)post['id'], $lc]);
            \(translatedTitle = \)stmtT->fetchColumn() ?: $post['title'];

            $translations[] = [
                '@type' => 'CreativeWork',
                '@id' => $translatedUrl . '#article',
                'headline' => $translatedTitle,
                'url' => $translatedUrl,
                'inLanguage' => $lc
            ];
        }
    }
    if (!empty($translations)) {
        \(blogPosting['workTranslation'] = \)translations;
    }

Without workTranslation, a blog with 50 posts in three languages looks like 150 independent articles to AI models. With it, the same blog looks like 50 pieces of knowledge with multilingual reach. The authority consolidates instead of fragmenting.

The translations use @type: CreativeWork instead of BlogPosting. This avoids warnings in Google's Rich Results Test where each translation would be flagged as a separate article with missing required fields.

Step 6: Assemble the Graph

Bring everything together:

    $webPage = [
        '@type' => 'WebPage',
        '@id' => $postUrl,
        'url' => $postUrl,
        'name' => $post['title'],
        'isPartOf' => ['@id' => $baseUrl . '/#website']
    ];

    $graph = [
        '@context' => 'https://schema.org',
        '@graph' => [
            getSchemaWebSite(\(baseUrl, \)siteName, \(siteDesc, \)langCode),
            getSchemaOrganization($baseUrl),
            getSchemaAuthor($baseUrl),
            $webPage,
            $blogPosting
        ]
    ];

    return '<script type="application/ld+json">'
        . json_encode($graph,
            JSON_UNESCAPED_SLASHES
            | JSON_UNESCAPED_UNICODE
            | JSON_PRETTY_PRINT)
        . '</script>';
}

The json_encode flags matter. JSON_UNESCAPED_SLASHES prevents URLs from getting escaped. JSON_UNESCAPED_UNICODE keeps non-ASCII characters readable for multilingual content. Without these, a single special character in a blog post title fetched from the database can break the entire JSON-LD block silently.

What the Output Looks Like in Production

Here is the actual JSON-LD generated by a real post on shinobis.com, a blog about AI tools and UX design:

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebSite",
      "@id": "https://shinobis.com/#website",
      "name": "Designer in the Age of AI",
      "description": "AI tools and real workflows from a designer who builds with AI.",
      "url": "https://shinobis.com",
      "inLanguage": "en",
      "publisher": { "@id": "https://shinobis.com/#organization" }
    },
    {
      "@type": "Organization",
      "@id": "https://shinobis.com/#organization",
      "name": "Shinobis",
      "url": "https://shinobis.com",
      "logo": { "@type": "ImageObject", "url": "https://shinobis.com/3117045.png" }
    },
    {
      "@type": "Person",
      "@id": "https://shinobis.com/#author",
      "name": "Shinobis",
      "description": "UX/UI Designer with 10+ years in banking and fintech.",
      "url": "https://shinobis.com/en/about",
      "jobTitle": "UX/UI Designer",
      "sameAs": [
        "https://www.linkedin.com/company/shinobis-ai",
        "https://dev.to/shinobis_ia"
      ]
    },
    {
      "@type": "WebPage",
      "@id": "https://shinobis.com/en/one-year-with-ai-open-letter-to-designers",
      "url": "https://shinobis.com/en/one-year-with-ai-open-letter-to-designers",
      "name": "One Year with AI: Open Letter to Designers",
      "isPartOf": { "@id": "https://shinobis.com/#website" }
    },
    {
      "@type": "BlogPosting",
      "@id": "https://shinobis.com/en/one-year-with-ai-open-letter-to-designers#article",
      "headline": "One Year with AI: Open Letter to Designers",
      "description": "One year ago I started this journey. Today I write to all designers who are still doubting, fearing, or ignoring AI.",
      "abstract": "One year ago I started this journey. Today I write to all designers who are still doubting, fearing, or ignoring AI.",
      "url": "https://shinobis.com/en/one-year-with-ai-open-letter-to-designers",
      "datePublished": "2026-02-15T09:00:00-05:00",
      "dateModified": "2026-03-20T14:30:00-05:00",
      "inLanguage": "en",
      "wordCount": 1842,
      "author": {
        "@type": "Person",
        "@id": "https://shinobis.com/#author",
        "name": "Shinobis",
        "url": "https://shinobis.com/en/about"
      },
      "publisher": {
        "@type": "Organization",
        "@id": "https://shinobis.com/#organization",
        "name": "Shinobis",
        "logo": { "@type": "ImageObject", "url": "https://shinobis.com/3117045.png" }
      },
      "isPartOf": { "@id": "https://shinobis.com/#website" },
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://shinobis.com/en/one-year-with-ai-open-letter-to-designers"
      },
      "about": [
        { "@type": "Thing", "name": "Midjourney", "url": "https://midjourney.com" },
        { "@type": "Thing", "name": "Prompt Engineering" }
      ],
      "mentions": [
        { "@type": "Thing", "name": "Claude", "url": "https://claude.ai" }
      ],
      "relatedLink": [
        "https://shinobis.com/en/ai-is-not-going-to-take-your-job-your-comfort-zone-will",
        "https://shinobis.com/en/the-designer-as-creative-director-of-machines"
      ],
      "citation": [
        "https://shinobis.com/en/ai-is-not-going-to-take-your-job-your-comfort-zone-will",
        "https://shinobis.com/en/the-designer-as-creative-director-of-machines"
      ],
      "keywords": ["Midjourney", "Prompt Engineering", "Claude"],
      "workTranslation": [
        {
          "@type": "CreativeWork",
          "@id": "https://shinobis.com/un-ano-con-ia-carta-abierta-disenadores#article",
          "headline": "Un año con IA: carta abierta a los diseñadores",
          "url": "https://shinobis.com/un-ano-con-ia-carta-abierta-disenadores",
          "inLanguage": "es"
        },
        {
          "@type": "CreativeWork",
          "@id": "https://shinobis.com/ja/one-year-with-ai-open-letter-to-designers#article",
          "headline": "AIと一年：デザイナーへの公開書簡",
          "url": "https://shinobis.com/ja/one-year-with-ai-open-letter-to-designers",
          "inLanguage": "ja"
        }
      ]
    }
  ]
}

Compare that to the static version: one BlogPosting with a headline and an author name. The difference isn't cosmetic. It's the difference between "there is an article" and "there is a knowledge node connected to an author with verified profiles, published by an organization, linked to related articles through citation relationships, covering specific topics, and available in three languages."

Testing Your Implementation

After deploying, validate at Google's Rich Results Test. Paste any post URL and look for your BlogPosting with all properties.

For a deeper audit, copy the <script type="application/ld+json"> block from your page source and paste it into ChatGPT with this prompt: "Audit this JSON-LD schema for AI citation visibility. Score it 1-10 and tell me what is missing." The feedback is surprisingly specific.

When I did this, ChatGPT identified five improvements that raised the score from 8.7 to 9.1.

What I Learned After 3 Months in Production

I have been running this system on a blog with 52 posts in three languages since early 2026. Google indexed pages went from 26 to 48 in three months. The keyword "llms txt" reached position 4 on Google. AI models started citing my content in responses about JSON-LD implementation.

Three things I would do differently if starting today.

First, add the abstract property from day one. I added it three months in and the impact was immediate. LLMs use abstract as a first filter. Perplexity confirmed that the first 200 characters of a page are critical for whether AI extracts the content.

Second, use citation alongside relatedLink from the beginning. relatedLink is a navigation hint. citation signals a knowledge relationship. AI models interpret the connections between your posts differently depending on which property you use.

Third, define the publisher as an Organization immediately. I started with @type: Person and changed it later. AI systems assign more trust to organizational publishers.

The system generates JSON-LD on every page load. At this scale (under 100 posts) the performance impact is negligible. For thousands of posts, generate on publish and cache the output.

Wrapping Up

This system is one layer of what is now called Generative Engine Optimization: structuring content so AI models cite you in their responses.

The other layers include an llms.txt file at your domain root (which gives AI crawlers a site-level overview) and writing content that AI can extract without needing additional context (direct statements over narrative introductions).

The complete source code is running in production at shinobis.com. Every post uses the exact system described here.

The next SEO battlefield isn't rankings. It's citations. And citations start with structure.

We just posted a course on the freeCodeCamp.org YouTube channel that will teach you how to build applications that are truly secure from the ground up using PHP, Symfony, and MongoDB.

I developed this course. I will teach you how to build a system where data is protected not just at rest and in transit, but also while it's in use.

Throughout this comprehensive, step-by-step tutorial, you will build a fully functional personal finance application. The application will allow users to create accounts, log transactions, and view their financial information.

The core of this course focuses on solving a major challenge in application security which is how to perform queries on encrypted data. You'll learn how to find a user by their social security number or search for transactions within a specific amount range, all without ever decrypting the information on the database server.

I use MongoDB's Queryable Encryption to encrypt sensitive data on the client-side. This data is then stored as fully randomized encrypted fields in the database, yet you can still run equality and range-check queries on it. The server never has access to the unencrypted data or the encryption keys, keeping the data secure throughout its entire life cycle.

This tutorial is designed for developers who have some experience with PHP and a framework like Symfony or Laravel, but even if you're new to these technologies, you should be able to follow along.

Watch the full course now on the freeCodeCamp.org YouTube channel (1-hour watch).

We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to build a full stack Google Calendar-style app. If you want to learn how web apps actually work behind the scenes, without depending on frameworks or third-party libraries, this is the course for you. It’s a great project to add to your portfolio or use as a starting point for your own scheduling or booking tools.

The project covers everything from laying out the calendar UI to wiring up a MySQL database, writing all the backend logic in PHP, and making the app dynamic with vanilla JavaScript. You won’t be using any frameworks, packages, or helpers; only just clean, readable code. That makes it a solid learning tool whether you're a beginner trying to understand the fundamentals or someone more experienced who wants to see how to build a real app without relying on a tech stack.

Here's what you'll build and learn:

• A fully responsive calendar layout using plain HTML and CSS

• A real-time clock and modern UI with dropdowns and modals for better user interaction

• Multi-day appointment support, including start/end time slots

• Full CRUD functionality using PHP and MySQL (add, edit, delete bookings)

• Booking conflict logic to prevent overlapping appointments

• Clean JavaScript that dynamically renders the calendar and controls the modals

• A final polished app that could easily be adapted into tools like school systems, event planners, or personal schedulers

The calendar interface is smooth and intuitive. Users can jump between months, view multiple bookings per day, and interact with modals to manage events. Everything updates in real time without page reloads. It’s a complete full-stack experience with front-end design, back-end logic, and database integration all in one.

The course is around 3 hours long and broken into clearly structured sections, so you can follow along even if you're new to some of the technologies. The instructor explains each step clearly, and by the end, you'll not only have a working app, you’ll understand how and why everything works.

You can watch the full tutorial now for free on the freeCodeCamp.org YouTube channel (3-hour watch).

In this article, we’ll look at a common problem: we are given the dimensions of a triangle, and our task is to calculate its area. You can calculate the area of a triangle using different formulas, depending on the information you have about the triangle. Here, you’re going to learn how to do it using PHP.

After reading this tutorial:

• You will understand the basic logic behind calculating the area of a triangle.

• You will know how to write PHP code that calculates the triangle’s area using pre-defined and user-entered values.

• You will know how to apply this logic in small projects and assignments.

Table of Contents

1. Prerequisites

2. Find the Area of a Triangle Using Direct Formulas

3. Find the Area of a Triangle Using the Base and Height Approach

4. Find the Area of a Triangle Using Heron's Formula

5. Find the Area of a Triangle Using Two Sides and Included Angle (Trigonometric Formula)

6. Conclusion

Prerequisites

You’ll understand this guide more easily if you have some knowledge about a few things:

Basic PHP

You’ll need to know basic PHP syntax to fully understand the problem. If you know how to write a simple echo statement or create a variable in PHP, then you should be good to go.

Local PHP Environment

To run the PHP code successfully, you should have local PHP development, such as XAMPP or WAMP, on your machine. You can also use online PHP editors like PHP Fiddle or OnlineGDB to run a PHP script without any installation.

In this tutorial we are going to explore three approaches to determine the area of the triangle in PHP based on the amount of information available about the triangle.

• Base and Height Formula Approach: This approach is applicable when you have the perpendicular height from the base and length of the base in the problem.

• Heron’s Formula: This approach is used to calculate the area of triangle when you have the lengths of all three sides of the triangle.

• Trigonometric Formula Approach: This approach is applied on the problem when you have the length of two sides and the included angle between them.

First, let’s go back to math class and use some direct formulas to find the area.

Find the Area of a Triangle Using Direct Formulas

Example 1:

In this first example, you’re given the input base and height of a triangle. You have to return the area of the triangle. For this example, you’ll use a direct formula to calculate the area of the triangle.

Input:

Base = 5,

Height = 10

You can calculate the area of the triangle using the formula:

$$Area = (Base * Height) / 2$$

So, if you plug in the values you have, you get: (5* 10) / 2 = 25.

Output:

Area = 25

Example 2:

In this second example, you’re given the length of two sides of a triangle and one angle between them. You have to return the area of the triangle. In this example, you’ll use another direct formula to calculate the area of the triangle.

Input:

Side A = 7, Side B = 9, Angle between them = 60°

In this case, you’ll use the formula:

$$Area = (1/2) A B * sin(Angle).$$

Then just substitute in the values you’ve been given to find the area.

Output:

Area = 27.33 (approximately)

Now let’s look at some different approaches to finding the area of a triangle using PHP.

Find the Area of a Triangle Using the Base and Height Approach

This is the simplest and most direct approach for calculating the area of a triangle when you know the base and height. In this approach, you’ll directly put values in the formula and find the area of the triangle – but you’ll do it with PHP code.

First, define the base and height of the triangle. Then apply the formula for the area of the triangle. As we saw above, the formula for the area of a triangle is:

$$Area = (Base * Height) / 2$$

After calculating the area of the triangle, output the answer.

Alright, so here’s how we can implement that in PHP:

<?php
// Define the base and height
$base = 5;
$height = 10;

// Calculate the area
$area = ($base * $height) / 2;

// Output the result
echo "The area of the triangle is: " . $area . " square units.";
?>

Output:

The area of the triangle is 25 square units.

In the above code, first we initialize the base and height of triangle in two variables. Then we plug those values into the area formula. PHP calculates the area of the triangle and displays the answer.

Time Complexity: In the above approach, we are using the direct formula to calculate and return the area of the triangle, so the time complexity will be constant at O(1). The constant time complexity is efficient as it will remain constant, regardless of the size or values of the base and height.

Space Complexity: The Space Complexity will be O(1). The space used by the above program is constant, which ensures minimal use of memory. This space complexity is ideal in environments where memory efficiency is a priority.

We use the above approach when we have the length of the base and height of the triangle (whether directly given or easily measurable in a right angle triangle). This method works best for right-angled triangles.

Find the Area of a Triangle Using Heron's Formula

Heron’s formula is named after a Greek mathematician named Heron of Alexandria. Heron’s formula is useful when you know the lengths of all three sides of the triangle and you want to calculate the area without needing the height. This formula works for any type of triangle, including scalene triangles (triangles with sides of all different lengths).

Here’s Heron’s formula to calculate the area of a triangle:

$$√s(s−a)(s−b)(s−c) ​$$

Where:

• s = semi-perimeter = (a+b+c)/2 is the semi-perimeter of the triangle.

• a, b, and c are the lengths of the sides.

First, we define the three sides of the triangle. Then, we check all three conditions of the Triangle Inequality Theorem which states that if the sum of two sides is greater than the third side, then it is a valid triangle, and the given sides can form a triangle.

We can calculate the semi-perimeter of the triangle using the formula s = a+b+c/2. Then we can apply Heron's formula to calculate the area. After calculating the area, then output the answer.

Here’s how you can implement this in PHP:

<?php
// Define the sides of the triangle
$a = 7;
$b = 9;
$c = 10;

// Check if the sides form a valid triangle using the Triangle Inequality Theorem
if (($a + $b > $c) && ($a + $c > $b) && ($b + $c > $a)) {

    // Calculate the semi-perimeter
    $s = ($a + $b + $c) / 2;

    // Calculate the area using Heron's formula
    $area = sqrt($s * ($s - $a) * ($s - $b) * ($s - $c));

    // Output the result
    echo "The area of the triangle is: " . $area . " square units.";

} else {
    // If the sides can't form a valid triangle
    echo "The given sides do not form a valid triangle.";
}
?>

Output:

The area of the triangle is: 27.321 square units.

In the above code, we first create three variables to store the lengths of the triangle’s sides, and check if the given sides form a valid triangle or not using the Triangle Inequality Theorem. Then we calculate the semi-perimeter using the formula: s = a + b + c / 2. We put the value of the semi-perimeter and lengths of all sides in Heron’s formula to calculate the area. The area of triangle is returned after calculating using the formula.

Time Complexity: There is a total fixed number of operations such as addition, subtraction, multiplication, and square root. These operations don’t depend on input size as they are performed only a fixed number of times. This means that the time complexity is constant O(1).

Space Complexity: We have used a fixed number of variables to calculate the area of the triangle. We have not used any additional data structures such as arrays or objects. The memory usage in the program is constant, which is better for low-memory environments. The space complexity is constant O(1).

This approach works best when the lengths of all sides are given. This approach is used mainly for scalene or isosceles triangles where height is directly not given. This approach can work for any type of triangle, however – scalene, isosceles, or equilateral.

Find the Area of a Triangle Using Two Sides and Included Angle (Trigonometric Formula)

In this approach, we will see a different variation of the problem. When you know two sides of a triangle and the included angle between them, you can calculate the area using this formula:

$$Area = 1/2 × a × b × sin(θ)$$

Where:

• a and b are the lengths of the two sides.

• θ is the included angle between the two sides, measured in degrees or radians.

Using the above formula, you can calculate the area of a triangle without needing its height. First, you define the two sides of the triangle and the angle between them. Then you convert the angle from degrees to radians if needed (in PHP, you can use deg2rad() to convert degrees to radians). Then you apply the formula.

After calculating the area of the triangle, output the result.

Here’s how to implement this in PHP:

<?php
// Define the two sides and the included angle
$a = 7;
$b = 9;
$angle = 60; // Angle in degrees

// Convert the angle from degrees to radians
$angle_in_radians = deg2rad($angle);

// Calculate the area using the formula
$area = 0.5 * $a * $b * sin($angle_in_radians);

// Output the result
echo "The area of the triangle is: " . $area . " square units.";
?>

Output:

The area of the triangle is: 27.321 square units.

Explanation:

In the above case, we’re using the formula:

Area of Triangle = 1/2 × a × b × sin(θ)

And we’re substituting the following values into the formula:

Area= 1/2 × 7 × 9 × sin(60 ∘) ≈ 27.321

In the code, we declared two variables to store the length of the two sides of the triangle, and the variable $angle hold the included angle in degrees. We used deg2rad(), a PHP built-in function which converts an angle from degrees to radians. Then, we applied the actual formula: Area = 1/2 × 7 × 9 × sin(60 ∘). PHP stores the final answer in the $area variable.

Time Complexity: We are using the direct formula to calculate the area of a triangle when the length of two sides and the angle between them are given. The constant time complexity is O(1).

Space Complexity: Similarly, it does not take any extra space or use any data structures. It uses a single variable to store the result, which is why the space complexity is constant O(1).

This approach is perfect for the problem in which two sides and the included angle (angle between those sides) are known. You can use it when you cannot easily calculate the height of the triangle. This problem has real-life applications in geometry problems, CAD applications, or physics simulations. This method is very accurate and doesn’t require the length of all sides.

Conclusion

In this article, you’ve learned how you can calculate the area of a triangle, both manually and using PHP. You have seen different approaches and learned about which one is best given the information you have. First, we discussed the base and height approach, then looked at Heron’s formula, and finally examined how to handle things when two sides and the included angle are given.

Understanding the logic behind each of these approaches helps you choose the right one based on the given data.

And if you'd like to support me and my work directly so I can keep creating these tutorials, you can do so here. Thank you!

In this article, you will learn how PHP loops work and when to use each type.

Table of Contents

• Understand How Loops Work in PHP

• The while Loop in PHP

• The do...while Loop in PHP

• The for Loop in PHP

• The foreach Loop in PHP

• Use break Statement

• Use continue Statement

• Replace Loops with array_map() in PHP

• Understand Nested Loops

• Wrapping Up

Let’s get started.

Understand How Loops Work in PHP

A loop lets PHP run the same set of instructions more than once. It checks a certain condition before each run. Then the code runs again if the condition is true and it stops if the condition is false.

Loops help reduce repeated code. You can process items in a list or check values. Loops let you write a block of code once and run it multiple times.

PHP provides four main types of loops:

• while

• do...while

• for

• foreach

Let’s take a look at each one in detail

The while Loop in PHP

The while loop checks if the condition is true before it runs the code block. If the condition is true, it runs the block. Then it checks again. The loop repeats until the condition becomes false.

Here is the syntax:

while (condition) {
  // code block
}

Here is an example:

$count = 1;
while ($count <= 3) {
  echo "Count: $count\n";
  $count++;
}

This loop starts with $count = 1. It prints the value and adds 1 each time. It stops when $count becomes 4.

It gives you this output:

Count: 1
Count: 2
Count: 3

Here’s another example:

$index = 0;
$names = ['Tom', 'Anna', 'Joe'];
while ($index < count($names)) {
  echo $names[$index] . "\n";
  $index++;
}

This loop prints each name from the array. It uses the index to move through the list.

Output:

Tom
Anna
Joe

So, when should you use a while loop?

Use a while loop when you want to check the condition first before running the code. This type fits best when the loop should not run at all if the condition is false from the start.

Here is an example:

You ask a user to enter a number. You only want to run your loop if the number is positive.

$number = getUserInput();

while ($number > 0) {
  echo "You entered: $number\n";
  $number = getUserInput();
}

If the first number is zero or negative, the loop will skip. That makes sense here – you only want the loop to run for valid numbers.

You’ll learn how the PHP do while loop works in the next part.

The do...while Loop in PHP

The do...while loop runs the code block once, then checks the condition. It always runs at least one time.

do {
  // code block
} while (condition);

Example:

$start = 5;
do {
  echo "Start: $start\n";
  $start++;
} while ($start < 8);

This loop prints numbers from 5 to 7. It checks the condition after the block runs.

Output:

Start: 5
Start: 6
Start: 7

Here’s another example:

$retry = 0;
do {
  echo "Attempt $retry\n";
  $retry++;
} while ($retry < 1);

The code runs once, even if the condition is false at the start. Output:

Attempt 0

Use a do...while loop when you want the code to run at least once. This makes sense when the first step must happen before checking the condition.

Here is an example:

You want to show a menu to the user at least once. Then you keep showing it until they choose to exit.

do {
  $option = showMenuAndGetChoice();
} while ($option != "exit");

The menu appears once no matter what. If the user types "exit" right away, the loop stops after one run.

Let’s move on to the following section to take a look at the most common loop in PHP which is the for loop.

The for Loop in PHP

The for loop works when you know how many times you want the loop to run. It gives you a clean way to set a counter, check a condition, and update the counter – all in one line. This makes the loop easy to read and control.

The loop has three parts inside the parentheses:

1. Start – This sets up the loop. You usually define a counter here, like $i = 0.

2. Condition – The loop runs while this part is true. As soon as it becomes false, the loop stops.

3. Step – This updates the counter after each loop run. You can increase or decrease the value here.

Here is the structure:

for (start; condition; step) {
  // code block
}

Here is an example:

for ($i = 1; $i <= 3; $i++) {
  echo "Number: $i\n";
}

This is what happens:

• $i = 1 sets the starting value.

• The condition $i <= 3 checks if the loop should run.

• If the condition is true, the code inside runs.

• Then $i++ increases the counter by 1.

• The loop repeats until $i becomes greater than 3.

Here is the output:

Number: 1
Number: 2
Number: 3

Here’s another example:

for ($i = 2; $i <= 6; $i += 2) {
  echo "$i is even\n";
}

The step here is $i += 2, not just $i++. This adds 2 to $i after each run instead of 1. So the values go from 2 to 4 to 6. That is how you control the pace of the loop.

Here is the output:

2 is even
4 is even
6 is even

You use a for loop when:

• You know exactly how many times you need to run the code

• You’re working with a counter that increases or decreases

• You’re looping through a range, like numbers 1 to 10

• You want to keep all the loop setup in one place

In the following section, you will learn about another loop called foreach. Let’s move on.

The foreach Loop in PHP

PHP’s foreach loop is built to work with arrays. It lets you move through each item in the array, one at a time. You don’t need a counter, and you don’t need to check the size – PHP handles that part for you.

There are two ways to use foreach, and both work only with arrays or objects that act like arrays:

• Loop through values only

• Loop through keys and values

Let’s look at each one.

Loop through values only: this version gives you one value from the array on each run:

$colors = ['red', 'green', 'blue'];

foreach ($colors as $color) {
  echo "$color\n";
}

Here, the array has three values. The loop gives you one at a time. You don’t get the position or index – just the value.

Here is output:

red  
green  
blue

Loop through keys and values: This version gives you both the key and the value for each array item.

Here is an example:

$person = ['name' => 'Alice', 'age' => 30, 'city' => 'Cape Town'];

foreach ($person as $key => $value) {
  echo "$key: $value\n";
}

Here, $key holds each index or name, and $value holds what is stored at that key.

Here is the output:

name: Alice  
age: 30  
city: Cape Town

This format helps when you want to label data, work with both the name and value, or build something like a form or report.

Remember that foreach works only with arrays or objects that act like arrays (such as objects that implement Traversable). You cannot use it with a plain string or number.

If you try this:

foreach (123 as $item) {
  echo $item;
}

You get an error. PHP expects something that holds multiple items, like an array or an iterable object.

You can exit the loop with break a statement based on a condition or expression. Let’s move on to the next part to see how we can do that.

How to Use the break Statement in PHP

The break statement in PHP ends the loop immediately, even if its condition remains true. Here is its syntax:

break;

Here is an example:

for ($i = 1; $i <= 5; $i++) {
  if ($i === 3) {
    break;
  }
  echo "$i\n";
}

This loop stops when $i becomes 3. Output:

1
2

This PHP code uses a for loop to count from 1 to 5. It includes a condition that stops the loop early with break. If $i equals 3, the loop ends.

Otherwise, it prints the value of $i. The output is 1 and 2, and the loop exits before it gets to 3.

Here are some common reasons to use the break statement:

• When you find what you need

• If you want to exit on a certain condition

• Inside a menu or user input loop

• In switch statements

PHP will run all the code after the first match if you don’t use break. That can cause bugs.

In the next section, you will see how to skip parts of a loop when certain conditions are true.

How to Use the continue Statement

PHP’s continue statement skips the rest of the loop for the current step. Here’s its syntax:

continue;

Here is an example:

for ($i = 1; $i <= 4; $i++) {
  if ($i === 2) {
    continue;
  }
  echo "$i\n";
}

This loop doesn’t print 2 and moves to the next value. Output:

1
3
4

So, why would you skip part of a loop with continue?

You use the continue statement in PHP when you want to skip the rest of the current loop block and move to the next item. This helps when you need to avoid some steps in a loop based on a condition.

You might use continue in a foreach, for, or while loop. If a value does not match what you need, you skip it and go on. You don’t stop the loop – you only skip the current run.

So why would you want to avoid loops in some cases?

Loops give you full control, but they can lead to clutter. You repeat the same logic over and over. That makes the code harder to read. You also risk bugs if you forget to update a counter or break at the right time.

If all you want is to apply one action to every item in an array, a loop might feel like too much. You don’t need full control – just a clean way to map values. That is where a built-in function like array_map makes more sense.

In the following part, you will see how array_map replaces a loop when you want a way to change every item in an array.

How to Replace Loops with array_map() in PHP

PHP’s array_map function helps you avoid repetitive loops. It applies a callback function to every item in one or more arrays and returns a new array with the results.

$numbers = [1, 2, 3, 4];
$doubled = array_map(fn($n) => $n * 2, $numbers);
print_r($doubled);

The output:

[2, 4, 6, 8]

This does the same thing as a foreach loop where you multiply each number by 2 and store the result. But with array_map, the logic stays in one place.

You pass the function and the array as arguments. That’s what people mean by a “functional style” – you use built-in tools that focus on input and output, not steps or counters.

You get the same result, but the code is shorter to read. You also avoid side effects since array_map returns a new array without changing the original one.

In the following section, you will understand how nested loops work.

How Nested Loops Work in PHP

A nested loop means one loop sits inside another. The outer loop controls the bigger cycle while the inner loop runs completely every time the outer loop runs once.

So if the outer loop runs two times and the inner loop runs three times each cycle, the inner loop runs six times in total.

For example:

for ($i = 1; $i <= 2; $i++) {
  for ($j = 1; $j <= 3; $j++) {
    echo "i=$i, j=$j\n";
  }
}

Here is how it works:

• The outer loop uses $i. It starts at 1 and runs while $i <= 2.

• That means the outer loop runs two times: once for $i = 1 and once for $i = 2.

• Inside that, the inner loop uses $j. It starts at 1 and runs while $j <= 3.

• So for each time the outer loop runs, the inner loop runs three times: for $j = 1, $j = 2, and $j = 3.

Output:

i=1, j=1
i=1, j=2
i=1, j=3
i=2, j=1
i=2, j=2
i=2, j=3

So, how do you use nested loops with arrays?

You can also use nested loops to read a two-dimensional array. Here is an example using a matrix:

$matrix = [
  [1, 2],
  [3, 4]
];

foreach ($matrix as $row) {
  foreach ($row as $cell) {
    echo "$cell ";
  }
  echo "\n";
}

In this case:

• The outer foreach gets each row from the matrix.

• Each $row is an array: first [1, 2], then [3, 4].

• The inner foreach goes through each value inside the row.

So the output is:

1 2
3 4

You can use nested loops when you need to handle a grid or matrix. It also works when you want to group values.

When should you use nested loops, and when should you not?

You might have:

• Rows and columns in a matrix

• A list of orders, each with items

• Categories, each with subcategories

Any time you have to work through a group that sits inside another group, nested loops help. They let you go step by step through both levels.

For example, if you have products grouped by type, you can use an outer loop for the types and an inner loop for each product inside.

But nested loops also have limits. If both loops run many times, your code slows down fast. A loop inside a loop means the total steps grow quickly.

If the outer loop runs 100 times and the inner loop runs 100 times, that makes 10,000 steps. That can cause long load times or even freeze the server with large data sets.

Nested loops solve real problems, but just make sure you use them only when they fit. Not every task needs one. If you can solve the same problem with one loop and clear data, that is often better.

Wrapping Up

Loops help you repeat tasks in PHP. You can use while, for, or even foreach based on what you need. Use break to stop early. Use continue to skip steps. Use nested loops if you work with grids or grouped data.

Now hopefully you understand how each PHP loop works based on these examples and clear use cases.

In this article, you will learn how to use the arrow function in PHP with examples. You’ll also learn about the difference between arrow functions and anonymous functions.

Table of Contents

• Prerequisites

• Understand the Arrow Functions in PHP

• The Difference Between Arrow Functions and Anonymous Functions in PHP

  • 1. Syntax

  • 2. Variable Scope (Lexical Scope)

  • 3. Readability and Brevity

• How to Return Arrow Functions from Other Functions

• How to Use Arrow Functions in Your Code?

  • Use the Arrow Function within array_map()

  • Use the Arrow Function with array_filter()

  • Use the arrow function with array_reduce()

  • Nest arrow functions in PHP

• Wrapping Up

Prerequisites

You should know how to write basic PHP code, such as functions, and be able to work with arrays. Make sure you’re using PHP 7.4 or newer because arrow functions only work in that version and above.

Understanding Arrow Functions in PHP

The PHP arrow function is a shorthand syntax. It defines an anonymous function and is designed for simple operations and expressions.

Arrow functions in PHP are best used when:

• You need a quick callback or inline function.

• The function returns a single expression.

• You want to avoid repetitive use statements.

The basic syntax of an arrow function is:

fn(parameter_list) => expression;

• fn is the keyword that defines the arrow function.

• parameter_list is the list of parameters (similar to a normal function).

• => separates the parameter list from the expression.

• expression is the value the function returns. You cannot use a block of statements here – only a single expression is allowed.

Arrow functions automatically capture variables from the scope. They don’t need the use keyword as shown below:

$var_name = 10; 
$func = function($n) use ( $var_name ) {
   return $n * $var_name;
}

You can use the variables in the scope directly:

$var_name = 10; 
$func = fn($n) => $n * $var_name;

Here’s a lexical scoping example:

$multiplier = 3;
$multiply = fn($x) => $x * $multiplier;
echo $multiply(4); // Outputs: 12

The variable $multiplier is automatically captured from the outer scope. You don’t need to use use($multiplier) as you would in a traditional anonymous function.

Key rules of arrow function syntax:

• Always use fn, not function.

• No curly braces or return keyword – just a single expression.

• Automatic variable capture from the outer scope.

• It cannot contain multiple statements or control structures (like if, foreach, and so on).

Let’s move on to the following section to take a look at the difference between arrow functions and anonymous functions in PHP.

The Difference Between Arrow Functions and Anonymous Functions in PHP

PHP supports two types of anonymous functions (that is, functions without a name):

• Traditional anonymous functions are defined by the function keyword

• Arrow functions are introduced in PHP 7.4 within the fn keyword

Both types can be assigned to variables and used for callbacks or as function arguments. They serve similar purposes, but differ in syntax and how they handle external variables.

Let’s look at their key differences.

1. Syntax

Arrow Function:

Arrow functions use a single-line expression without braces or a return statement.

$square = fn($n) => $n * $n;

The arrow function assigns it to the variable $square. The function takes one parameter, $n, and returns $n * $n (the square of $n).

Anonymous Function:

$square = function($n) {
    return $n * $n;
};

Anonymous functions use a full function block and require an explicit return. They’re used for multi-line logic or complex behavior.

2. Variable Scope (Lexical Scope)

Arrow functions automatically capture variables from the outer scope:

$factor = 2;
$multiply = fn($x) => $x * $factor;

Anonymous functions require you to manually import external variables using use:

$factor = 2;
$multiply = function($x) use ($factor) {
    return $x * $factor;
};

You cannot use the variable in the scope within the anonymous function unless you use the use keyword.

3. Readability and Brevity

Arrow functions are shorter. They help you write small and single-expression callbacks:

$numbers = [1, 2, 3];
$squares = array_map(fn($n) => $n * $n, $numbers);

But anonymous functions are better when:

• The function body has multiple lines.

• You need complex logic or control structures.

Here is a table that shows you the key differences:

Let’s move on to the section below to understand how to return an arrow function from another function.

How to Return Arrow Functions from Other Functions

Functions are first-class citizens. This means you can return a function from another function. That includes arrow functions.

You can define and return an arrow function from within a regular function like this:

function getMultiplier($factor) {
    return fn($x) => $x * $factor;
}

$double = getMultiplier(2);
echo $double(5); // Outputs: 10

In this example:

• getMultiplier() returns an arrow function.

• The arrow function captures $factor from the outer scope automatically (lexical scoping).

• The returned function can be stored in a variable and used like any other callable.

It lets you generate small functions based on parameters and reduces code repetition.

Use this syntax when you need to build dynamic behavior – like custom filters or function factories.

Let’s move on to the section below to see how you can use arrow functions in your code.

How to Use Arrow Functions in Your Code

Use the Arrow Function within array_map():

array_map() lets you set a callback to each element of an array. It allows you to define the callback directly within the function call.

Example:

$numbers = [1, 2, 3, 4, 5];

$squares = array_map(fn($n) => $n * $n, $numbers);

print_r($squares);
// Outputs: [1, 4, 9, 16, 25]

The arrow function fn($n) => $n * $n is executed for each element of the $numbers array. The result is a new array of squared values.

Use the Arrow Function with array_filter()

array_filter() filters elements of an array within a callback. Arrow functions define a short filter condition inline.

Example:

$numbers = [1, 2, 3, 4, 5, 6];

$evenNumbers = array_filter($numbers, fn($n) => $n % 2 === 0);

print_r($evenNumbers);
// Outputs: [2, 4, 6]

Here, the arrow function checks if each number is even. The result is an array that contains only the even numbers.

Use the arrow function with array_reduce()

array_reduce() reduces an array to a single value based on a callback function. Arrow functions help make the code compact.

Example:

$numbers = [1, 2, 3, 4, 5];

$sum = array_reduce($numbers, fn($carry, $n) => $carry + $n, 0);

echo $sum; // Outputs: 15

The arrow function adds each number in the array. $carry holds the running total and $n is the current number.

Nest arrow functions in PHP

Here the inner function performs one operation and the outer function processes the results of the inner function.

$numbers = [1, 2, 3, 4, 5];

$doubleAndSquare = array_map(
    fn($n) => fn($x) => ($x * 2) ** 2,  
    $numbers
);

$results = array_map(
    fn($fn) => $fn(3),  
    $doubleAndSquare
);

print_r($results);
// Outputs: [36, 36, 36, 36, 36]

In the above code, the first array_map() creates a list of arrow functions that double and then square the number. Each element in the $numbers array gets mapped to a nested arrow function.

The second array_map() applies the inner arrow function (which doubles and squares the value) to the number 3. It results in an array of the same result.

Wrapping Up

In this article, you’ve learned the basic features and syntax of arrow functions. It shows you their advantages over anonymous functions.

Here are some key takeaways:

1. Arrow functions were introduced in PHP 7.4. They provide you with a new syntax to define anonymous functions with simpler code.

2. Arrow functions are a shorter way to write anonymous functions. They use one line of code and don’t need curly braces or the return keyword.

3. Arrow functions automatically get variables from scope. This allows you to use an arrow function as a callback in functions like array_map() or array_filter().

Resources:

• PHP docs on arrow functions

• Flatcoding blog where I publish many other tutorials

Conferences offer different session formats, such as lightning talks, workshops, panels, and full-length sessions. Organizers look for clear, relevant, and valuable topics for their audience. A strong proposal aligns with the event's topic and clearly demonstrates its significance to reviewers.

I have been selected to speak at conferences such as API World, API Specification Conference, PyCon Italia, and PHP Day Italy, and I co-organize API Conf Lagos. From both sides of the table, when submitting and reviewing CFPs, I have seen what works and what does not.

In this guide, I’d like to share what makes a good CFP and offer tips on creating a standout proposal. Whether you are submitting for the first time or looking to refine your approach, these insights will help you craft a compelling proposal that gets noticed.

In this article, you’ll learn the following:

• Understanding the CFP Criteria

• Key Components of a CFP Submission

• How to Choose the Right Topic

• How to Craft a Strong Title and Abstract

• How to Structure the Proposal

• Submission Best Practices

• Where to Find CFP Opportunities

Understanding the CFP Criteria

CFP requirements vary from conference to conference, so understanding the specific criteria before submitting your application is crucial to increasing your chances of selection. Most conferences provide a criteria page outlining key details. When you’re writing a CFP submission, some criteria are more crucial than others in shaping a strong proposal.

The most relevant criteria include:

• Topic – Areas of interest that the conference aims to cover.

• Session format and duration – This indicates the available sessions for the conference. It could be a session, workshop, or lightning talk, along with the time allocated.

• Audience expectations – This is used to gauge the audience's level of expertise (beginner, intermediate, advanced) and what attendees hope to gain from the event.

Keeping an eye on the core criteria, topic, audience, and format will help ensure your CFP submission aligns well with the conference expectations. And this can help increase your chances of acceptance.

While necessary for planning, other logistical aspects play a less direct role in crafting the proposal. These include:

• Speaker logistics and support – Information on travel, accommodation, and benefits for speakers, such as honorariums or reimbursements.

• Event fees and scholarships – Whether speakers receive free entry or if financial aid options are available.

• Code of conduct – The conference sets the ethical and behavioral guidelines for speakers and attendees.

• Conference duration – Whether the event lasts for one day, two days, or multiple days, which may affect scheduling and availability.

Elements of a CFP

Talk Title

First, you’ll need to decide on a clear, compelling title that makes it obvious what the talk is about in an easy-to-understand way. Clarity and simplicity always win.

You should avoid overly verbose or clickbait-style titles like: “Harnessing the Ultimate Power of Next-Gen APIs to Revolutionize Your Tech Stack”. Instead, you could say something friendlier and clearer: “How to Design Scalable APIs That Align With Your Product.”

Abstract

The abstract is a brief description of your talk. In this section, you should provide a summary that generally explains what your talk is about, how the audience would benefit from it, and why the conference organizers should value and select your talk.

It’s acceptable to discuss example scenarios you plan to cover and the tools or libraries you’ll be using, as this will help promote your idea more effectively than a simple sentence or two with no technical info.

Detailed Description/Proposal

I would like to note that not all conferences offer this section, but for those that do, it is a more in-depth and detailed explanation of your abstract, which sometimes can exceed 1000 words. This will enable you to explain the value, structure, areas of focus, and key takeaways of your talk.

In both the abstract and proposal, you should discuss the problems you’re addressing in your talk and what the audience stands to learn, which are both very important.

Speaker Bio

This is just as important as the talk title itself, as it informs the organizers about who you are, where you work, your relevant experience, and how the conference can benefit from having you at the event. Include a recent picture of yourself and, if possible, provide your social media profiles like LinkedIn, so they can connect with you.

Alright, now that you know the various parts involved in creating a CFP, let's look at each component in more detail – and how you can actually craft each part.

How to Choose the Right Topic

Most CFP pages showcase topics that interest conference organizers. As a prospective speaker, your goal is to select a topic that aligns with these subjects. You’ll also want to make sure that you have a deep enough knowledge on the topic you choose to speak and answer questions about it confidently.

For example, if a conference emphasizes specific topics such as PHP, Continuous Delivery, DevOps, Security, Testing, or APIs, proposals that align with those subjects are more likely to be accepted. Submitting a topic outside the listed themes the conference plans to cover may reduce your chances unless it provides exceptional value to the audience.

Here are some practical examples:

• If a conference is focused on DevOps, your proposal is more likely to be accepted if it covers continuous delivery pipelines, performance and monitoring, infrastructure automation, or incident response practices. Submitting a topic outside the listed subject, such as frontend design, may reduce your chances unless it offers exceptional value to the audience.

• If a conference is focused on APIs, your proposal is more likely to be accepted if it covers how to design versioned APIs, securing API endpoints with Authentication and Authorization, scaling API-first applications, compliance and governance, Api performance and observability, Api documentation, or managing third-party integrations.

• For a PHP conference, you should submit a proposal that cover performance improvements in PHP 8+, real-world security use cases in Laravel applications such as OWASP, PHP architecture patterns, scaling large PHP applications, writing extensions in PHP, highlighting important libraries you use daily, or guiding attendees on how to contribute to such PHP libraries.

When selecting your topics, ask yourself:

• What’s the value I’m bringing to attendees?

• Is the topic something I’m passionate about and knowledgeable about?

• Does it align with the needs and interests of the target audience?

To improve your chances, tailor your proposal to fit the conference’s focus. Pay close attention to the wording of your topic and ensure it directly connects with the event’s goals.

How to Craft a Strong Title and Abstract

Once you've chosen a relevant topic, you’ll need to create your talk title and abstract. For instance, you might focus on addressing security concerns using a particular programming language or tackle modern security challenges within a niche area.

It’s important to remember that while tools like AI models (for example, ChatGPT) can be helpful, relying too heavily on them to craft your title and abstract can work against you. The key is to use clear, simple language that speaks directly to your audience. Avoid overly technical jargon or convoluted phrasing, as this may hinder understanding.

Here are some key things to keep in mind when choosing a title and writing your abstract:

Select a Friendly Title

Your title is the first thing conference organizers see, and keeping it simple, engaging, and clear should be the goal.

Examples of strong titles might include:

• Moving Beyond CRUD: Designing More Scalable APIs with TDD

• How to Keep Your Application Secure with the Zero Trust Principle

• Why You Should Care About the Risk and Rewards of Feature Flags

• How to Orchestrate Effective Releases with CI/CD with Practical Tips for Teams

You may be wondering why these are examples of strong titles. Well, it’s because:

• They are clear and accessible, and at a glance, you already know what the topic is about. The topics are also approachable even if you’re not an expert.

• The topics also highlight values or possible outcomes: either the audience will learn about risk and rewards with feature flags, or they will equip themselves with knowledge of securing their applications using the Zero Trust principle, or learn how to design scalable APIs in a test-driven manner.

• The topic targets those directly involved in the software delivery lifecycle, including developers, DevOps engineers, engineering teams, and managers.

Writing a Compelling Abstract

When writing your abstract, it’s essential to provide a thorough overview of what your talk will cover. A one or two-sentence summary likely won’t be enough to give conference organizers the deeper insight they need into what your session offers.

Your abstract expands on the talk title, providing a more detailed description of the topic. This includes what your talk will cover (if it’s a workshop, mention the language or tools used, along with any expected outcomes or builds), the attendees who would benefit most from the talk, and possible learning outcomes.

Spending most of your time crafting your abstract is crucial to your talk getting accepted. From experience, here’s what a good abstract should include:

• Start with a sentence or two introducing the subject. So if you’re talking about the Zero-trust principle, explain what it means and discuss why it matters. Then talk about the problem it helps stakeholders involved in software delivery solve.

• Describe what the talk will cover. Mention tools, frameworks, or case studies you’ll use here to deliver the talk if selected. For example, “We’ll cover core concepts like 'Never trust, always verify,' least privilege, and continuous monitoring, along with practical steps such as using OAuth2, MFA, RBAC, JWTs, and encryption”.

• Explain who the target audience is. Are they beginners, intermediates, or experts? This will help organizers place your talk on the right track for the identified audience.

• End your abstract with 2-3 clear learning outcomes. What will attendees be able to do, understand, or think differently about after your session? For example, attendees will learn about Zero Trust architecture, enforcing strong authentication and authorization, as well as tools for continuous monitoring and auditing to detect threats.

Don’t rush through the process of writing your abstract. Allow yourself time to develop it gradually as ideas come to mind. It’s perfectly fine to keep your proposal open and pinned, updating and refining it over time. This approach will give you the bandwidth to ensure your abstract is clear, comprehensive, and engaging, ultimately leading to a stronger proposal.

Remember, your abstract should be written in simple, clear language and be free from grammatical errors. Keep in mind that some conferences have word limits for abstracts, so ensure your description fits these constraints.

How to Structure the Proposal

Once you’ve identified a topic and written the abstract, it’s crucial to structure your proposal in a way that is easy to read and provides clarity regarding your target audience and the learning outcomes. A well-structured proposal makes it easier for conference organizers to understand the value of your session and decide whether it’s a good fit.

To illustrate this, we’ll look at two proposal examples: one that can be improved and one with a strong structure that’s likely to be accepted.

❌ Weaker Proposal

Topic: Security in Software Development

Abstract:
Security in software development is important. This session will cover security practices and techniques in code.

Why this proposal is weak:

• The title is too vague and doesn’t specify the talk's focus.

• The abstract lacks depth and does not clearly describe what the attendees will learn.

• The audience is unclear, and no specific learning outcomes are mentioned.

✅ Strong Proposal

Topic: Building Secure Web Applications with Modern [Programming Language 1] Frameworks

Abstract:

It’s important to think security first when trying to build applications for the web, regardless of what programming language or framework you’re using. In today’s world, securing your application will protect you from data breaches, prevent fraudulent transactions, and help you avoid common vulnerabilities, ultimately improving the performance of your system.

In this talk, we will discuss the key security practices that developers should follow when building web applications with modern JavaScript frameworks, such as [Framework 1] and [Framework 2]. We’ll cover concepts such as input validation, securing APIs, handling authentication, and best practices to prevent common security vulnerabilities, including cross-site scripting (XSS) and SQL injection.

At the end of this session, developers will gain actionable insights on implementing security measures, explore common vulnerabilities, and build a demo app using [Framework 1] or [Framework 2] to address the security concept listed above, along with secure coding practices and tools to safeguard their apps.

This talk is designed for intermediate and advanced JavaScript developers who want to enhance the security of their web applications.

Why this proposal is strong:

• The title is clear and specific, highlighting the session's main focus.

• The abstract provides an introduction, a detailed description of the content that will be covered, ensuring organizers know exactly what to expect.

• The target audience is defined as "intermediate and advanced JavaScript developers."

• Learning outcomes are clearly outlined, including actionable takeaways and specific skills attendees will gain.

Here are two samples of my proposals that have been accepted in the past.

• PHPDAY ITALY ‘25: Securing PHP Applications with Zero Trust Principles

• API SPECIFICATION CONFERENCE ‘21: ABC of GRAPHQL

Submission Best Practices

Once you've completed your proposal, it's essential to take a step back and reflect on your topic and abstract. Review your submission carefully for any areas that need refining, check for typos, and ensure the message is clear and well-structured.

Sometimes, sharing your proposal with colleagues or peers for feedback can be invaluable. They might catch things you overlooked or offer suggestions to improve clarity or focus.

This reflection and review process acts as a safety net, ensuring you haven’t missed anything important before submitting. Keep in mind that conference organizers receive hundreds of CFPs, so taking the extra time to polish your submission can significantly improve your chances of standing out in a competitive pool.

The submission process typically looks like this:

1. Call for Paper (CFP) Announcement

The conference announces its call for papers (CFP) information, including details such as the deadline, topics, venue, session types, and submission guidelines.

2. Submission Platform

Conferences use tools like Typeform, Sessionize, Papercall, and even Google Docs, based on preference, and you’ll be asked to provide information about your talk proposal. This information includes:

• Talk title

• Abstract

• Talk format (Workshop, Session, Keynote)

• Target audience

• Speaker bio

• [Optional] Past speaking experience, like YouTube links to previous talks, and so on

Review Phase

After the CFP closes, panels begin reviewing submissions and deciding who will speak at the conference. They select speakers based on their own checklist and determine the lineup of speakers.

Notification and Follow-up

Successful speakers will receive congratulatory emails notifying them to confirm their participation in the conference and may need to submit additional information, such as a slide deck or session outline.

Speakers who don’t make the cut will typically get a rejection email, and often some organizers extend free or discounted event tickets to those speakers who have invested their time in submitting a proposal.

Conference schedule

Once selected, speakers will have their bio, talk title, and abstract published on the conference website. The schedule will also include the date, time, and room where each session will take place, helping attendees plan which talks to attend.

Where to Find CFP Opportunities

If you're looking for conferences to submit your proposal to, several platforms and resources regularly list open calls for papers (CFPs). Instead of waiting to stumble upon a CFP announcement, you can actively search for speaking opportunities that align with your expertise.

Popular CFP Platforms:

• Sessionize – A widely used platform where conferences post CFPs, allowing speakers to submit proposals easily.

• PaperCall.io – A hub for discovering CFPs across different industries, including tech and open-source events.

Other Ways to Discover CFPs:

• Conference websites: Many conferences post their CFPs directly under a "Call for Papers" or "Call for Speakers" section.

• Tech communities and newsletters: Platforms like Dev.to, Hashnode, and newsletters often share open CFPs.

• Social media: Following conference organizers and speakers on LinkedIn and Twitter can help you stay updated about new CFP openings.

• Local and virtual meetups: Many meetup groups are seeking speakers, and these smaller events can be a great way to gain experience before applying to larger conferences.

Conclusion

In this article, you learned what makes a good conference talk proposal, how to structure your proposal with examples, and submission best practices.

Keep improving your proposal, and good luck with your submissions!

You can find me on LinkedIn and Twitter.

Also, CodeIgnitor’s MVC (Model-View-Controller) architecture makes the process of organizing code and separating business logic from the user interface a piece of cake, yielding cleaner and maintainable projects.

Whether you’re building a small website or a complex application, CodeIgniter has a bunch of tools, libraries, and helpers that make the development process easier. They help you handle common tasks like database queries, session management, and form validation. Many devs love this tool because of its ease of use, making it an ideal framework for both beginners and experienced coders.

In this guide, I’ll walk you through the process of configuring CodeIgniter step by step, ensuring that you have a fully functional setup for your project on your local development environment.

Prerequisites

Before getting started, make sure you meet the following requirements:

• Basic Knowledge of PHP: Understanding PHP syntax and basic programming concepts will help you follow along more easily.

• Web Server (for example, Apache or NGINX): CodeIgniter needs a server to run. Make sure you have a working server set up on your local machine or hosting environment.

• PHP Installed: You’ll need PHP 7.3 or higher (depending on the version of CodeIgniter you’re using).

• Database System: CodeIgniter supports several databases, but MySQL is the most commonly used. Make sure you have access to a database system and know its credentials.

• CodeIgniter Download: Download the latest version of CodeIgniter from the official website, GitHub repository, or use composer to install it.

How to Use Composer to Install CodeIgniter

Now that you understand the prerequisites and have everything set up, let’s move on to installing CodeIgniter. One of the easiest and most efficient ways to install CodeIgniter is by using Composer, a popular dependency management tool for PHP. In this section, I’ll guide you through the steps to install CodeIgniter using Composer.

First, create a new directory using mkdir my_project then navigate to the directory using cd my_project. Run the following Composer command to install CodeIgniter. You can specify the version you want (e.g., ^4.0 for the latest version of CodeIgniter 4).

composer create-project codeigniter4/appstarter .

This command will download and install the latest version of CodeIgniter 4 and set up the project for you:

After the installation is complete, you should see the CodeIgniter project structure in your directory. To check if everything is working, you can start the built-in PHP server by running:

php spark serve

Output:

Then, open your browser and go to http://localhost:8080. You should see the CodeIgniter welcome page.

How to Install CodeIgniter Manually

If you prefer not to use Composer, or if you’re working in an environment where Composer isn’t available, you can manually install CodeIgniter. This method involves downloading the framework files directly and setting up your project manually. While it requires a few more steps than using Composer, it’s still straightforward and gives you full control over the installation process.

In this section, I’ll walk you through the steps to manually install CodeIgniter and configure it for your project.

Download via Git:

cd /var/www/html
sudo git clone https://github.com/bcit-ci/CodeIgniter.git codeigniter

Or download as ZIP (from CodeIgniter official website): Download here. Extract it in /var/www/html. Whereby you can do so using the terminal or UI.

Extracting the ZIP File via the UI:

If you’re not comfortable using command-line tools, you can easily extract the ZIP file using your computer’s graphical interface. Here's how:

Click on files/Other Locations/computer to access /var/www/html. Copy the .Zip file you downloaded earlier in the created folder and right click. Then click on extract here to unzip it.

Extracting the ZIP File via the Terminal:

If you’re comfortable using the command line, you can extract the CodeIgniter ZIP file directly via the terminal. This method is especially useful for Linux and macOS users or if you're working on a remote server without a graphical user interface.

First, ensure you have unzip installed on your Ubuntu system:

sudo apt update
sudo apt install unzip

Check your permissions to ensure that you have the necessary access to the /var/www/html directory. If needed, use sudo for administrative privileges.

Steps to Extract the File

Assuming your uploaded file is currently located in downloads/data…, move it to /var/www/html:

sudo mv /mnt/data/CodeIgniter.zip /var/www/html

Navigate to the /var/www/htmldirectory:

cd /var/www/html

Extract the ZIP file by using the unzip command to extract the contents:

sudo unzip CodeIgniter.zip

After extracting, set the correct ownership and permissions for web server access:

sudo chown -R www-data:www-data /var/www/html
sudo chmod -R 755 /var/www/html

• www-data (first part) → The user.

• www-data (second part) → The group.

change Codeigniter-develop /bcit-ci-CodeIgniter-bcb17eb/….folder name to just codeigniter

Verify Extraction

Visit your web server's URL (for example, http://localhost) to check if the contents are correctly deployed.

Set Folder Permissions

After installing CodeIgniter, make sure you have the correct permissions for your directories, particularly writable and cache directories. This ensures that CodeIgniter can write logs, cache files, and session data.

Run the following commands to set the correct permissions:

sudo chmod -R 755 /var/www/html/codeigniter

Configure the Base URL

The base URL for your project needs to be set up in application/config/config.php.

Open the config.php file:

sudo nano /var/www/html/codeigniter/application/config/config.php

Output:

Set the base_url as follows:

$config['base_url'] = 'http://your-domain-or-ip/';

Replace http://your-domain-or-ip/ with your actual domain or IP address where the project will be accessible.

After making changes:

• Save the file: Press Ctrl + O (Write Out).

• Confirm the filename: Press Enter.

• Exit the editor: Press Ctrl + X.

Configure the Database (if Applicable)

If your project uses a database, you'll need to set up the database configuration in application/config/database.php.

To do this, open the database configuration file:

sudo nano /var/www/html/codeigniter/application/config/database.php

Configure the database connection by setting the following options:

$db['default'] = array(
    'dsn'   => '',
    'hostname' => 'localhost',
    'username' => 'your-db-username',
    'password' => 'your-db-password',
    'database' => 'your-database-name',
    'dbdriver' => 'mysqli',
    'dbprefix' => '',
    'pconnect' => FALSE,
    'db_debug' => (ENVIRONMENT !== 'production'),
    'cache_on' => FALSE,
    'cachedir' => '',
    'char_set' => 'utf8',
    'dbcollat' => 'utf8_general_ci',
    'swap_pre' => '',
    'encrypt' => FALSE,
    'compress' => FALSE,
    'stricton' => FALSE,
    'failover' => array(),
    'save_queries' => TRUE
);

Replace your-db-username, your-db-password, and your-database-name with your actual database credentials.

Set the Environment

CodeIgniter uses the environment setting to load different configuration files depending on the environment (for example, development, production).

To set the environment, open the index.php file in the root directory of your project:

sudo nano /var/www/html/codeigniter/index.php

Locate the following line:

define('ENVIRONMENT', 'development');

You can set it to production, testing, or development depending on your setup. For development, it should be set to development

Autoload Libraries, Helpers, or Config Files

You can specify which libraries, helpers, or config files to autoload in application/config/autoload.php. Open the autoload configuration file:

sudo nano /var/www/html/codeigniter/application/config/autoload.php

Modify the autoload array to load commonly used libraries and helpers:

$autoload['libraries'] = array('database', 'session', 'form_validation');
$autoload['helper'] = array('url', 'file');

Enable Mod Rewrite (For Clean URLs)

If you want clean URLs, you need to enable mod_rewrite on Apache. Edit the Apache configuration file as follows:

sudo nano /etc/apache2/sites-available/000-default.conf

Ensure that the AllowOverride directive is set to All in the <Directory> section:

<Directory /var/www/html>
    AllowOverride All
</Directory>

Enable mod_rewrite and restart Apache:

sudo a2enmod rewrite
sudo systemctl restart apache2

Verify CodeIgniter Directory Placement

If CodeIgniter is not in /opt/lampp/htdocs, move it there:

sudo mv /var/www/html/codeigniter /opt/lampp/htdocs/

Test CodeIgniter

Open your web browser and navigate to the base URL (http://your-domain-or-ip). You should see the default CodeIgniter welcome page if everything is set up correctly:

Run curl ifconfig.me to find your public IP. If you're hosting CodeIgniter on a local machine (for example, in your home network), use the following command to check your local IP: hostname -I.

Troubleshooting

If you encounter any issues while setting up CodeIgniter, here are some common problems and how to resolve them:

Set CodeIgniter as the Default App

If you want CodeIgniter to load as the default app (instead of the XAMPP landing page if you have XAMPP installed), remove or rename the default index.php in the htdocs directory:

sudo mv /opt/lampp/htdocs/index.php /opt/lampp/htdocs/index.php.bak

Move the CodeIgniter files to the root of the htdocs folder:

sudo mv /opt/lampp/htdocs/codeigniter/* /opt/lampp/htdocs/

Restart Apache

After making changes, restart Apache to apply the configuration:

sudo /opt/lampp/lampp restart

Creating a Controller

To start developing your application, you can create a controller to handle requests.

Create a new controller in application/controllers/ like this:

<?php
class Welcome extends CI_Controller {
    public function index() {
        $this->load->view('welcome_message');
    }
}

Then create Views and Models. Views go into application/views/ and models into application/models/. You can start adding your views and models accordingly.

Conclusion

Setting up a development environment for CodeIgniter on Ubuntu is an essential step to unlock the full potential of this lightweight yet powerful PHP framework.

By carefully following the outlined steps—from installing prerequisites, configuring file permissions, and customizing settings to creating controllers, views, and models—you are now equipped to start building dynamic web applications.

In the first part, you learned about arrays, how to create arrays, array functions, and how to loop through arrays.

This second part will teach you how to use PHP and MongoDB to rebuild the football team cards project of freeCodeCamp's updated JavaScript curriculum.

The football team data will live in a MongDB Atlas database. We will fetch it as an array, and display it based on the players selected (goalkeepers, defenders, midfielders, and forwards).

This will help you build on top of what you learned about looping through arrays. After all, on many occassions, you'll be looping through what you get from a database or an API, not necessarily some hard-coded arrays.

In order not to shock you by jumping straight into databases from arrays, we'll start with what data and databases are, and then go on to learn about:

• Relational vs non-relational databases

• How to use MongoDB Atlas

• How to Install MongoDB for PHP on a Mac

• How to set up MongoDB Atlas

• How to build a CRUD app with PHP and MongoDB Atlas

• And finally, how to rebuild the football team cards project with PHP and MongoDB Atlas

Pre-requisites

To get the best put of this guide, I suggest you have a basic knowledge of the following:

• PHP fundamentals (variables, arrays, functions, loops)

• HTML and CSS

• JavaScript events

• Command line

• Composer

• How to set up a PHP development environment with VS Code

• Databases

• MongoDB Atlas

• Git and GitHub

Table of Contents

• What are Data and Databases?

• Relational vs Non-relational Databases

  • MongoDB Atlas – An Example of a Non-relational Database

• How to Install MongoDB for PHP

  • Step 1: Install the MongoDB Extension with PECL (PHP Extension Community Library)

  • Step 2: Modify the php.ini File to Include the MongoDB Extension

  • Step 3: Verify the Installation of the MongoDB Extension

  • Step 4: Set Up a MongoDB Atlas Cluster

  • Step 5: Install the MongoDB PHP Library

• CRUD Operations Using PHP and MongoDB

  • Step 1: Install MongoDB Library and Dotenv Package

  • Step 2: Create a .env File for your MongoDB Atlas URI Credential

  • Step 3: Create a Database Connection File

  • Step 4: The READ Part of the CRUD

  • Step 5: The CREATE Part of the CRUD

  • Step 6: The UPDATE Part of the CRUD

  • Step 7: The DELETE Part of the CRUD

• Project: How to Use PHP to Rebuild the Football Team Cards Project of the Updated JavaScript Curriculum

  • Step 1: Set up MongoDB Atlas

  • Step 2: Install the Project Dependencies with Composer

  • Step 3: Create Project Files

  • Step 4: Wrap the select tag in a form Element

  • Step 5: Create the Logic for Fetching the Footballers from the footballers Collection

  • Step 6: Create the Logic for Filtering the Footballers Based on Position

  • Step 7: Display the Players on the Page Based on the Selected Position

• Wrapping Up

What are Data and Databases?

Data is central to pretty much everything in the modern world. The people you see on social media and other websites, the content they post, the comments they add to posts, and many other online activities all produce a lot of data. Even patient files in a hospital or a company's payroll hosted on a local server are data. Data does not have to be on the Internet.

To effectively manage and utilize data for growth, you need a database. A Database is a structured collection of data that helps you efficiently store, retrieve, and manipulate that data.

Databases come in two primary types – relational and non-relational databases. We'll discuss the differences between them next.

Both relational and non-relational databases are managed with what is called database management systems (DBMS). A DBMS is an interface between the user and the database that allows you to create, read, update, and delete data in the database.

Relational vs Non-relational Databases

What are Relational Databases?

Relational databases organize data into tables consisting of rows and columns. Each table represents a specific entity, such as customers or products. The columns define the attributes of these entities, like the customer name or product name.

The relational model uses structured query language (SQL) for querying and managing data. Relationships between tables are established through primary and foreign keys to ensure data integrity and reduce redundancy.

Relational databases are known for their robustness, consistency, and support for complex queries. They are well-suited for applications that require multi-row transactions, such as financial systems, enterprise resource planning (ERP) software, and customer relationship management (CRM) systems.

Examples of relational databases are MySQL, PostgreSQL, and Microsoft SQL Server.

What are Non-Relational Databases?

Non-relational databases store and manage data in flexible, schema-less formats like key-value pairs, documents, wide-columns, or graphs. They are also known as NoSQL databases because they don't use SQL like relational databases.

Non-relational databases are designed to scale horizontally, making them ideal for large-scale data processing and real-time web applications.

Non-relational databases are easy to use, scalable, and high-performing at the same time. Due to that, they often sacrifice some degree of consistency in favor of availability and partition tolerance.

Common use cases include real-time analytics, real-time web apps, and applications requiring high-speed data ingestion.

MongoDB Atlas – An Example of a Non-relational Database

MongoDB Atlas is a non-relational database that stores data in a document-oriented JSON-like format called BSON (Binary JSON). BSON extends the JSON model to provide additional data types and to be efficient for encoding and decoding within various programming languages.

MongoDB Atlas offers the flexibility and scalability of MongoDB, with the benefits of automated deployment, backups, and monitoring. It allows developers to focus on building applications without bothering about database management

MongoDB Atlas also supports advanced features such as data partitioning, replication, and global distribution. This makes it a powerful choice for modern applications requiring flexibility and performance.

How to Install MongoDB for PHP

Before you can install MongoDB for PHP, make sure you have PHP itself installed correctly.

On a Mac, you can install PHP with homebrew by running brew install PHP. In addition to that, make sure you have Apache installed by running brew install httpd and starting it by running brew services start httpd.

You can follow the steps below to install MongoDB for PHP on a Mac.

Step 1: Install the MongoDB Extension with PECL (PHP Extension Community Library)

Install the MongoDB extension for PHP by running pecl install mongodb.

Step 2: Modify the php.ini File to Include the MongoDB Extension

Installing the MongoDB extension should automatically add the necessary configurations to the php.ini file. But of it doesnt do that, locate the php.ini file by running the command below:

$ php --ini
Configuration File (php.ini) Path: /usr/local/etc/php/8.3

After that, paste the following at the end of the php.ini file and save it:

extension=mongodb.so

After doing that, restart Apache by running brew services restart httpd.

Step 3: Verify the Installation of the MongoDB Extension

Run the command below to see whether the PHP extension has been successflly installed:

php -i | grep mongo

You should see something like this in the terminal:

Check out the MongoDB PHP docs for more information on how to use MongoDB with PHP and frameworks like Laravel and Symfony.

Step 4: Set Up a MongoDB Atlas Cluster

To test out the PHP extension you just installed, you need a MongoDB database. Atlas makes this easy for you because the heavy lifting is handled on the cloud.

1. Login to your MongoDB Account

Head over to https://cloud.mongodb.com/ and log in to your account. If you don't have an account, you can create one for free.

2. Create a Project

If you have existing projects, create a new project by clicking on the arrow right beside the currently opened project and selecting "New Project".

Give your project a name and click the "Next" button.

Click "Create Project" to finally create the project.

3. Create a Cluster

After creating a project, you should be prompted to create a cluster. If you're not, make sure you're in the Overview tab. From there, click the big "Create" button:

Select the "MO" free tier, give your cluster a name, and click the "Create Deployment" button.

I have given the cluster the name movie-list.

Just keep in mind that as your database grows, you might need to upgrade to one of the paid tiers.

4. Create a Database User

Immediately after you create your cluster, you'll be prompted to create a database user. Fill in your database user username and password and click the "Create Database User" button. Then click "Choose a connection method".

Make sure you enter a password you can remember or save it in a password manager.

5. Choose a Connection Method

You'll see several methods you can use to connect to the cluster once you click the "Choose a connection method" button.

Select Drivers from the list.

Choose PHP from the list and select PHP Lib 1.9 + MongoDB 1.10 or later as the version to use. Then copy the connection string and click the "Done" button.

6. Choose Network Access

Head over to the "Network Access" tab and select "Add IP ADDRESS", click "ALLOW ACCESS FROM ANYWHERE", and then click the "Confirm" button. You can change this later depending on where your app is deployed.

Go back to the "Database" tab and click the "Browse Collections" button.

Select "Load a Sample Dataset" so you don't have to add your own data – at least for now.

Now you should see the following databases:

To test that your MongoDB extension for PHP is running, you can query any of the data in those databases. But first, you need to install the MongoDB PHP library with composer. composer lets you manage dependencies for your PHP project.

Step 5: Install the MongoDB PHP Library

If you don't have composer installed, install it with homebrew by running brew install composer.

After that, create a folder and open it with your Text Editor. If your Text Editor has an integrated terminal, open it and run the command below:

composer require mongodb/mongodb

If the installation is successful, you'll see a vendor folder, along with composer.json and composer.lock files in the root of your project. You'll also see the following in the terminal:

Now you need to query any data in your atlas database and display them.

Create an index.php file and paste the following inside it:

<?php

require_once __DIR__ . '/vendor/autoload.php';

// Your connection string
$client = new MongoDB\Client(
 'mongodb+srv://username:<password>@movie-list.s6r7qkr.mongodb.net/?retryWrites=true&w=majority&appName=movie-list'
);

$movies = $client->selectCollection('sample_mflix', 'movies');
$document = $movies->findOne(['title' => 'Wild and Woolly']);

echo '<pre>';
print_r($document);

The code above lets you connect to the movies database in the sample_mflix collection with the selectCollection() function and query a movie titled "Wild and Bolly" in it.

Note: Make sure you replace the existing connection string with your own. You copied this in item 5 of step 4. Also, make sure you replace <password> with your database user password.

After that, run your PHP app (with php -S localhost:8000 on Mac in the terminal). If you have everything set up correctly, you should see the following in the browser:

Note: I have the data formatted nicely because I installed the PHP View Chrome extension. It prints everything you have inside the print_r() function like that.

CRUD Operations Using PHP and MongoDB

With MongoDB Atlas for database management and UI persistence, and PHP for server-side logic, you can build an application that implements full CRUD operations – create, read, update, and delete.

The particular CRUD app we are building is a movie list. So make sure you set up an Atlas database for it, as we already covered in this guide.

Now let's look at how you can build a movie list CRUD app.

Step 1: Install MongoDB Library and Dotenv Package

Make sure you have a MongoDB extension and a Dotenv package to help manage your .env variables by running the following commands:

composer require mongodb/mongodb
composer require vlucas/phpdotenv

Step 2: Create a .env File for your MongoDB Atlas URI Credential

Create a .env file and add the following in it:

MDB_URI="Your MongoDB Atlas connection string"

Step 3: Create a Database Connection File

Create a mongo_atlas_setup.php file for the database connection in the root and paste the following in it:

<?php
require_once __DIR__ . '/vendor/autoload.php';

$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
$dotenv->load();

$client = new MongoDB\Client($_ENV['MDB_URI']);

function getMongoClient()
{
 global $client;
 return $client;
}

function getMongoCollection($database, $collection)
{
 $client = getMongoClient();
 return $client->selectCollection($database, $collection);
}

With the code above, we are:

• loading the dependencies required for the project

• loading the environment variable

• using a function to get the database and the collection we want within it

Importing the file and calling the getMongoCollection in it with the database and the collection in it will let you connect to the database and the collection.

Step 4: The READ Part of the CRUD

In the root again, create an index.php file that will take care of the READ part of the CRUD. Paste the following in the file:

<?php

require_once __DIR__ . '/vendor/autoload.php';
require_once __DIR__ . '/mongo_atlas_setup.php';

$movies_list = getMongoCollection('movie_list', 'movies');
$movies = $movies_list->find([], ['sort' => ['_id' => -1]]);
?>

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Movie List CRUD App</title>
 <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 p-10">

 <div class="max-w-4xl mx-auto bg-white p-6 rounded shadow">
   <h1 class="text-3xl font-bold mb-4 text-center">Movie List CRUD App</h1>

   <?php include 'create.php' ?>

   <div class="space-y-4">
     <?php foreach ($movies as $movie) : ?>
       <div class="p-4 border rounded shadow-sm bg-gray-50">
         <h2 class="text-2xl font-semibold"><?= $movie['movie_title'] ?></h2>
         <p class="text-gray-700">Year: <?= $movie['movie_year'] ?></p>
         <div class="mt-2">
           <a href="update.php?id=<?= $movie['_id'] ?>" class="bg-yellow-500 text-white py-1 px-3 rounded">Update</a>
           <a href="delete.php?id=<?= $movie['_id'] ?>" onclick="return confirm('Are you sure you want to delete this movie?')" class="bg-red-500 text-white py-1 px-3 rounded">Delete</a>
         </div>
       </div>
     <?php endforeach ?>
   </div>
 </div>

</body>

</html>

Notice that there are the Update and Delete linking to an update.php and a delete.php files with the id of the movie clicked. That way, we will know which movie is clicked in order to update or delete it. There's also an include statement for a create.php file.

For now, you can go ahead and create the create.php, update.php, and delete.php files in the root.

At this point, you won't see anything in the UI yet because you need to handle the creation functionality.

Step 5: The CREATE Part of the CRUD

Create a create.php file in the root (if you haven't already) and paste in the following:

<?php
require_once __DIR__ . '/mongo_atlas_setup.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 $movies = getMongoCollection('movie_list', 'movies');
 $newMovie = [
   'movie_title' => $_POST['movie-title'],
   'movie_year' => (int)$_POST['movie-year'],
 ];
 $result = $movies->insertOne($newMovie);
 if ($result->getInsertedCount() === 1) {
   // echo "Movie created successfully!";
   header('Location: ' . '/');
 } else {
   echo "Failed to create movie";
 }
}
?>

<form method="POST" action="create.php" class="space-y-4 mb-6">
 <div>
   <label class="block text-gray-700">Movie Title</label>
   <input type="text" name="movie-title" required class="w-full p-2 border rounded max-w-md">
 </div>
 <div>
   <label class="block text-gray-700">Movie Year</label>
   <input type="text" name="movie-year" required class="w-full p-2 border rounded max-w-md">
 </div>
 <button type="submit" class="bg-green-500 text-white py-2 px-4 rounded">Create</button>
</form>

The code above contains the form and input elements for creating a movie. We are then using the name attributes in those input elements to create the POST request that will let us create a movie and save it in the movies collection of a movie_list database.

Step 6: The UPDATE Part of the CRUD

To handle the updating, we need to create a separate file and do something similar to how the movie creation worked. The exeception is that we are going to use the id (_id) field to determine whether the movie exists and then update it instead of creating a fresh one.

To do that, create an update.php file (if you haven't already) in the root and paste in the following:

<?php
require_once __DIR__ . '/vendor/autoload.php';
require_once __DIR__ . '/mongo_atlas_setup.php';

use MongoDB\BSON\ObjectId;

$movies_list = getMongoCollection('movie_list', 'movies');
$title = '';
$year = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 $filter = ['_id' => new ObjectId($_POST['id'])];

 $update = ['$set' => [
   'movie_title' => $_POST['movie-title'],
   'movie_year' => (int)$_POST['movie-year'],
 ]];

 $result = $movies_list->updateOne($filter, $update);

 if ($result->getModifiedCount() === 1) {
   // echo "Movie updated successfully!";
   header('Location: ' . '/');
 } else {
   echo "Failed to update movie.";
 }
} else {
 if (isset($_GET['id'])) {
   $id = $_GET['id'];
   $movie = $movies_list->findOne(['_id' => new ObjectId($id)]);
   if ($movie) {
     $title = $movie['movie_title'];
     $year = $movie['movie_year'];
   } else {
     echo "Movie not found.";
     exit;
   }
 } else {
   echo "No movie ID provided.";
   exit;
 }
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="https://cdn.tailwindcss.com"></script>
 <title>Update Movie </title>
</head>

<body class="bg-gray-100 p-10">

 <div class="max-w-4xl mx-auto bg-white p-6 rounded shadow">
   <h1 class="text-3xl font-bold mb-4">Update <?= $title ?> </h1>

   <form method="POST" action="update.php" class="space-y-4">
     <input type="hidden" name="id" value="<?php echo $id; ?>">

     <div>
       <label class="block text-gray-700">Title</label>
       <input type="text" name="movie-title" value="<?= htmlspecialchars($title); ?>" required class="w-full p-2 border rounded" />
     </div>

     <div>
       <label class="block text-gray-700">Release Year</label>
       <input type="number" name="movie-year" value="<?= htmlspecialchars($year); ?>" required class="w-full p-2 border rounded" />
     </div>

     <button class=" bg-green-500 text-white py-2 px-4 rounded" type="submit">Update</button>
   </form>

   <div class="mt-4">
     <a href="index.php" class="bg-gray-500 text-white py-2 px-4 rounded">Back to List</a>
   </div>
 </div>

</body>

</html>

Step 7: The DELETE Part of the CRUD

To handle the delete functionality, we can get the movie and use the deleteOne function provided by MongoDB to delete it. Once the deleting is done, we will then use the header() function again to redirect to the home page.

Paste the following code in your delete.php file:

<?php
require_once __DIR__ . '/mongo_atlas_setup.php';

use MongoDB\BSON\ObjectId;

if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['id'])) {
 $movies = getMongoCollection('movie_list', 'movies');
 $filter = ['_id' => new ObjectId($_GET['id'])];
 $result = $movies->deleteOne($filter);
 if ($result->getDeletedCount() === 1) {
   // echo "Movie deleted successfully!";
   header('Location: ' . '/');
 } else {
   echo "Failed to delete movie.";
 }
} else {
 echo "No movie provided.";
}
?>

This is what the CRUD app should look like now:

All the code is in this GitHub repo

Project: How to Use PHP to Rebuild the Football Team Cards Project of the Updated JavaScript Curriculum

Before you start going through the steps to build the project, grab the starter code for the project in the starter branch of this GitHub repo.

You can also take a look at the football team cards project to know what we are trying to achieve.

Step 1: Set up MongoDB Atlas

Log in to your MongoDB Atlas account and create a football-team-cards database. Feel free to create it in an existing project or a new one if you want. In the football-team-cards database, create a footballers collection.

In the footballers collection, click the "INSERT DOCUMENT" button.

Then paste in the content of the footballers.json file in the starter branch of the project GitHub repo and click "Done".

After that, your footballers collection should look like this:

Step 2: Install the Project Dependencies with Composer

Create a football-team-cards-php folder on your computer and open it with your favorite text editor. Open the same folder in your terminal and run the following commands:

composer require vlucas/phpdotenv 
composer require mongodb/mongodb

Step 3: Create Project Files

Inside the football-team-cards-php folder, create the following files:

• .env

• mongo_atlas_php_setup.php

• index.php

• styles.css

In the .env file, you should have the MongoDB Atlas URI:

MDB_URI="Your MongoDB Atlas connection string"

In the mongo_atlas_php_setup.php file, you should connect to the database with this code:

<?php
require_once __DIR__ . '/vendor/autoload.php';
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
$dotenv->load();


function getMongoClient()
{
 return new MongoDB\Client($_ENV['MDB_URI']);
}


function getMongoCollection($database, $collection)
{
 $client = getMongoClient();
 return $client->selectCollection($database, $collection);
}

In the code above, we are loading the environment variables and using a getMongCollection function to connect the database. Make sure you replace the connection string with your own.

Now, anytime you want to connect to a database, require the file, then pass the database and the collection names to the getMongoCollection function.

Copy the content of the index.html and styles.css files in the starter branch of the project GitHub repo and paste them into your index.php and styles.css files.

Step 4: Wrap the select tag in a form Element

Replace the existing select tag with the following:

<form method="POST" action="">
     <label class="options-label" for="players">Filter Teammates:</label>
     <select name="position" id="players" onchange="this.form.submit()">
       <option value="all">All Players</option>
       <option value="nickname">Nicknames</option>
       <option value="forward">Position Forward</option>
       <option value="midfielder">Position Midfielder</option>
       <option value="defender">Position Defender</option>
       <option value="goalkeeper">Position Goalkeeper</option>
     </select>
</form>

This will let you make a POST request with the name attribute set to position. And with the onchange attribute of this.form.submit(), you'll be able to fetch footballers based on any of the options selected. More on this later.

Step 5: Create the Logic for Fetching the Footballers from the footballers Collection

require_once __DIR__ . '/mongo_atlas_php_setup.php';

$position = isset($_POST['position']) ? $_POST['position'] : 'all';

$collection = getMongoCollection('football-team-cards', 'footballers');
$team = $collection->findOne(['team' => 'Argentina']);
$players = $team['players']->getArrayCopy();

With the code above, we are:

• importing the database connection file

• checking for POST data with the name on the select tag and setting a default value of all (the first option in the select element)

• getting the database and collection in it

• using the findOne method from MongoDB to get the team

• and fetching the data as an array with getArraCopy() so we can loop through it

At this point, you can print the $players variable with print_r() or var_dump() to see what it looks like. On my end, it looks like this when I ran the app with php -S localhost:4000:

Step 6: Create the Logic for Filtering the Footballers Based on Position

Remember we have to display the players based on whether they are goakeepers, defenders, midfielders, or forwards. To do that, we can utilize the code below:

$filteredPlayers = $players;


if ($position !== 'all') {
 if ($position === 'nickname') {
   $filteredPlayers = array_filter($players, function ($player) {
     return !empty($player['nickname']);
   });
 } else {
   $filteredPlayers = array_filter($players, function ($player) use ($position) {
     return $player['position'] === $position;
   });
 }
}

At first, we are initializing $filteredPlayers to all the players. If the selected position is not all, we filter the players based on nickname. And if the selected position is not nickname, we filter the players to include only those whose position matches the selected position.

Step 7: Display the Players on the Page Based on the Selected Position

Now, all we need to do is set each option's value (all players, goalkeepers, defenders, midfielders, forwards) to selected if that option is matched. After that, we need to use foreach loop to do the proper display.

Here's one way you can set the value of each option to selected:

<option value="all" <?= $position === 'all' ? 'selected' : '' ?>>All Players</option>
       <option value="nickname" <?= $position === 'nickname' ? 'selected' : '' ?>>Nicknames</option>
       <option value="forward" <?= $position === 'forward' ? 'selected' : '' ?>>Forwards</option>
       <option value="midfielder" <?= $position === 'midfielder' ? 'selected' : '' ?>>Midfielders</option>
       <option value="defender" <?= $position === 'defender' ? 'selected' : '' ?>>Defenders</option>
       <option value="goalkeeper" <?= $position === 'goalkeeper' ? 'selected' : '' ?>>Goalkeepers</option>

And here's how you can use the foreach loop to finally display the players selected:

<div class="cards" id="player-cards">
     <?php if (empty($filteredPlayers)) : ?>
       <p>No players found for the selected position.</p>
     <?php else : ?>
       <?php foreach ($filteredPlayers as $players) : ?>
         <div class="player-card">
           <h2><?= $players['name'] . ($players['isCaptain'] ? ' (Captain)' : '') ?></h2>
           <p>Position: <?= $players['position'] ?></p>
           <p>Number: <?= $players['number'] ?></p>
           <p>Nickname: <?= !empty($players['nickname']) ? $players['nickname'] : 'N/A' ?></p>
         </div>
       <?php endforeach ?>
     <?php endif ?>
   </div>

Now, everything works as expected:

You can grab the final code of the project in the main branch of this GitHub repo.

Wrapping Up

Rebuilding the football team cards project with PHP and MongoDB Atlas shows just how powerful and flexible it can be to combine server-side scripting with a cloud-based NoSQL database.

The project not only highlights how smoothly PHP and MongoDB Atlas work together, but it also shows the advantages of using a cloud-based database like Atlas. Atlas offers scalability, high availability, and easy management, making it a great choice for modern web applications.

Whichever data-driven application you're making, these techniques that we used here to build the project and the initial CRUD app can help you out.

Happy coding!

We've seen Blitz for NextJS, Adonis for NodeJS, RedwoodJS, and more. All these frameworks tried to build a Laravel for JavaScript.

But none of them were really successful. Why? We'll figure it out in this article. It's worth going over because beginners learning JavaScript struggle to find an all-in-one solution.

This means it can be tough to choose a framework (or library) in JavaScript when you have so many choices – like React, Vue, Angular, Svelte, NextJS, Meteor, and more.

Meanwhile, PHP offers one simple solution: Laravel. It's a one-stop shop with many frameworks and libraries combined into one. But is it the right option for you?

In this article, I'll dive deeper into why the JavaScript ecosystem doesn't have a Laravel-like framework and whether you should switch to PHP for a one-stop solution like Laravel.

I will discuss the advantages and disadvantages of using JavaScript frameworks compared to a one-stop solution like Laravel and end it with a comparison table to help you decide.

What we'll cover in this article:

1. Why JavaScript vs Laravel

2. Why JavaScript lacks an all-in-one solution

3. Benefits of JavaScript frameworks and libraries

4. Benefits of Laravel

5. Differences between Laravel and JS tools

Why JavaScript vs Laravel

When beginners decide to learn Web Development, they often choose between JavaScript/TypeScript and PHP. Other solutions require more expertise, so most beginners gravitate towards these two languages.

Many JavaScript beginners eventually find its vast ecosystem overwhelming, whereas PHP learners often feel constrained by the limited frameworks and lack of advanced capabilities.

To deal with that confusion, I am comparing the tools available for JavaScript and PHP, not the languages directly. Since PHP has an all-in-one solution most developers use, I'll use Laravel for the comparison.

JavaScript lacks a single all-in-one solution or a specific representative framework. Therefore, I'll refer to tools like React, Vue, Angular, and so on as "JavaScript Frameworks."

Let's begin by understanding why the JavaScript ecosystem lacks a Laravel-like framework.

Why JavaScript Lacks an All-in-One Solution

I'll begin by acknowledging that JavaScript developers have tried in the past to make a Laravel for JavaScript.

Start with RedwoodJS. It's an open-source full-stack JavaScript framework started by Tom Preston-Werner, the co-founder and former CEO of GitHub. It helps developers build their applications and ship faster.

Redwood has many innovative solutions packed into one framework. Sounds familiar? That's precisely like Laravel. Do you see anyone shipping using Redwood? Most likely not.

The next option is Blitz. It makes the same promise as Redwood: a replacement for NextJS. Blitz is an all-in-one solution with custom built-in solutions for authentication, database, and so on.

But Blitz doesn't allow developers to choose what they want to use, like Laravel. It has custom solutions crafted by the core team. Developers cannot replace any solution piece with some other recommended solution.

Customization is a point worth noting in the JavaScript ecosystem, and I'll explain why as we uncover more frameworks. But Blitz didn't succeed either.

Then, there's AdonisJS. But, I think you get the point. Each all-in-one solution in JavaScript has tried to implement their version of Laravel – and none of them really took hold.

Blitz, Adonis, and Redwood followed a theme: a full-stack framework of ready-made non-customizable solutions for JavaScript developers to build applications.

These frameworks didn't gain popularity because they didn't meet the needs of the developers they aimed to serve.

The JavaScript ecosystem is unique, offering many solutions for the same problem. There's a reason for this diversity, and why those frameworks didn't succeed.

Let's discuss the reasons and benefits of the current popular JavaScript tools, as they directly impact the choice between JavaScript frameworks and Laravel. As I outline each benefit, consider whether it aligns with your needs.

Benefits of JavaScript Frameworks and Libraries

JavaScript frameworks and libraries are collections of pre-written resources, techniques, and functions created by developers to save time and effort.

These frameworks began emerging in the 2000s, with notable ones like React, Svelte, Angular, NextJS, and Vue standing out over time.

Source: Raygun

However, having more options doesn't necessarily mean greater effectiveness. Below, we’ll explore the benefits of using JavaScript frameworks and why all-in-one solutions haven't succeeded in the JavaScript ecosystem.

Versatility

It's easier to switch or choose one solution over the other in the JavaScript ecosystem. For example, to implement authentication, we have Clerk, Auth0, AuthJS, NextAuth, Supabase, and more.

The JavaScript ecosystem always had multiple options for a specific solution and startups dedicated to providing bespoke solutions. If you didn't like Clerk, you could use NextAuth for more customization.

JavaScript frameworks are highly versatile. When there are ten solutions for one problem, developers can easily switch and see what works for them.

Blitz and other frameworks couldn't succeed for this reason. If a developer disliked Blitz's approach to authentication, they would just switch to another solution.

NPM

Unlike JavaScript, other languages don't have an ecosystem around building tools for others, like libraries or packages. It's not as easy in those languages.

The JavaScript ecosystem has an entire registry filled with packages and libraries for the smallest solutions, like emails. JavaScript has many packages, frameworks, and libraries for each solution.

Source: Kinsta

Ironically, even the NPM registry has competitors. There are multiple other registries with unique packages and features. JavaScript follows the versatility rule everywhere, but does that indicate reliability? Maybe not.

Startups

Each solution for a specific problem is likely a startup funded by VC firms and Angel Investors.

JavaScript-based startups have the capital and the resources to conduct in-depth research and hire the best talent to build bespoke solutions for a targeted problem.

With unlimited resources allocated to a specific topic or problem, the solutions are specific and cater to different needs to their developers.

In return, JavaScript developers pay these startups for those solutions and startups are incentivised to create better solutions for the ecosystem.

The Common Dev

Any developer in the JavaScript ecosystem can identify a problem during their experience using a specific technology, build a solution, and offer it as a product.

JavaScript developers have the liberty to build and sell their solutions because startups push the idea of paying for bespoke solutions and developers have no problem doing that.

Take Marc Lou as an example. He built ShipFast and other products that churn over $100,000 per month. He is an example of the possibilities in the field.

But perhaps these benefits and reasons seem intangible to you. Don’t worry—the web development domain offers more than one alternative. Let’s explore Laravel.

Laravel

Laravel is a framework for the PHP programming language. Taylor Otwell introduced Laravel in 2011.

Source: Cloudways

Laravel offers many solutions packed into one tool, and can be a one-stop solution for everything. It offers authentication, debugging, serverless deployment, user-friendly form systems, starter kits, and so on.

The solutions provided by Laravel are many, but without the core language, they don't mean anything. Laravel is all about PHP.

PHP is a general-purpose scripting language. Rasmus Lardof introduced it to developers in the 1990s. Since then, the language has evolved with significant updates in 2004, 2015, and 2020.

Source: Gecko Dynamics

Before JavaScript frameworks had taken off, developers used PHP with JavaScript.

Laravel is a back-end framework and PHP focuses on the server-side. JavaScript without a framework is a client-side language at its core.

Developers traditionally used JavaScript on the client-side and PHP on the server-side to create full-fledged applications.

However, the tech stack landscape shifted when Laravel gained popularity and frameworks like React began to dominate the JavaScript ecosystem.

Many developers worldwide, especially from countries like India, are doubling down on PHP because of its robust and reliable nature.

Government websites and large infrastructures use Laravel (PHP) because it supports a variety of solutions in one place. Many developers don't want to combine and switch technologies.

Companies and individuals using PHP or Laravel want to ship quickly, make changes, and avoid learning a new library or technology at every step of the way like JavaScript.

PHP only has JavaScript as its direct rival that challenges its existence. However, JavaScript isn't the best for many situations. Let's see how Laravel performs better.

Benefits of Laravel

One-Stop Solution

Laravel is an all-in-one framework. It contains everything a developer would reasonably require to build compact, reliable, and robust solutions.

You don't need to spend time searching for various libraries and frameworks that may or may not integrate well with your foundational technology—it's all built-in for you.

If speed of deployment is your priority, Laravel is the ideal choice.

Moreover, for PHP developers using Laravel, there's less need to learn new libraries, syntax, and more because everything is integrated seamlessly.

Less Wasted Time

The PHP ecosystem has fewer solutions for specific problems. It's difficult to identify a specific solution for a specific problem.

Developers rather choose an all-in-one solution than invest time in finding bespoke solutions for specific problems.

That's where the PHP ecosystem shines because developers don't spend a lot of time trying out different options. They already have everything in one place.

If there's a new project, their go-to choice is Laravel. In the JavaScript land, if a developer isn't using an existing solution or tech stack, they are likely finding a new one or creating one.

Stable and Robust

Web Applications created using PHP are robust because the framework is battle-tested. You can create anything using it.

You could sabotage the entire application if you mess up with one choice of library or framework in a JavaScript project. But it's not the same with Laravel.

Since Laravel has fewer solutions, the chances of sabotaging are reduced to the bare minimum.

No Catching Up

With Laravel, you don't need to catch up with new technologies and frameworks frequently. You can learn one framework, library, or skill and consider it useful for a long time.

It's the opposite in JavaScript. Unlike JS, Laravel has more stable and less frequent updates.

The PHP ecosystem receives fewer updates so developers can reliably use the existing features without worrying about another framework or library providing a better solution or another version.

A new framework or library doesn't pop up each week. You don't need to follow up on versions frequently.

A Massive Community

Laravel was first launched a decade ago. It has gained popularity over time and invited many developers to create communities and share ideas.

Every PHP developer uses Laravel. If you ever need any help, you always have developers helping you.

Free Solutions

Most PHP frameworks and libraries are open-source and free to access. Startups are rare in the PHP ecosystem.

If a developer is offering any bespoke solutions, most are public, especially free.

Any PHP developer can refer to those open-source free solutions, contribute to them, and extend those solutions further.

Differences Between Laravel and JS Tools

You can create any type of application using both of these technologies. But the experience won't be exactly the same, of course. Here are some of the differences:

And that's it! I hope you enjoyed the article and learned something new. If you want, you can also follow me on Twitter (X) or LinkedIn. Also, I've built a Notion Dashboard for Software Engineers to ace their coding interviews.

When you create an array in PHP, you'll want to be able to use it. To do so, you have to manipulate or loop through it. PHP provides several built-in functions for manipulating arrays and several ways to loop through arrays.

Understanding and utilizing those built-in functions and loops is essential for efficient array manipulation. With them, you'll save time, write cleaner code, and become a more efficient PHP developer.

Note that this is the first part of a two-article series. The second part will focus on how to use MongoDB in PHP by rebuilding the Football Team Cards project. The footballers will come from a MongoDB Atlas database. We will then fetch them as arrays and display them on the page.

What We'll Cover

• How to Create Arrays in PHP

  • How to Create Arrays with the Array Function

  • How to Create Arrays with the Square Bracket Syntax

• How to Print Arrays in PHP

  • How to Print an Array with the print_r() Function

  • How to Print an Array with the var_dump() Function

• PHP Array Functions

  • The count() Array Function

  • The array_push() Array Function

  • The array_pop() Function

  • The array_shift() Function

  • The array_unshift() Function

  • The array_splice() Function

  • The array_keys() Function

  • The array_values() Function

  • The array_reduce() Function

  • The sort() Function

  • The rsort() Function

  • The array_replace() Function

  • The array_reverse() Function

  • The array_slice() Function

  • The array_sum() Function

  • The array_merge() Function

  • The array_filter() Function

  • The array_map() Function

  • The array_search() Function

  • The array_column() Function

  • The in_array() Function

• How to Loop Through Arrays in PHP

  • How to Loop through an Indexed Array

  • How to Loop through an Associative Array

  • How to Loop through an Array Inside the HTML Template

• Conclusion

How to Create Arrays in PHP

In PHP, arrays exist in 3 forms:

• indexed – a regular array with predefined indexes

• multidimensional – an array with arrays within it

• associative – an array with string indexes

There are two ways you can create any of those 3 forms of arrays in PHP. You can either use the Array() function or the square brackets syntax ([ ]).

How to Create Arrays with the Array Function

To create a PHP array with the array() function, just pass the elements into the function.

Here's the catch:

• a regular array is created with the array() function by passing the elements directly into the function

• a multidimensional array is created with the array() function by nesting one or more array() functions inside one array() function

• an associative array is created with the array() function by separating the key and values with a fat arrow (=>) and separating each entry with a comma

Here's examples of all of them in code:

// regular array with the array function
$myFruitsArr1 = array("Apple", "Banana", "Cashew", "Mango");


// multidimensional array with the array function
$myFruitsArr2 = array(
 array("Apple", "Avocado", "Apricot"),
 array("Banana", "Blackeberry", "Babaco"),
 array("Cashew", "Cherry", "Canary melon"),
 array("Mango", "Melon", "Miracle fruit"),
);


// associative array with the array function
$myFruitsArr3 = array(
 "fruit 1" => "Apple",
 "fruit 2" => "Banana",
 "fruit 3" => "Cashew",
 "fruit 4" => "Mango",
);

How to Create Arrays with the Square Bracket Syntax

The square bracket syntax is the most common way to create an array in PHP (and JavaScript as well).

To create an array with the square bracket syntax, replace every occurrence of array() with opening and closing square brackets:

// regular array with the square bracket syntax
$myFruitsArr1 = ["Apple", "Banana", "Cashew", "Mango"];


// multidimensional array with the square bracket syntax
$myFruitsArr2 = [
 ["Apple", "Avocado", "Apricot"],
 ["Banana", "Blackeberry", "Babaco"],
 ["Cashew", "Cherry", "Canary melon"],
 ["Mango", "Melon", "Miracle fruit"],
];


// associative array with the square bracket syntax
$myFruitsArr3 = [
 "fruit 1" => "Apple",
 "fruit 2" => "Banana",
 "fruit 3" => "Cashew",
 "fruit 4" => "Mango",
];

How to Print Arrays in PHP

Most times, you might need to print an array for debugging or visual purposes. PHP provides the echo statement, print_r(), and var_dump() functions for printing data.

echo does not print an array as it should because it is meant for printing strings, integers, and floats. You should use print_r() and var_dump() to print arrays instead.

How to Print an Array with the print_r() Function

The print_r() function displays structured information about a variable in a human-readable format.

print_r() is particularly useful for displaying and inspecting the contents of complex data structures like arrays and objects. You use it by passing the array identifier into it:

print_r($myFruitsArr1);
print_r($myFruitsArr2);
print_r($myFruitsArr3);

Even if the array or object has nested elements, print_r() will traverse the entire array or object and display the content without missing any elements.

Here's what each of the 3 types of arrays looks like when you print them with the print_r() function:

Regular, multidimensional, and associative array examples.

How to Print an Array with the var_dump() Function

The var_dump() function lets you print an array or variable like the print_r() function. What it does differently is that it displays the data type of what you're printing, including each element of the array.

Here's how to use the var_dump() function:

var_dump($myFruitsArr1);
var_dump($myFruitsArr2);
var_dump($myFruitsArr3);

And here's what each of the 3 types of array looks like when you print them with the var_dump() function:

Regular, multidimensional, and associative arrays printed with var_dump()

PHP Array Functions

PHP provides a rich variety of array functions. They allow you to perform a wide range of operations on arrays, from basic manipulation to advanced data processing.

There are more than 70 array functions you can use in PHP, so we won't be able to cover all of them in this handbook.

Here are the ones we’ll cover:

• count()

• array_push()

• array_pop()

• array_shift()

• array_unshift()

• array_splice()

• array_keys()

• array_values()

• array_reduce()

• sort()

• rsort()

• array_replace()

• array_reverse()

• array_slice()

• array_sum()

• array_merge()

• array_filter()

• array_map()

• array_search()

• array_column()

• in_array()

The count() Array Function

The count() function does what its name implies — it goes through an array, counts the items, and returns an integer representing the array's length.

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
echo count($myFruitsArr); // 4

count() can be helpful if you want to do something based on the length of a particular array:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];


if (count($myFruitsArr) === 4) {
 echo "The fruits are enough";
} else {
 echo "The fruits are not enough";
}


// The fruits are enough

Because count() gets the length of an array, its commonly used in loops:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];


for ($i = 0; $i < count($myFruitsArr); $i++) {
 echo $myFruitsArr[$i] . "<br>";
}


/*
Output:


Apple
Banana
Cashew
Mango
*/

The array_push() Array Function

array_push() “pushes” an element to the end of the array. That is, it adds a specified item after the last item in the array. This means it modifies the original array.

array_push takes a compulsory array argument and the element you want to push into the existing array:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];


array_push($myFruitsArr, "Avocado");
print_r($myFruitsArr); // Array ( [0] => Apple [1] => Banana [2] => Cashew [3] => Mango [4] => Avocado )

You can echo out the <pre> tag to format the resulting array better:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];


array_push($myFruitsArr, "Avocado");
echo "<pre>";
var_dump($myFruitsArr);
echo "<pre>";


/*
Output:


array(5) {
 [0]=>
 string(5) "Apple"
 [1]=>
 string(6) "Banana"
 [2]=>
 string(6) "Cashew"
 [3]=>
 string(5) "Mango"
 [4]=>
 string(7) "Avocado"
}
*/

You can also push two or more items:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];


array_push($myFruitsArr, "Avocado", "Pineapple");
echo "<pre>";
var_dump($myFruitsArr);
echo "<pre>";


/*
Output:


array(6) {
 [0]=>
 string(5) "Apple"
 [1]=>
 string(6) "Banana"
 [2]=>
 string(6) "Cashew"
 [3]=>
 string(5) "Mango"
 [4]=>
 string(7) "Avocado"
 [5]=>
 string(9) "Pineapple"
}
*/

The array_pop() Function

array_pop() does the opposite of what array_push() does – it removes an element from the end of the array. That means it can be useful in stack-based data structures.

To use the array_pop() function, you only need to pass in the array you want to remove from:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
array_pop($myFruitsArr);


echo "<pre>";
var_dump($myFruitsArr);
echo "<pre>";


/*
Mango is gone:


array(3) {
 [0]=>
 string(5) "Apple"
 [1]=>
 string(6) "Banana"
 [2]=>
 string(6) "Cashew"
}
*/

You can echo out the popped element because array_pop() modifies the original array:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
$poppedElem = array_pop($myFruitsArr);


echo $poppedElem; // Mango

The array_shift() Function

array_shift() is like array_pop, but it removes the first element of an array and not the last. So, it's helpful in queue-based data structures.

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
array_shift($myFruitsArr);
var_dump($myFruitsArr);


/*
Apple is gone:


array(3) {
 [0]=>
 string(6) "Banana"
 [1]=>
 string(6) "Cashew"
 [2]=>
 string(5) "Mango"
}
*/

Because the array_shift() function modifies the original array, it reorders the indices:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];


echo "before shift: ";
var_dump($myFruitsArr);


echo "<br>";


echo "after shift: ";
array_shift($myFruitsArr);
var_dump($myFruitsArr);

Before and after using the shift() function

array_shift() also returns the removed array because it modifies the original array:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
$shiftedElem = array_shift($myFruitsArr);

echo $shiftedElem; // Apple

The array_unshift() Function

The array_unshift() function adds one or more elements to the beginning of an array. It modifies the original array by inserting the new elements at the start and re-indexing the existing elements.

It takes the array you want to add to and the element you want to add as the arguments. You can use it without providing the element to add to the beginning of the array, but it is advised not to do so.

Here’s an example:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
array_unshift($myFruitsArr, "Avocado");

var_dump($myFruitsArr);

/*
array(5) {
 [0]=>
 string(7) "Avocado"
 [1]=>
 string(5) "Apple"
 [2]=>
 string(6) "Banana"
 [3]=>
 string(6) "Cashew"
 [4]=>
 string(5) "Mango"
}
*/

The array_splice() Function

The array_splice() method removes an item from an array and replaces it with the specified replacement. array_splice() modifies the original array, so it returns that removed item.

array_splice() takes up to 4 arguments, as you can see in its basic syntax below:

array_splice(array, startingIndex, length, replacement)

• array is the array you’re using the array_splice() function on

• startingIndex is the position where you want to start removing the item(s) in the array. That means if you specify 0, it will remove the first element in the array.

• length is how far you want the splicing to go. For instance, if you specify 2, two items will be removed starting from the specified startingIndex

• replacement is the item that will replace the item to be removed. This could be a single item or another array.

Here’s an example with an array and a string replacement:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
$splicedItem = array_splice($myFruitsArr, 1, 1, "Avocado");

var_dump($myFruitsArr);

/*
Output:

array(4) {
 [0]=>
 string(5) "Apple"
 [1]=>
 string(7) "Avocado"
 [2]=>
 string(6) "Cashew"
 [3]=>
 string(5) "Mango"
}
*/
echo "<br>";

var_dump($splicedItem);

/*
Output:
array(1) {
 [0]=>
 string(6) "Banana"
}
*/

Here’s another example with an array as the replacement:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
$splicedItem = array_splice($myFruitsArr, 1, 1, array("Avocado", "Apricot", "Abiu"));

var_dump($myFruitsArr);
/*
Output:

array(6) {
 [0]=>
 string(5) "Apple"
 [1]=>
 string(7) "Avocado"
 [2]=>
 string(7) "Apricot"
 [3]=>
 string(4) "Abiu"
 [4]=>
 string(6) "Cashew"
 [5]=>
 string(5) "Mango"
}
*/

var_dump($splicedItem);
/*
Output:

array(1) {
 [0]=>
 string(6) "Banana"
}
*/

The array_keys() Function

There are two components in every array – the keys and the values. For a regular array, the keys are the indexes. For an associative array, the keys are the indices specified for each array item.

The array_keys function extracts the keys of the items in an array.

If the array is a regular array, it lists the indices of the array as the keys:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
$myFruitsArrKeys = array_keys($myFruitsArr);

print_r($myFruitsArrKeys);
/*
Output:

Array
(
   [0] => 0
   [1] => 1
   [2] => 2
   [3] => 3
)
*/

If the array is an associative array, it lists out the keys you specified for each item in the array:

$myFruitsWithColors = [
 "apple" => "red",
 "banana" => "yellow",
 "orange" => "orange",
 "grape" => "purple",
 "watermelon" => "green",
];

$myFruitsWithColorsKeys = array_keys($myFruitsWithColors);

print_r($myFruitsWithColorsKeys);
/*
Output:

Array
(
   [0] => apple
   [1] => banana
   [2] => orange
   [3] => grape
   [4] => watermelon
)
*/

array_keys() can accept a second argument. This is usually an item in the array.

If you specify an item as that second argument, array_keys() will return the key for that item only:

$myFruitsWithColors = [
 "apple" => "red",
 "banana" => "yellow",
 "orange" => "orange",
 "grape" => "purple",
 "watermelon" => "green",
];

$myFruitsWithColorsKeys = array_keys($myFruitsWithColors, "orange");

print_r($myFruitsWithColorsKeys);
/*
Output:

Array
(
   [0] => orange
)
*/

The array_values() Function

The array_values() function extracts the other part of an array – the values.

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
$myFruitsArrValues = array_values($myFruitsArr);

print_r($myFruitsArrValues);

/*
Output:
Array
(
   [0] => Apple
   [1] => Banana
   [2] => Cashew
   [3] => Mango
)
*/

The output of array_values() looks like what happens when you print a regular array with the print_r() function, but it’s not. What happens is it also assigns indices to those printed values.

An example with an associative array would make that clearer:

$myFruitsWithColors = [
 "apple" => "red",
 "banana" => "yellow",
 "orange" => "orange",
 "grape" => "purple",
 "watermelon" => "green",
];

$myFruitsWithColorsValues = array_values($myFruitsWithColors);
print_r($myFruitsWithColorsValues);

/*
Output:

Array
(
   [0] => red
   [1] => yellow
   [2] => orange
   [3] => purple
   [4] => green
)
*/

The array_reduce() Function

The array_reduce() function is used to "reduce" an array to a single value by applying a callback function to each element of the array. It works like the reduce() array method of JavaScript.

array_reduce() iterates through the array and performs the callback function on each element, accumulating a single result.

That means you can use it for data aggregation and computation, like calculating the total value of items in a shopping cart.

array_reduce() takes 2 required arguments and 1 optional argument. Here’s the syntax:

array_reduce(arraytoReduce, callbackFunction, initialValue)

• arrayToReduce is the array you’re using reduce on

• callbackFunction is the function that will “reduce” the items of the array into a single value

• initialValue is optional. It specifies the initial value of the accumulator. If provided, it will be used as the initial value for the first call to the callback function. If not provided, the first element of the array will be used as the initial accumulator value.

array_reduce() is usually used with numbers:

$myNumbers = [5, 89, 19, 10, 49];

$total = array_reduce($myNumbers, function ($carry, $item) {
 return $carry + $item;
}, 0);

echo $total; // 172

You can extract that callback function into a separate function and pass it in as one of the arguments of the array_reduce() function:

$myNumbers = [5, 89, 19, 10, 49];


function addNums($carry, $item)
{
 return $carry + $item;
}

$total = array_reduce($myNumbers, 'addNums', 0);

echo $total; // 172

array_reduce() also works with strings:

$words = ["Hello", "camper!", "How", "are", "you", "today?"];

// Use array_reduce to concatenate all the strings
$result = array_reduce($words, function ($carry, $item) {
 return $carry . " " . $item;
}, "");

echo $result; //  Hello camper! How are you today?

The sort() Function

The sort() function takes an array and sorts it in ascending order based on the values of its items. It modifies the original array by rearranging its elements in ascending order.

If you have some data in an array that you want to organize in ascending order, the sort() function is perfect for that.

$myNums = [4, 2, 1, 3, 5];
sort($myNums);

print_r($myNums);

/*
Output:

Array
(
   [0] => 1
   [1] => 2
   [2] => 3
   [3] => 4
   [4] => 5
)
*/

The rsort() Function

The rsort() function is similar to sort(), but it sorts the array in descending order instead of ascending order.

$myNums = array(4, 2, 1, 3, 5);
rsort($myNums);

/*
Output:

Array
(
   [0] => 5
   [1] => 4
   [2] => 3
   [3] => 2
   [4] => 1
)
*/

print_r($myNums);

The array_replace() Function

The array_replace() function is used to replace the values of the first array with the values of a provided array. It's perfect for updating data.

array_replace() takes two arguments – the array you want to replace, and the new array.

$myNamesArr1 = ["Zen", "Kay", "Luger"];
$myNamesArr2 = ["Yuan", "Jay", "John"];

$replaceRes = array_replace($myNamesArr1, $myNamesArr2);

print_r($replaceRes);

/*
Output:
Array
(
   [0] => Yuan
   [1] => Jay
   [2] => John
)
*/

If you don’t provide a second value, it returns the only argument you provide:

$myNamesArr1 = ["Zen", "Kay", "Luger"];
$myNamesArr2 = ["Yuan", "Jay", "John"];

$replaceRes = array_replace($myNamesArr1);

print_r($replaceRes);

/*
Output:
Array
(
   [0] => Zen
   [1] => Kay
   [2] => Luger
)
*/

If you pass in three or more arrays as the arguments, the last argument will be the replacement for the first one, not the second:

$myNamesArr1 = ["Zen", "Kay", "Luger"];
$myNamesArr2 = ["Yuan", "Jay", "John"];
$myNamesArr3 = ["Eddy", "White", "Jane"];


$replaceRes = array_replace($myNamesArr1, $myNamesArr2, $myNamesArr3);

print_r($replaceRes);

/*
Output:
Array
(
   [0] => Eddy
   [1] => White
   [2] => Jane
)
*/

You can selectively replace an item in a particular index too:

$myFruitsArr1 = ["a" => "apple", "b" => "banana", "c" => "cherry"];
$myFruitsArr2 = array("b" => "blueberry", "c" => "cranberry");
$replaceRes = array_replace($myFruitsArr1, $myFruitsArr2);

print_r($replaceRes);

/*
Output:
Array
(
   [a] => apple
   [b] => blueberry
   [c] => cranberry
)
*/

The array_reverse() Function

The array_reverse() function is used to reverse the order of elements in an array. It creates a new array with the elements in reverse order.

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
$reversedArr = array_reverse($myFruitsArr);

print_r($reversedArr);

/*
Output:

Array
(
   [0] => Mango
   [1] => Cashew
   [2] => Banana
   [3] => Apple
)
*/

If you remember how the rsort() function works, it’s very similar to how array_reverse() works. The only difference is that rsort() modifies the original array, but array_reverse() does not.

The array_slice() Function

If you want to extract a particular part of an array and return it as a separate array, array_slice() is the ideal function for you to use.

array_slice() allows you to specify the start index, the length of the slice, and whether to preserve the keys of the original array. Here’s the basic syntax:

array_slice(arrayToSlice, startIndex, length, preserve)

• arrayToSlice is the array you want to use array_slice() on

• startIndex is the index you want to start the slicing from

• length is how far you want the slicing to go in the arrayToSlice. It is optional.

• preserve specifies whether you want the index(es) of the array to change or not. It’s a boolean.

The example below starts the slicing from the second element in the array, which means it’ll leave the first element out and return the others:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango", "Avocado", "Pineapple"];
$slicedArr = array_slice($myFruitsArr, 1);

print_r($slicedArr);

/*
Output:

Array
(
   [0] => Banana
   [1] => Cashew
   [2] => Mango
   [3] => Avocado
   [4] => Pineapple
)
*/

Don’t forget you can specify the number of items you want from the slicing by specifying a third optional argument:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango", "Avocado", "Pineapple"];
$slicedArr = array_slice($myFruitsArr, 1, 3);

print_r($slicedArr);

/*
Output:

Array
(
   [0] => Banana
   [1] => Cashew
   [2] => Mango
)
*/

If you want to preserve the indexes, you can specify a fourth optional boolean argument of true:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango", "Avocado", "Pineapple"];
$slicedArr = array_slice($myFruitsArr, 1, 3, true);

print_r($slicedArr);

/*
Output:

Array
(
   [1] => Banana
   [2] => Cashew
   [3] => Mango
)
*/

The array_sum() Function

array_sum() adds all the numeric values in an array together and returns the result. The only parameter it takes is the array containing the numeric values.

$myNums = [5, 6, 9, 20, 1];

$total = array_sum($myNums);
echo $total; // 41

If used on an array containing strings, array_sum() throws the error Warning: array_sum(): Addition is not supported on type string in /location/index.php on line # :

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango", "Avocado", "Pineapple"];
$total = array_sum($myFruitsArr);

sum() function error

The array_merge() Function

array_merge() merges two or more arrays. That means it's ideal for combining multiple arrays into one giant array.

$array1 = [1, 2, 3];
$array2 = [4, 5, 6, 7, 8];

$result = array_merge($array1, $array2);

print_r($result);
/*
Output:


Array
(
   [0] => 1
   [1] => 2
   [2] => 3
   [3] => 4
   [4] => 5
   [5] => 6
   [6] => 7
   [7] => 8
)
*/

You can also use array_merge() on associative arrays:

$array1 = [
 'fname' => 'John',
 'sex' => 'male',
];


$array2 = [
 'lname' => 'Doe',
 'favColor' => 'red',
];

$result = array_merge($array1, $array2);
print_r($result);

/*
Output:

Array
(
   [fname] => John
   [sex] => male
   [lname] => Doe
   [favColor] => red
)
*/

If the arrays contain similar keys, the last one overrides the previous one(s) in the result:

$array1 = [
 'fname' => 'John',
 'sex' => 'male',
];


$array2 = [
 'fname' => 'Jane',
 'favColor' => 'red',
];

$result = array_merge($array1, $array2);
print_r($result);

/*
Output:

Array
(
   [fname] => Jane
   [sex] => male
   [favColor] => red
)
*/

If a single array is passed into array_merge() and the keys are not sequential integers starting from 0, but rather a sequence like 3, 7, 8, the resulting array will have its keys reindexed starting from 0:

$myArray = [3 => 'Barn', 7 => 'Silo', 8 => 'Tank'];
$res = array_merge($myArray);

print_r($res);

/*
Array
(
   [0] => Barn
   [1] => Silo
   [2] => Tank
)
*/

The array_filter() Function

The array_filter() function “filters” the items of an array based on a callback function you pass into it. You can use it to remove unnecessary items from an array.

If the callback function returns true for an element in the array, that element is included in the resulting array, otherwise, it is excluded.

array_filter() takes up to 3 arguments. The basic syntax looks like this:

array_filter(arrayToFilter, callbackFunction, flag)

• arrayToFilter is the array you want to filter. It’s a compulsory argument.

• callbackFunction is the callback function you want to apply to each element of the array. If not provided, all elements evaluated to true will be included in the result.

• flag specifies whether the array keys will be preserved or reindexed. Possible values are ARRAY_FILTER_USE_KEY, ARRAY_FILTER_USE_BOTH, and ARRAY_FILTER_USE_BOTH.

Here’s an example that gets the even numbers from an array of numbers:

$array = [76, 11, 12, 22, 13, 43, 54];
$getEvenNums = array_filter($array, function ($value) {
 return $value % 2 == 0;
});


print_r($getEvenNums);


/*
Array
(
   [0] => 76
   [2] => 12
   [3] => 22
   [6] => 54
)
*/

Here’s a more complex example of getting everyone with the first name “John” in a multidimensional associative array:

$persons = [
 ['first' => 'John', 'last' => 'Doe'],
 ['first' => 'Janet', 'last' => 'Jackson'],
 ['first' => 'John', 'last' => 'Smith'],
 ['first' => 'Jane', 'last' => 'Doe'],
 ['first' => 'David', 'last' => 'Lee'],
 ['first' => 'John', 'last' => 'Olga']
];


$personsWithJohnFirstnames = array_filter($persons, function ($person) {
 return $person['first'] === "John";
});

print_r($personsWithJohnFirstnames);

/*
Output:

Array
(
   [0] => Array
       (
           [first] => John
           [last] => Doe
       )

   [2] => Array
       (
           [first] => John
           [last] => Smith
       )

   [5] => Array
       (
           [first] => John
           [last] => Olga
       )

)
*/

Remember that if you pass in the array as the only argument, the resulting array will contain every item that evaluates to true:

$array = [9, 4, 10, 0, 3];
$result = array_filter($array);


print_r($result);


/*
Output:


Array
(
   [0] => 9
   [1] => 4
   [2] => 10
   [4] => 3
)
*/

The array_map() Function

The array_map() function transforms all the elements of an array based on a callback function passed into it. It then returns a new array containing the transformed elements.

You can think about array_map() as a more convenient way to "loop" through an array, even though it's technically not a loop.

array_map() takes two compulsory parameters – the callback function and the array you want to transform.

Here's an example in which all the numbers of an array are squared:

$numbers = [5, 8, 3, 4];

$squaredNumbers = array_map(function ($num) {
 return $num * $num;
}, $numbers);

print_r($squaredNumbers);

/*
Output:

Array
(
   [0] => 25
   [1] => 64
   [2] => 9
   [3] => 16
)
*/

You can also extract the callback function into a separate function and pass it in:

function squareNums($num)
{
 return $num * $num;
}

$numbers = [5, 8, 3, 4];
$squaredNumbers = array_map('squareNums', $numbers);

print_r($squaredNumbers);

/*
Output:

Array
(
   [0] => 25
   [1] => 64
   [2] => 9
   [3] => 16
)
*/

You can also use the array_map() function on an array of strings. The example below converts all the fruits in the $fruitsArr array to uppercase:

$fruitsArr = ['mango', 'apple', 'orange', 'strawberry'];

function toUpperCase($str)
{
 return strtoupper($str);
}

$uppercasedFruits = array_map('toUpperCase', $fruitsArr);

print_r($uppercasedFruits);

/*
Output:

Array
(
   [0] => MANGO
   [1] => APPLE
   [2] => ORANGE
   [3] => STRAWBERRY
)
*/

Here's an example using an associative array where all the values are prefixed with prefix_:

$fruitsArr = [
 'fruit1' => 'mango',
 'fruit2' => 'banana',
 'fruit3' => 'orange',
];


function addPrefixToFruits($fruit)
{
 return 'prefix_' . $fruit;
}

$prefixedFruits = array_map('addPrefixToFruits', $fruitsArr);

print_r($prefixedFruits);

/*
Output:

Array
(
   [fruit1] => prefix_mango
   [fruit2] => prefix_banana
   [fruit3] => prefix_orange
)
*/

Note: If you're wondering what the difference between array_map() and array_filter() is, the catch is that array_map() transforms all the elements of the array based on a callback function. In contrast, array_filter() returns any element of the array that matches the callback function passed into it.

The array_search() Function

The array_search() function is used to search for a given value within an array. If the value is found, it returns the key of the value, otherwise, it returns nothing.

array_search() takes up to 3 arguments. Here's the syntax:

array_search(valueToSearch, arrayToSearch, strict)

• valueToSearch is the value you're looking for

• arrayToSearch is the array in which you want to search for the value

• strict is an optional boolean argument that determines whether a strict comparison operator should be used in the search. It's false by default. But if set to true, it will search for identical elements in the array and return them. For example, "1" and 1.

Here's an example checking for the item Cashew in an array of fruits:

$myFruitsArr = [
 "fruit1" => "Apple",
 "fruit2" => "Banana",
 "fruit3" => "Cashew",
 "fruit4" => "Mango",
 "fruit5" => "Avocado",
 "fruit6" => "Pineapple"
];

$checkForCashew = array_search('Cashew', $myFruitsArr);

echo $checkForCashew; // fruit3

And if you use it on a regular array, it will still return the index of the array, which is the key under the hood:

$myFruitsArr = [
 "Apple",
 "Banana",
 "Cashew",
 "Mango",
 "Avocado",
 "Pineapple"
];


$CheckForCashew = array_search('Cashew', $myFruitsArr);


echo $CheckForCashew; // 2

The array_column() Function

The array_column() extracts a single column of values from a multi-dimensional array. It returns an array containing the values of a specified column from the input array.

That means array_column is useful when you want to make an array out of the column of an existing array.

array_column() takes up to 3 arguments. Here's the syntax:

array_column(parentArray, columKey, indexKey)

• parentArray: usually a multidimensional array, it's the array to extract the column of values from

• columnKey: the key or index of the column to extract values from. This can be an integer index or a string key representing the column name.

• indexKey (optional): the column to use as the index for the returned array. If omitted or set to null, numerical indexes are used.

The example below uses the name key of the array to create a new array:

$pupils = [
 ["id" => 1, "name" => "John", "score" => 90],
 ["id" => 2, "name" => "Jane", "score" => 79],
 ["id" => 3, "name" => "Will", "score" => 83],
 ["id" => 4, "name" => "Jill", "score" => 92],
 ["id" => 5, "name" => "steven", "score" => 100],
];

$arrayFromNameColumn = array_column($pupils, 'name');

print_r($arrayFromNameColumn);

/*
Output:

Array
(
   [0] => John
   [1] => Jane
   [2] => Will
   [3] => Jill
   [4] => steven
)
*/

Remember you can pass in another key in the array to make its values the indexes of the resulting array. I'll use the "id" for that:

$pupils = [
 ["id" => 1, "name" => "John", "score" => 90],
 ["id" => 2, "name" => "Jane", "score" => 79],
 ["id" => 3, "name" => "Will", "score" => 83],
 ["id" => 4, "name" => "Jill", "score" => 92],
 ["id" => 5, "name" => "steven", "score" => 100],
];

$arrayFromNameColumn = array_column($pupils, "name", "id");

print_r($arrayFromNameColumn);

/*
Output:



Array
(
   [1] => John
   [2] => Jane
   [3] => Will
   [4] => Jill
   [5] => steven
)
*/

The in_array() Function

in_array() is used to check if a particular element is in an array. It takes two compulsory parameters and one optional parameter.

Here's the syntax:

in_array(itemToSearch, arrayToSearchThrough, strict)

• itemToSearch is the element you're looking for. It's compulsory.

• arrayToSearchThrough is the array in which you want to search for itemToSearch. It's also compulsory.

• strict is a boolean value that lets you specify whether you want the search to be done with loose comparison (==) or strict comparison (===). It defaults to false.

Here's the in_array() function in action:

$myFruitsArr1 = ["Apple", "Banana", "Cashew", "Mango"];
var_dump(in_array("Banana", $myFruitsArr1)); // bool(true)
var_dump(in_array("banana", $myFruitsArr1)); // bool(false)

Because the result of in_array() is a boolean, it's commonly used in conditionals:

$myFruitsArr1 = ["Apple", "Banana", "Cashew", "Mango"];


if (in_array("Banana", $myFruitsArr1)) {
 echo "Banana is in the array"; // Banana is in the array
} else {
 echo "Banana is not in the array";
}

How to Loop Through Arrays in PHP

PHP provides the traditional for loop for iterating through both indexed and associative arrays. You can also use a cleaner forEach() function for the same purpose.

How to Loop through an Indexed Array

Here's the basic syntax for looping through an array with a for loop:

for ($i=0; $i < count($arr); $i++) {
 # do something with $arr ...
}

And here's that of foreach():

foreach ($arrs as $arr) {
 # do something with $arr
}

Here's an example using the for loop to loop through an array of strings:

$retiredBallers = ["Pele", "Maradona", "Zidane", "Lampard", "Okocha"];

for ($i = 0; $i < count($retiredBallers); $i++) {
 echo $retiredBallers[$i] . "<br>";
}

/*
Output:

Pele
Maradona
Zidane
Lampard
Okocha
*/

You can loop through numbers the same way:

for ($i = 0; $i < count($myNums); $i++) {
 echo $myNums[$i] . "<br>";
}

/*
Output:

45
8
90
2
5
*/

You can also print the index for each element of the array:

for ($i = 0; $i < count($myNums); $i++) {
 echo $myNums[$i] . " is at index " . $i . "<br>";
}

/*
Output:

45 is at index 0
8 is at index 1
90 is at index 2
2 is at index 3
5 is at index 4
*/

Don't forget you can use foreach to loop through any array too:

foreach ($retiredBallers as $retiredBaller) {
 echo $retiredBaller . "<br>";
}


/*
Pele
Maradona
Zidane
Lampard
Okocha
*/

You can get the index this way as well:

foreach ($retiredBallers as $key => $retiredBaller) {
 echo $retiredBaller . " is at index " . $key . "<br>";
}


/*
Pele is at index 0
Maradona is at index 1
Zidane is at index 2
Lampard is at index 3
Okocha is at index 4
*/

How to Loop through an Associative Array

An associative array can be complex with items nested deep into it. So, you have to get what you want from it instead of displaying everything in it.

Here's how I got the name and country of some retired footballers from a $retiredFootballers array:

$retiredFootballers = [
 [
   "name" => "Pele",
   "position" => "Forward",
   "country" => "Brazil",
   "club" => "Santos"
 ],


 [
   "name" => "Diego Maradona",
   "position" => "Attacking Midfielder",
   "country" => "Argentina",
   "club" => "Napoli"
 ],


 [
   "name" => "Zinedine Zidane",
   "position" => "Midfielder",
   "country" => "France",
   "club" => "Real Madrid"
 ],


 [
   "name" => "Ronaldinho",
   "position" => "Attacking Midfielder",
   "country" => "Brazil",
   "club" => "Barcelona"
 ],


 [
   "name" => "David Beckham",
   "position" => "Midfielder",
   "country" => "England",
   "club" => "Manchester United"
 ],
 [
   "name" => "Jay-Jay Okocha",
   "position" => "Midfielder",
   "country" => "Nigeria",
   "club" => "Bolton Wanderers"
 ]
];


for ($i = 0; $i < count($retiredFootballers); $i++) {
 echo $retiredFootballers[$i]["name"] . " is from " . $retiredFootballers[$i]["country"] . "<br>";
 echo "<hr>";
}

Doing the same with foreach() is cleaner because you don't need an $i variable:

foreach ($retiredFootballers as $retiredFootballer) {
 echo $retiredFootballer["name"] . " is from " . $retiredFootballer["country"] . "<br>";
 echo "<hr>";
}

How to Loop through an Array Inside the HTML Template

Any HTML in your PHP file is the template for that PHP file. This means you can do the looping inside the HTML, because you can write PHP inside that HTML.

Here's how you can do that:

<?php
$retiredBallers = ["Pele", "Maradona", "Zidane", "Lampard", "Okocha"];
?>

<h1 class="text-center mt-3 bd-highlight">Looping Through Arrays in PHP</h1>

 <h2 class="mx-5 mt-5">Some Retired Footballers</h2>

 <ul class="list-group mx-5" style="width: 25%;">
   <!-- The loop -->
   <?php for ($i = 0; $i < count($retiredBallers); $i++) : ?>
     <li class="list-group-item"> <?= $retiredBallers[$i] ?> </li>
   <?php endfor; ?>
 </ul>

You can do the same with foreach():

<?php
$retiredBallers = ["Pele", "Maradona", "Zidane", "Lampard", "Okocha"];
?>

<h1 class="text-center mt-3 bd-highlight">Looping Through Arrays in PHP</h1>

 <h2 class="mx-5 mt-5">Some Retired Footballers</h2>


 <ul class="list-group mx-5" style="width: 25%;">
   <!-- The loop -->
   <?php foreach ($retiredBallers as $retiredBaller) : ?>
     <li class="list-group-item"> <?= $retiredBaller ?> </li>
   <?php endforeach; ?>
 </ul>

Here's what that looks like in the browser:

Looping through arrays using PHP for loop inside HTML

Let's use foreach() to display the $retiredFootballers associative array too:

<h1 class="text-center mt-3 bd-highlight">Looping Through Arrays in PHP</h1>


 <h2 class="mx-5 mt-5">Some Retired Footballers</h2>


 <ul class="list-group mx-5" style="width: 25%;">
   <!-- The loop -->
   <?php foreach ($retiredFootballers as $retiredFootballer) : ?>
     <li class="list-group-item"> <?= $retiredFootballer["name"] . " is from " . $retiredFootballer["country"] ?> </li>
   <?php endforeach; ?>
 </ul>

Looping through arrays using PHP foreach function inside HTML

Conclusion

Learning how to work with arrays is a foundational step toward proficiency in PHP and web development. That's why this handbook walked you through the various capabilities of PHP arrays, from creation to manipulation and looping.

You should now be confident using arrays to effectively manage data in PHP, whether for simple lists with indexed arrays, or complex structures with associative and multidimensional arrays.

Moving forward, I encourage you to experiment with various array functions to improve your code and tackle different programming challenges. Also, consider exploring multidimensional and associative arrays for more complex data scenarios.

As you grow more proficient with PHP arrays, integrating them with database operations can further enhance your web applications. A good example is MongoDB, a NoSQL database that integrates seamlessly with PHP. Check out the MongoDB PHP docs for more info.

Also, look out for the second article of this series.

Keep coding!

By implementing this advanced approach, you'll have a robust and highly secure authentication mechanism that significantly enhances data protection and user authentication.

Table Of Contents

• What Are JSON Web Tokens (JWTs)?
• Getting Started
• Sending Our Requests
• Testing Database Connection
• Registering Users
• Setting up the JWT Class
• The Encode Method
• The Login Endpoint
• Protected Resources And Decoding JSON Web Tokens
• What Happens Now?
• How to Set Up The Decode Method In Our JWT Class
• Protected Resources
• Checking The Headers For The Correct Authorization Scheme
• Creating Instances In The API Entry Point
• Suggestions
• How to Implement Token Expiration
• Updated Folder Structure
• Conclusion

What Are JSON Web Tokens (JWTs)?

A JSON Web Token is a string composed of three parts, each joined by a period (.), and then base64url encoded.

Here are the three parts of a JWT:

Header: A header consists of metadata about the token, such as the token type and the algorithm used.

 $header = json_encode([
            "alg" => "HS256",
            "typ" => "JWT"
        ]);

        $header = $this->base64urlEncode($header);

Payload: Within the JWT structure, the payload encapsulates specific indices referred to as claims, housing user data that is encoded using base64url.

$payload = [
    "id" => $user['id'],
    "name" => $user["name"]
];

  $payload = $this->base64urlEncode($payload);

Signature: This is generated by creating a hash of the header and payload, combined with a secret key typically generated as either 256 bits or 32 bytes. By convention, the secret key matches the size of the hash output.

We will use the link below to generate a secret key we need for this project:

 $signature = hash_hmac("sha256", $header . "." . $payload, $secret_key, true);
 $signature = $this->base64urlEncode($signature);

A JSON Web Token is simply a combination of the header, payload, and signature, where each component is concatenated together with periods (“.”) in between:

$header . "." . $payload . "." . $signature;

Getting Started

To kickstart this project, please download the project starter from the following link: PHP Authentication with JWT Tutorial.

Once downloaded, carefully review the README.md file included in the repository for comprehensive information regarding pre-installed packages. The file contains essential details such as notes on security and best practices. Taking the time to thoroughly read through the README will ensure a smooth setup and understanding of the project.

To initiate the setup of the project, utilize Git by executing the following command:

git clone https://github.com/Oghenekparobo/php_auth_jwt_tut.git

This command will clone the project repository to your local system, allowing you to proceed with the installation and configuration process.

After cloning the project from GitHub, your project structure should align with the following layout:

project structure on VS Code

project_root/ │ ├── api/ │ ├── .htaccess │ ├── index.php │ └── (other PHP files) │ ├── vendor/ │ ├── (Composer dependencies) │ └── ... │ ├── .env ├── README.md └── (other project files)

In this structure:

• The api/ directory contains PHP files responsible for handling API requests and responses. It includes an .htaccess file for URL rewriting and an index.php file, along with other PHP files for specific functionalities.
• The vendor/ directory contains Composer dependencies installed for the project. These dependencies are managed by Composer and should not be modified directly.
• The .env file contains environment variables necessary for configuring the application environment, such as database credentials and API keys.
• The README.md file provides essential information about the project, including setup instructions, usage guidelines, and any other relevant details.

Ensure that you maintain this structure and follow any instructions provided in the README file to set up and run the project successfully.

Sending Our Requests

When referring to our project, the URL would typically be structured as follows: http://localhost/php_auth_jwt_tut/api. However, depending on the project's name, this URL might vary accordingly. Nonetheless, the base URL remains consistent: [http://localhost/php_auth_jwt_tut/api](http://localhost/php_auth_jwt_tut/api.).

Thanks to our implementation of URL rewriting in the .htaccess file, additional prefixes such as index.php or .php are unnecessary when accessing our URLs. We've meticulously configured our server settings to ensure seamless navigation without these prefixes.

In simpler terms, accessing our project’s API endpoints can be done directly from the base URL: http://localhost/php_auth_jwt_tut/api. This streamlined approach enhances user experience and eliminates unnecessary complexity for this project.

To make testing our project’s API endpoints easier, we can use the index.php file located in the api folder. This file acts as the starting point for our application and contains all the necessary setups.

Firstly, we’ll simply print out any desired output within the index.php file. This helps us confirm that our endpoint is working correctly. Then, we'll test the endpoint by accessing the URL: [http://localhost/php_auth_jwt_tut/api](http://localhost/php_auth_jwt_tut/api.).

Additionally, we’ll set up our database connection to ensure smooth communication between our API endpoints and the database. All the required configurations are included within the bootstrap.php file for convenience. By importing this file into our index.php, managing configurations and imports becomes simpler.

Furthermore, it’s important to note that we’ll be enforcing strict typing throughout our codebase. This means that we’ll specify the types of data our variables and functions can hold or return. This helps maintain consistency and reduces the chances of errors in our code.

Testing Database Connection

Before proceeding with the steps outlined in this section, it is imperative to thoroughly review the README file of this project. This will provide you with comprehensive instructions on how to set up your database properly. In the root of the project, you will find a file named college.sql, which contains the necessary tables for your database. Simply follow the instructions provided in the README file to import and configure the database accordingly.

In the src folder of our project, we find essential classes and gateways, including the necessary database connections for our project. The file responsible for this is database.php, already configured to establish a PDO database connection.

Note: Before use, ensure to adjust or configure the variables in the .env environment file to match your database credentials.

.env file:

DB_HOST= 'db_host'
DB_NAME = 'db_name'
DB_USER = 'db_user'
DB_PASS = 'db_password'
SECRET_KEY = "secret_key"

bootstrap.php:

require dirname(__DIR__)  . '/vendor/autoload.php';

set_error_handler('ErrorHandler::handleError');
set_exception_handler('ErrorHandler::handleException');

$dotenv = Dotenv\Dotenv::createImmutable(dirname(__DIR__));
$dotenv->load();

header("Content-type: application/json; charset=UTF-8");


$database = new Database(
    $_ENV["DB_HOST"],
    $_ENV["DB_NAME"],
    $_ENV["DB_USER"],
    $_ENV["DB_PASS"]
);

The code prepares our application by doing a few key things. First, it loads the necessary files to handle errors and exceptions smoothly. Then, it grabs environment variables from a special file (.env) where we store important settings like database information. After that, it tells the application to send back data in a specific format (JSON). Finally, it sets up a connection to the database using the information from the .env file. This setup ensures our application runs smoothly and securely.

database.php:

class Database
{
    private ?PDO $conn = null;

    public function __construct(
        private string $host,
        private string $name,
        private string $user,
        private string $password
    ) {
    }

    public function getConnection(): ?PDO
    {
        try {
            if ($this->conn === null) {
                $this->conn = new PDO("mysql:host=$this->host;dbname={$this->name}", $this->user, $this->password);
                $this->conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                $this->conn->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
                $this->conn->setAttribute(PDO::ATTR_STRINGIFY_FETCHES, false);
            }

            return $this->conn;
        } catch (PDOException $e) {
            echo "Connection failed: " . $e->getMessage();
            return null;
        }
    }
}

Include an echo statement to indicate a successful database connection before returning the $this->conn object. This helps to verify the connection status and ensure smooth operation of the application. For instance:

try {
    if ($this->conn === null) {
        $this->conn = new PDO("mysql:host=$this->host;dbname={$this->name}", $this->user, $this->password);
        $this->conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $this->conn->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
        $this->conn->setAttribute(PDO::ATTR_STRINGIFY_FETCHES, false);

        // Echo message indicating successful database connection
        echo "Database connected successfully.";
    }

    return $this->conn;
} catch (PDOException $e) {
    echo "Connection failed: " . $e->getMessage();
    return null;
}

Proceed to the index.php file to invoke the getConnection function and verify the application's functionality. It's important to note that we've initialized our Database class in our bootstrap PHP file, ensuring seamless integration and operation.

Invoking the getConnection function in the index.php file should look like this:

index.php file

Upon successfully implementing the database connection and firing our request, you can expect the following response:

database connected successfully

Note: Make sure you clear the echo after we are done.

Registering Users

To efficiently manage user data, we will implement a minimal frontend solution by creating a new file named register.php in the root directory of our project. Additionally, we will introduce a stylesheet named style.css to enhance the visual presentation of the registration page.

We will establish a connection to our database, facilitating the seamless addition of users to the user table within our college database. Upon successful user registration, a confirmation message will be echoed to affirm the addition of the user to the database.

register.php:

require __DIR__ . "/vendor/autoload.php";

if ($_SERVER["REQUEST_METHOD"] === "POST") {

    $dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
    $dotenv->load();

    $database = new Database(
        $_ENV["DB_HOST"],
        $_ENV["DB_NAME"],
        $_ENV["DB_USER"],
        $_ENV["DB_PASS"]
    );

    $conn = $database->getConnection();

    $sql = "INSERT INTO user (name, username, password_hash)
            VALUES (:name, :username, :password_hash)";

    $stmt = $conn->prepare($sql);

    $password_hash = password_hash($_POST["password"], PASSWORD_DEFAULT);


    $stmt->bindValue(":name", $_POST["name"], PDO::PARAM_STR);
    $stmt->bindValue(":username", $_POST["username"], PDO::PARAM_STR);
    $stmt->bindValue(":password_hash", $password_hash, PDO::PARAM_STR);


    $stmt->execute();

    echo "Thank you for registering.";
    exit;
}

?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Registration</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h2>User Registration</h2>
        <form action="register.php" method="post">
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group">
                <input type="submit" value="Register">
            </div>
        </form>
    </div>
</body>

</html>

style.css:

body,
html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 300px;
  margin: 0 auto;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  font-weight: bold;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type="submit"] {
  width: 100%;
  padding: 10px;
  border: none;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #0056b3;
}

Note: Ensure that these files are placed in the root directory of your project. The user interface will appear as follows:

Registration process:

user registration form

Successful registration:

successful registration page

Our database structure is illustrated in the image below:

database structure on phpMyAdmin

Kudos! You deserve a big glass of juice for getting to this point, now let’s get to the next part, which is creating an JWT from scratch!

Setting up the JWT Class

In our project template, the Jwt.php file has already been created. Now, let’s proceed to create our Jwt class and implement the logic for encoding and generating a JWT token.

Encoding To JWT

In order to create a JWT, we need to convert our header, payload, and signature to base64url encoding. However, PHP doesn’t support the Base64URL standard, Therefore, we will develop our custom Base64URL encoding method to perform the necessary encoding operation.

Please copy the following code snippet and paste it into the Jwt class located in the src folder.

class Jwt
{

    public function __construct(private string $key)
    {

    }


    private function base64URLEncode(string $text): string
    {

        return str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($text));
    }


}

This class is responsible for encoding JWT tokens using the base64url encoding scheme. It includes a constructor that accepts a key parameter, which presumably represents the secret key used for encoding the tokens. Additionally, it contains a private method named base64URLEncode, which performs the base64URL encoding operation.

The base64URLEncode Method: The base64urlEncode method is a private function within the Jwt class. It takes a string parameter, text, and returns the base64URL encoded version of the input string. The method first applies the standard base64 encoding to the input text using the base64_encode function.

Then, it replaces the characters ‘+’ (plus), ‘/’ (slash), and ‘=’ (equals sign) with ‘-’ (hyphen), ‘_’ (underscore), and an empty string, respectively. This substitution is necessary to ensure compatibility with the base64URL encoding scheme, which uses URL-safe characters. Finally, the method returns the base64URL encoded string.

Overall, the base64URLEncode method provides a crucial functionality for encoding data in JWT tokens using the base64URL encoding scheme, which is commonly used in JWT implementations.

The encode Method

Paste the following code snippet in your Jwt class:

public function encode(array $payload): string
    {

        $header = json_encode([
            "alg" => "HS256",
            "typ" => "JWT"
        ]);

        $header = $this->base64URLEncode($header);
        $payload = json_encode($payload);
        $payload = $this->base64URLEncode($payload);

        $signature = hash_hmac("sha256", $header . "." . $payload, $this->key, true);
        $signature = $this->base64URLEncode($signature);
        return $header . "." . $payload . "." . $signature;
    }

First, we have a class called Jwt. This class helps us create JWT tokens, In the constructor of the Jwt class, we specified a secret key. This secret key is important for creating and verifying the tokens on the signature component.

The encode method is where the magic happens. It takes some data (which we call the payload) and turns it into a JWT token. Here’s how it works:

1. We create a header for the token. This header contains information about how the token is encrypted and what type of token it is. We then turn this header into a base64URL format.
2. Next, we take the payload data (the information we want to include in the token) and turn that into a base64URL format too.
3. After that, we combine the encoded header and payload with our secret key to create a signature. This signature helps ensure that the token hasn’t been tampered with.
4. Finally, we put everything together; the encoded header, payload, and signature to create the final JWT token. This token is what we can use in our applications to authenticate users and authorize access to certain resources.

The base64URLEncode method ensures that data is encoded in a format suitable for URLs, making it safe for transmission over the web. Within our Jwt class, this method is employed internally by the encode function to encode both the header and payload sections of the token.

With that being said, let’s proceed to test and see our first JWT token, hurray!

The Login Endpoint

In our project, the api folder serves as the entry point for requests. Now that we’ve implemented the algorithm to encode and create a JWT token, let’s proceed to test it. To do this, we’ll create a login.php file within our api folder. In this file, we’ll send a request containing the username and password of the user profiled or created in our frontend register.php UI. We’ll pass the required user details in JSON format:

{
    "username": "test",
    "password": "12345"
}

Please integrate the following code snippet into the login.php file located within our api directory:

require __DIR__ . '/bootstrap.php';

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    header('ALLOW: POST');
    exit();
}

$contentType = isset($_SERVER["CONTENT_TYPE"]) ? trim($_SERVER["CONTENT_TYPE"]) : '';


if ($contentType !== 'application/json') {
    http_response_code(415);
    echo json_encode(["message" => "Only JSON content is supported"]);
    exit();
}

$data = json_decode(file_get_contents('php://input'), true);

if ($data === null) {
    http_response_code(400);
    echo json_encode(["message" => "Invalid JSON data"]);
    exit();
}


if (!array_key_exists('username', $data) || !array_key_exists('password', $data)) {
    http_response_code(400);
    echo json_encode(["message" => "Missing login credentials"]);
    exit();
}

This code snippet serves as the backend logic for handling user login requests. It begins by including the bootstrap.php file to initialize essential components. Then, it checks if the incoming request method is POST, returning a “Method Not Allowed” error if not.

Next, it verifies that the content type of the request is JSON, responding with an “Unsupported Media Type” error if not. The code proceeds to decode the JSON data from the request body and checks its validity. If the JSON data is invalid or lacks the “username” and “password” keys, it returns a “Bad Request” error.

Before proceeding with our login endpoint, we need to configure our UserGateway class, which is already available in our project template within the src folder. This class facilitates interaction with the user data in the database. The provided snippet initializes the class and defines a method getByUsername() to fetch user data based on the provided username.

class UserGateway
{

    private PDO $conn;

    public function __construct(Database $database)
    {
        $this->conn = $database->getConnection();
    }


    public function getByUsername(string $username): array | false
    {
        $sql = 'SELECT * FROM user WHERE username = :username';
        $stmt = $this->conn->prepare($sql);
        $stmt->bindValue(':username', $username, PDO::PARAM_STR);

        $stmt->execute();

        return $stmt->fetch(PDO::FETCH_ASSOC);
    }
}

You will see the need for this as we go on.

Proceed to login.php.

Okay after that quick commercial break, we can create a class instance called $user_gateway and pass our $database connection to it. Next, we retrieve user data based on the provided username from the $user_gateway instance using the getByUsername() method. If no user is found (indicating invalid authentication), we return a 401 HTTP response status along with a corresponding error message in JSON format.

We validate the provided password against the hashed password stored in the user data. If the password verification fails, we return a similar 401 status and error message. If authentication is successful, we construct a payload containing the user's ID and name. Subsequently, we create a JWT token by encoding the payload using the Jwt class instantiated with the secret key from the environment variables. Finally, we respond with the generated token in JSON format, allowing access to protected resources, which will be implemented in a later section.

The code to implement this logic would be the following:

$user_gateway = new UserGateway($database);

$user = $user_gateway->getByUsername($data['username']);

if ($user === false) {
    http_response_code(401);
    echo json_encode(["message" => "invalid authentication"]);
    exit;
}

if (!password_verify($data['password'], $user['password_hash'])) {
    http_response_code(401);
    echo json_encode(["message" => "invalid authentication"]);
    exit;
}


$payload = [
    "id" => $user['id'],
    "name" => $user["name"]
];


$JwtController = new Jwt($_ENV["SECRET_KEY"]);

$token =$$JwtController->encode($payload);

echo json_encode(["token" => $token]);

Full login.php code:

<?php

require __DIR__ . '/bootstrap.php';

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    header('ALLOW: POST');
    exit();
}

$contentType = isset($_SERVER["CONTENT_TYPE"]) ? trim($_SERVER["CONTENT_TYPE"]) : '';


if ($contentType !== 'application/json') {
    http_response_code(415);
    echo json_encode(["message" => "Only JSON content is supported"]);
    exit();
}

$data = json_decode(file_get_contents('php://input'), true);

if ($data === null) {
    http_response_code(400);
    echo json_encode(["message" => "Invalid JSON data"]);
    exit();
}


if (!array_key_exists('username', $data) || !array_key_exists('password', $data)) {
    http_response_code(400);
    echo json_encode(["message" => "Missing login credentials"]);
    exit();
}

$user_gateway = new UserGateway($database);

$user = $user_gateway->getByUsername($data['username']);

if ($user === false) {
    http_response_code(401);
    echo json_encode(["message" => "invalid authentication"]);
    exit;
}

if (!password_verify($data['password'], $user['password_hash'])) {
    http_response_code(401);
    echo json_encode(["message" => "invalid authentication"]);
    exit;
}


require __DIR__ . "/tokens.php";

$refresh_token_gateway = new RefreshTokenGateway($database, $_ENV["SECRET_KEY"]);

$refresh_token_gateway->create($refresh_token, $refresh_token_expiry);

Now that we have set up our login endpoint, established database connections, and implemented the JWT encoding algorithm, nothing stands in our way of obtaining our first JWT token. Let us proceed to test our application with the following steps:

1. Please navigate to our user interface for registering users. The URL should be http://localhost/php_auth_jwt_tut/register.php if you followed the project structure.
2. Send the username and password of the created user to the login endpoint (http://localhost/php_auth_jwt_tut/api/login.php) in JSON format, like this, and fire the request:

endpoint testing

Voila! Just like that, we obtain our JWT token!

Protected Resources And Decoding JSON Web Tokens

Having successfully generated a JWT token, let us now explore how we can safeguard our resources and verify the token’s contents by decoding it.

You’ll find that our controller classes, StudentController.php, and the gateway class StudentGateway.php, situated in the src folder, has already been configured with essential methods. Now, all that's left is to instantiate these classes in our index.php, serving as the entry point for our requests in the api folder.

To do this add the following code snippet in the index.php file located at the api folder of our project:

<?php

require __DIR__ . '/bootstrap.php';

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    header('ALLOW: POST');
    exit();
}

$contentType = isset($_SERVER["CONTENT_TYPE"]) ? trim($_SERVER["CONTENT_TYPE"]) : '';


if ($contentType !== 'application/json') {
    http_response_code(415);
    echo json_encode(["message" => "Only JSON content is supported"]);
    exit();
}

$data = json_decode(file_get_contents('php://input'), true);

if ($data === null) {
    http_response_code(400);
    echo json_encode(["message" => "Invalid JSON data"]);
    exit();
}


if (!array_key_exists('username', $data) || !array_key_exists('password', $data)) {
    http_response_code(400);
    echo json_encode(["message" => "Missing login credentials"]);
    exit();
}

$user_gateway = new UserGateway($database);

$user = $user_gateway->getByUsername($data['username']);

if ($user === false) {
    http_response_code(401);
    echo json_encode(["message" => "invalid authentication"]);
    exit;
}

if (!password_verify($data['password'], $user['password_hash'])) {
    http_response_code(401);
    echo json_encode(["message" => "invalid authentication"]);
    exit;
}


$payload = [
    "id" => $user['id'],
    "name" => $user["name"]
];


$JwtController = new Jwt($_ENV["SECRET_KEY"]);

$token =$JwtController->encode($payload);

echo json_encode(["token" => $token]);

$user = new UserGateway($database);


$gateway = new StudentGateway($database);

$controller = new StudentController($gateway);


$controller->processRequest($_SERVER['REQUEST_METHOD']);

How the files are structured at this current stage:

file structure on VS Code

Please note that upon testing the endpoint (http://localhost/phpAuthJWT/api) at this point, you’ll receive the following result, without any restrictions applied:

endpoint testing

Note: After setting up the database connection and importing the provided file, college.sql, as instructed, the tables, including the “students” table, are populated with pre-added data. This enables us to view the student details that are currently visible.

What Happens Now?

We establish a custom URL endpoint to retrieve data via the GET HTTP method. The URL, [http://localhost/phpAuthJWT/api/](http://localhost/phpAuthJWT/api/getALLStudents)getAllStudents, will remain functional due to the server configuration specified in our .htaccess file located within the api folder. When making requests to this URL, we’ll include our token in the header using the standard HTTP Authorization request header, adhering to the bearer token format:

Authorization: Bearer

In our src folder, we have set up an Auth class where we will create a method to validate the JWT token. This method verifies if the token is provided in the HTTP header and decodes it.

How to Set Up The Decode Method In Our JWT Class

When setting up the decoding functionality in the Jwt class, as we did with the encoding method, we will ensure that our Jwt class, located in the src folder of our project within the jwt.php file handles this task. To achieve this, we will incorporate the following code snippets into our Jwt class – the new methods are the decode and base64UrlDecode methods, thus completing its structure. The final code will resemble the following:

class Jwt
{

    public function __construct(private string $key)
    {

    }

    public function encode(array $payload): string
    {

        $header = json_encode([
            "alg" => "HS256",
            "typ" => "JWT"
        ]);

        $header = $this->base64URLEncode($header);
        $payload = json_encode($payload);
        $payload = $this->base64URLEncode($payload);

        $signature = hash_hmac("sha256", $header . "." . $payload, $this->key, true);
        $signature = $this->base64URLEncode($signature);
        return $header . "." . $payload . "." . $signature;
    }



    public function decode(string $token): array
    {
        if (
            preg_match(
                "/^(?<header>.+)\.(?<payload>.+)\.(?<signature>.+)$/",
                $token,
                $matches
            ) !== 1
        ) {

            throw new InvalidArgumentException("invalid token format");
        }

        $signature = hash_hmac(
            "sha256",
            $matches["header"] . "." . $matches["payload"],
            $this->key,
            true
        );

        $signature_from_token = $this->base64URLDecode($matches["signature"]);

        if (!hash_equals($signature, $signature_from_token)) {

            // throw new Exception("signature doesn't match");
            throw new InvalidSignatureException;
        }

        $payload = json_decode($this->base64URLDecode($matches["payload"]), true);

        return $payload;
    }


    private function base64URLEncode(string $text): string
    {

        return str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($text));
    }

    private function base64URLDecode(string $text): string
    {
        return base64_decode(
            str_replace(
                ["-", "_"],
                ["+", "/"],
                $text
            )
        );
    }


}

Decode Method:

The decode method is responsible for decoding a JWT token into its respective header and payload components. Here's a brief overview of what it does:

1. Token Validation: First, it verifies if the provided token follows the expected format of three sections separated by periods.
2. Signature Verification: It recalculates the signature based on the header and payload from the token and compares it with the signature provided in the token. This step ensures the integrity of the token.
3. Payload Extraction: If the signature verification passes, it decodes the payload component of the token from base64 URL encoding into a JSON format. This decoded payload contains information about the user associated with the token.
4. Finally, it returns the decoded payload as an associative array.

base64URLDecode Method:

The base64URLDecode method is a helper function used specifically for decoding strings that have been encoded using base64 URL encoding. Here's a breakdown of its functionality:

1. Replace Characters: It first replaces the characters - and _ in the encoded string with + and / respectively. This step is necessary because URL encoding replaces certain characters for safe transmission over the web.
2. Base64 Decoding: After character replacement, it performs the standard base64 decoding operation on the modified string.
3. Finally, it returns the decoded string.

In summary, the decode method validates and extracts the payload from a JWT token, while the base64URLDecode method assists in decoding strings encoded using base64 URL encoding, ensuring the integrity and accuracy of the decoded data.

Protected Resources

Now that we have completed the setup, let’s finalize our Jwt class. It’s essential to restrict access to our endpoints without the required authorization header. For instance, accessing the URL [http://localhost/phpAuthJWT/api/](http://localhost/phpAuthJWT/api/getALLStudents)getAllStudents should be restricted if the necessary authorization header is absent, and access to resources should be denied if the URL is incorrect.

To achieve this, add the following code snippet to the top of your index.php file, which serves as the entry point for accessing our student data. Paste this code after importing the bootstrap.php configuration file.

require __DIR__ . '/bootstrap.php';

$path = parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH);

$parts = explode("/", $path);


$resource = $parts[3];

$id = $parts[4] ?? null;

if ($resource != "getAllStudents") {

    http_response_code(404);
    exit;
}

This snippet shows how we extracted the path from the requested URI using the parse_url() function, isolating the endpoint accessed by the user. Then splitting the path into segments using the explode() function, allowing us to identify the requested resource. If the requested resource is not “getAllStudents”, indicating an invalid endpoint, the code responds with a 404 Not Found status code, signaling that the requested resource does not exist. This ensures that only valid endpoints can be accessed, preventing unauthorized access to our API’s resources.

Note: To verify that our project is functioning as intended, send a request to the “getAllStudents” endpoint at http://localhost/phpAuthJWT/api/getAllStudents

This request will help us ensure that our API is correctly configured and capable of retrieving all student data.

Checking The Headers For The Correct Authorization Scheme

We have established a custom URL, but it is crucial to verify that the JWT token provided in the header is valid. To accomplish this, we will utilize the Auth class, which is already available in our project’s src folder. This class, which was provided with our project template, will assist in ensuring the integrity of the JWT token.

Auth.php:

class Auth
{



    public function __construct(private UserGateway $user_gateway, private Jwt $JwtCtrl)
    {
    }



    public function authenticateJWTToken(): bool
    {

        if (!preg_match("/^Bearer\s+(.*)$/", $_SERVER["HTTP_AUTHORIZATION"], $matches)) {
            http_response_code(400);
            echo json_encode(["message" => "incomplete authorization header"]);
            return false;
        }

        try {
            $data = $this->JwtCtrl->decode($matches[1]);
        } catch (InvalidSignatureException) {

            http_response_code(401);
            echo json_encode(["message" => "invalid signature"]);
            return false;
        } catch (Exception $e) {

            http_response_code(400);
            echo json_encode(["message" => $e->getMessage()]);
            return false;
        }



        return true;
    }
}

This class is responsible for handling the authentication of JWT tokens. Within the class, we have a constructor method that initializes the Auth object with instances of two other classes: UserGateway and Jwt.

Absolutely! Let’s break down the code snippet in a more detailed and narrative manner:

In the provided PHP code snippet, we defined a class named Auth. This class is responsible for handling the authentication of JWT tokens. Within the class, we have a constructor method that initializes the Auth object with instances of two other classes: UserGateway and Jwt.

class Auth
{
    public function __construct(private UserGateway $user_gateway, private Jwt $JwtCtrl)
    {
    }
    // Other methods will go here...
}

The constructor method allows the Auth class to interact with user data through the UserGateway class and handle JWT tokens using the Jwt class.

Next, we have a method called authenticateJWTToken(), which is tasked with verifying the validity of a JWT token present in the HTTP authorization header of incoming requests.

public function authenticateJWTToken(): bool
{

}

Within the authenticateJWTToken() method, the code first checks if the authorization header is properly formatted and contains a valid JWT token.

if (!preg_match("/^Bearer\s+(.*)$/", $_SERVER["HTTP_AUTHORIZATION"], $matches)) {
    http_response_code(400);
    echo json_encode(["message" => "incomplete authorization header"]);
    return false;
}

If the authorization header is incomplete or improperly formatted, the method returns a 400 Bad Request response along with a message indicating the issue.

Next, the code attempts to decode the JWT token using the decode() method of the Jwt class. If the decoding process fails due to an invalid signature or any other exception, appropriate HTTP response codes and error messages are returned.

try {
    $data = $this->JwtCtrl->decode($matches[1]);
} catch (InvalidSignatureException) {
    http_response_code(401);
    echo json_encode(["message" => "invalid signature"]);
    return false;
} catch (Exception $e) {
    http_response_code(400);
    echo json_encode(["message" => $e->getMessage()]);
    return false;
}

If the JWT token is successfully decoded without any exceptions, the method returns true, indicating that the authentication process was successful.

The authenticateJWTToken() method ensures that incoming requests contain a valid JWT token in the Authorization header and handles various error scenarios gracefully to provide appropriate feedback to clients interacting with the API.

Creating Instances In The API Entry Point

Now that we have finished setting up our methods let us add our class instances to enable the protection of our resources from unauthorized users.

index.php:

declare(strict_types=1);

require __DIR__ . '/bootstrap.php';

$path = parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH);

$parts = explode("/", $path);


$resource = $parts[3];

if ($resource != "getAllStudents") {

    http_response_code(404);
    exit;
}


$user = new UserGateway($database);


$JwtCtrl = new Jwt($_ENV["SECRET_KEY"]);

$auth = new Auth($user, $JwtCtrl);

if (!$auth->authenticateJWTToken()) {
    exit;
}



$gateway = new StudentGateway($database);

$controller = new StudentController($gateway);



$controller->processRequest($_SERVER['REQUEST_METHOD']);

Once we’ve incorporated the provided snippet into our index.php, it's crucial to observe the different scenarios that occur when we access our API endpoint at http://localhost/phpAuthJWT/api/getAllStudents.

By accessing this URL, we can witness several possible outcomes, each indicative of a different state or functionality within our application. These outcomes may include:

1. Successful Response: If the authentication process is successful and the JWT token is valid, the API should return a response containing the desired data, such as a list of all students.
2. Invalid Token: In case the JWT token provided in the request’s Authorization header is invalid, expired, or improperly formatted, the API should respond with an error message indicating the issue. This ensures that only authorized users can access the protected resources.
3. Unauthorized Access: If the request does not include a JWT token or lacks proper authorization, the API should respond with a 401 Unauthorized status code, indicating that access to the requested resource is restricted.
4. Invalid Endpoint: If the URL provided does not match any of the defined endpoints or routes within our application, the API should respond with a 404 Not Found status code, signaling that the requested resource does not exist.

By examining these outcomes, we can gain insights into the functionality and reliability of our API, ensuring that it behaves as intended and provides appropriate responses to different types of requests and scenarios.

Working properly with Authorization Header: http://localhost/phpAuthJWT/api/getAllStudents

endpoint testing

Not working properly without Authorization Header: http://localhost/phpAuthJWT/api/getAllStudents

endpoint testing

Suggestions

After setting up our JWT, there’s a whole new world to explore. You can experiment with our API by creating custom URLs for specific tasks, such as finding students by name or letting users create and update their own student profiles by tracking the user_id of the user. You can use various HTTP methods like GET, POST, PATCH, and DELETE to manage data effectively. While this article covers the basics, there’s an abundance of possibilities waiting to be explored when comes to creating a robust API.

JWT tokens provide a convenient and efficient way to handle authentication and authorization in web applications. However, it’s crucial to recognize that they are not absolutely foolproof. It’s essential to avoid putting sensitive information in the payload component of the token, as the payload is typically base64URLEncoded and can be easily decoded. Additionally, the secret key used to sign the token should be kept hidden and never exposed to public information, as it can compromise the security of the system.

In JWT tokens, the header, payload, and signature are all base64URLEncoded, ensuring compatibility with URLs and safe transmission over the web. However, it’s important to note that JWT tokens should have an expiration time to mitigate the risk of token misuse. In the next part, we will explore how to implement token expiration and introduce refresh tokens to enhance the security of our authentication system.

We have explored the implementation of JSON Web Tokens (JWTs) and learned how to utilize them. However, a significant security concern persists: our tokens, specifically referred to as access tokens in this context, can currently access our resources indefinitely. This practice does not align with industry standards. To enhance security, we should implement token expiration for our JWTs. Additionally, adopting a two-token system comprising a refresh token alongside our access token is recommended.

How to Implement Token Expiration

We'll focus on implementing access tokens and refresh tokens. Any necessary additions to our project or database structure will be introduced as we progress through the implementation.

Let's get right into it!

Access tokens must have an expiration mechanism. We need our JWT tokens to automatically expire after a short period, requiring users to request a new token once it expires.

Prompting users to log in every minute when the token expires is not user-friendly. Instead, we can issue a refresh token. The refresh token typically has a longer lifespan than the access token. When the access token expires, the client can leverage the refresh token to obtain a new access token. We will incorporate an endpoint for the client to refresh the access token seamlessly.

Continuing from where we left off, we will now create a refresh endpoint in our api folder. As we know this endpoint serves as our entry point for handling requests related to token refreshing and will be named refresh.php.

<?php
declare(strict_types=1);

require __DIR__ . "/bootstrap.php";

if ($_SERVER["REQUEST_METHOD"] !== "POST") {

    http_response_code(405);
    header("Allow: POST");
    exit;
}

$data = (array) json_decode(file_get_contents("php://input"), true);

if ( ! array_key_exists("token", $data)) {

    http_response_code(400);
    echo json_encode(["message" => "missing token"]);
    exit;
}

$JwtController = new Jwt($_ENV["SECRET_KEY"]);

It checks if the incoming request method is POST; otherwise, it responds with a 405 HTTP status code and allows only POST requests. The script then parses JSON data from the request body, ensuring it contains a “token” key. If the token is missing, it responds with a 400 status code and a JSON message indicating the absence of the token. Finally, the script initializes a Jwt object with a secret key from the environment variables for further token processing.

refresh.php file

Before proceeding with the setup of our refresh endpoint, we will create a class called RefreshTokenGateway.php to handle operations related to refreshing tokens. The RefreshTokenGateway class includes methods for creating, deleting, fetching, and managing expired refresh tokens within our database.

The RefreshTokenGateway class utilizes a PDO connection and a secret key for hashing tokens. Its constructor initializes the database connection and secret key variables. The create method generates a hash for the token and inserts it into the refresh_token table along with its expiration time. The delete method removes a token from the database based on its hash value. The getByToken method retrieves token details based on its hash. Lastly, the deleteExpired method deletes expired tokens from the database, ensuring efficient token management.

Overall, the RefreshTokenGateway class provides essential functionality for maintaining and handling refresh tokens securely within our web application.

RefreshTokenGateway.php:

<?php

class RefreshTokenGateway
{
    private PDO $conn;
    private string $key;

    public function __construct(Database $database, string $key)
    {
        $this->conn = $database->getConnection();
        $this->key = $key;
    }

    public function create(string $token, int $expiry): bool
    {
        $hash = hash_hmac("sha256", $token, $this->key);

        $sql = "INSERT INTO refresh_token (token_hash, expires_at)
                VALUES (:token_hash, :expires_at)";

        $stmt = $this->conn->prepare($sql);

        $stmt->bindValue(":token_hash", $hash, PDO::PARAM_STR);
        $stmt->bindValue(":expires_at", $expiry, PDO::PARAM_INT);

        return $stmt->execute();
    }

    public function delete(string $token): int
    {
        $hash = hash_hmac("sha256", $token, $this->key);

        $sql = "DELETE FROM refresh_token
                WHERE token_hash = :token_hash";

        $stmt = $this->conn->prepare($sql);

        $stmt->bindValue(":token_hash", $hash, PDO::PARAM_STR);

        $stmt->execute();

        return $stmt->rowCount();
    }

    public function getByToken(string $token): array | false
    {
        $hash = hash_hmac("sha256", $token, $this->key);

        $sql = "SELECT *
                FROM refresh_token
                WHERE token_hash = :token_hash";

        $stmt = $this->conn->prepare($sql);

        $stmt->bindValue(":token_hash", $hash, PDO::PARAM_STR);

        $stmt->execute();

        return $stmt->fetch(PDO::FETCH_ASSOC);
    }

    public function deleteExpired(): int
    {
        $sql = "DELETE FROM refresh_token
                WHERE expires_at < UNIX_TIMESTAMP()";

        $stmt = $this->conn->query($sql);

        return $stmt->rowCount();
    }
}

Updated Folder Structure

From the code snippet provided for our [RefreshTokenGateway](https://github.com/Oghenekparobo/php_auth_jwt_tut/blob/refresh-token/src/RefreshTokenGateway.php) class, it's evident that a new table has been incorporated into our database. We have updated our college.sql file to accommodate this change. Kindly import the updated SQL file into your database, following the process outlined in the first part of this article.

Additionally, a new exception class named TokenExpiredException has been introduced. Ensure to update your project structure or files accordingly to include this new exception handling. This ensures that your project remains up-to-date and aligned with the latest changes in token management.

Before we finish setting up our refresh endpoint for obtaining a new access token after expiration, let’s integrate the retrieval of our refresh token and access token into our login endpoint. We have the RefreshTokenGateway class to manage refresh tokens, and we'll create the tokens.php file in our api folder for token creation, which will be used in both the refresh and login endpoints. This approach ensures a straightforward and unified token management process across our application.

tokens.php:

<?php

$payload = [
    "sub" => $user["id"],
    "name" => $user["name"],
    "exp" => time() + 20
];

$JwtController = new Jwt($_ENV["SECRET_KEY"]);

$access_token = $JwtController->encode($payload);

$refresh_token_expiry = time() + 432000;

$refresh_token = $JwtController->encode([
    "sub" => $user["id"],
    "exp" => $refresh_token_expiry
]);

echo json_encode([
    "access_token" => $access_token,
    "refresh_token" => $refresh_token
]);

The main difference between the refresh token and the payload (access token claims) is that the payload contains detailed user information like ID and name, and its expiration is shorter (20 seconds) for security reasons. On the other hand, the refresh token only contains the user ID and has a longer expiration (5 days) to allow for longer-lasting authentication without needing frequent logins. This separation of tokens and their respective lifespans enhances security and user convenience in token-based authentication systems.

login.php:

<?php

require __DIR__ . '/bootstrap.php';

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    header('ALLOW: POST');
    exit();
}

$contentType = isset($_SERVER["CONTENT_TYPE"]) ? trim($_SERVER["CONTENT_TYPE"]) : '';


if ($contentType !== 'application/json') {
    http_response_code(415);
    echo json_encode(["message" => "Only JSON content is supported"]);
    exit();
}

$data = json_decode(file_get_contents('php://input'), true);

if ($data === null) {
    http_response_code(400);
    echo json_encode(["message" => "Invalid JSON data"]);
    exit();
}


if (!array_key_exists('username', $data) || !array_key_exists('password', $data)) {
    http_response_code(400);
    echo json_encode(["message" => "Missing login credentials"]);
    exit();
}

$user_gateway = new UserGateway($database);

$user = $user_gateway->getByUsername($data['username']);

if ($user === false) {
    http_response_code(401);
    echo json_encode(["message" => "invalid authentication"]);
    exit;
}

if (!password_verify($data['password'], $user['password_hash'])) {
    http_response_code(401);
    echo json_encode(["message" => "invalid authentication"]);
    exit;
}


require __DIR__ . "/tokens.php";

$refresh_token_gateway = new RefreshTokenGateway($database, $_ENV["SECRET_KEY"]);

$refresh_token_gateway->create($refresh_token, $refresh_token_expiry);

Testing our login endpoint with the right parameters should result in the following response:

endpoint testing

Note: Before we move on let us update our Jwt class, the decode function to be specific. The updated decode function in the Jwt class checks if a token has the correct format, ensuring it has a header, payload, and signature. It then verifies the token's signature to confirm it hasn't been tampered with. After that, it decodes the payload (containing user information and expiration time) from the token. Lastly, it checks if the token has expired, throwing an error if it has. Overall, these steps ensure the token is valid, unaltered, and within its expiration period for secure usage in the application.

Jwt class:

<?php

class Jwt
{

    public function __construct(private string $key)
    {

    }

    public function encode(array $payload): string
    {

        $header = json_encode([
            "alg" => "HS256",
            "typ" => "JWT"
        ]);

        $header = $this->base64URLEncode($header);
        $payload = json_encode($payload);
        $payload = $this->base64URLEncode($payload);

        $signature = hash_hmac("sha256", $header . "." . $payload, $this->key, true);
        $signature = $this->base64URLEncode($signature);
        return $header . "." . $payload . "." . $signature;
    }



    public function decode(string $token): array
    {
        if (preg_match("/^(?<header>.+)\.(?<payload>.+)\.(?<signature>.+)$/",
                   $token,
                   $matches) !== 1) {

            throw new InvalidArgumentException("invalid token format");
        }

        $signature = hash_hmac("sha256",
                               $matches["header"] . "." . $matches["payload"],
                               $this->key,
                               true);   

        $signature_from_token = $this->base64urlDecode($matches["signature"]);

        if ( ! hash_equals($signature, $signature_from_token)) {

            throw new InvalidSignatureException;
        }

        $payload = json_decode($this->base64urlDecode($matches["payload"]), true);

        if ($payload["exp"] < time()) {

            throw new TokenExpiredException;
        }

        return $payload;
    }


    private function base64URLEncode(string $text): string
    {

        return str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($text));
    }

    private function base64URLDecode(string $text): string
    {
        return base64_decode(
            str_replace(
                ["-", "_"],
                ["+", "/"],
                $text
            )
        );
    }


}

Updated UserGateway.php class

<?php

class UserGateway
{
    private PDO $conn;

    public function __construct(Database $database)
    {
        $this->conn = $database->getConnection();
    }

    public function getByAPIKey(string $key): array | false
    {
        $sql = "SELECT *
                FROM user
                WHERE api_key = :api_key";

        $stmt = $this->conn->prepare($sql);

        $stmt->bindValue(":api_key", $key, PDO::PARAM_STR);

        $stmt->execute();

        return $stmt->fetch(PDO::FETCH_ASSOC);
    }

    public function getByUsername(string $username): array | false
    {
        $sql = "SELECT *
                FROM user
                WHERE username = :username";

        $stmt = $this->conn->prepare($sql);

        $stmt->bindValue(":username", $username, PDO::PARAM_STR);

        $stmt->execute();

        return $stmt->fetch(PDO::FETCH_ASSOC);
    }

    public function getByID(int $id): array | false
    {
        $sql = "SELECT *
                FROM user
                WHERE id = :id";

        $stmt = $this->conn->prepare($sql);

        $stmt->bindValue(":id", $id, PDO::PARAM_INT);

        $stmt->execute();

        return $stmt->fetch(PDO::FETCH_ASSOC);
    }
}

Fnishing up with the ‘refresh’ endpoint:

<?php
declare(strict_types=1);

require __DIR__ . "/bootstrap.php";

if ($_SERVER["REQUEST_METHOD"] !== "POST") {

    http_response_code(405);
    header("Allow: POST");
    exit;
}

$data = (array) json_decode(file_get_contents("php://input"), true);

if ( ! array_key_exists("token", $data)) {

    http_response_code(400);
    echo json_encode(["message" => "missing token"]);
    exit;
}

$JwtController = new Jwt($_ENV["SECRET_KEY"]);

try {
    $payload = $JwtController->decode($data["token"]);

} catch (Exception) {

    http_response_code(400);
    echo json_encode(["message" => "invalid token"]);
    exit;
}

$user_id = $payload["sub"];


$refresh_token_gateway = new RefreshTokenGateway($database, $_ENV["SECRET_KEY"]);

$refresh_token = $refresh_token_gateway->getByToken($data["token"]);

if ($refresh_token === false) {

    http_response_code(400);
    echo json_encode(["message" => "invalid token (not on whitelist)"]);
    exit;
}

$user_gateway = new UserGateway($database);

$user = $user_gateway->getByID($user_id);

if ($user === false) {

    http_response_code(401);
    echo json_encode(["message" => "invalid authentication"]);
    exit;
}

require __DIR__ . "/tokens.php";

$refresh_token_gateway->delete($data["token"]);

$refresh_token_gateway->create($refresh_token, $refresh_token_expiry);

The code then proceeds to validate the HTTP request method, ensuring that only POST requests are accepted for sensitive operations like token handling. This validation is significant as it helps prevent unauthorized access and ensures the security of authentication processes.

Next, the code retrieves and decodes JSON data from the request body, specifically looking for a “token” key. This token is pivotal for authentication and access control within the application. If the token is missing, the code responds with an error message, highlighting the importance of including valid tokens for secure access.

The decoded token is then passed to the JwtController instance to decode its payload and validate its authenticity. This step is crucial as it verifies the integrity of the token and ensures that it hasn't been tampered with or forged.

Furthermore, the code interacts with a RefreshTokenGateway to manage refresh tokens, which play a vital role in generating access tokens securely. Refresh tokens provide a way to obtain new access tokens without requiring the user to log in again, enhancing user experience and maintaining continuous access to resources.

When a user logs in via the login endpoint, two crucial tokens are provided: an access token and a refresh token. The access token grants immediate access to resources, while the refresh token serves as a long-term authorization tool. If the access token expires, the refresh token is then passed to the refresh endpoint. This action triggers the generation of a new access token, which, in turn, creates a fresh refresh token. This process forms a robust and secure mechanism ensuring continuous access to resources while maintaining high levels of security and user convenience.

endpoint testing

endpoint testing

Conclusion

In the analyzed code snippets and explanations regarding token management, authentication mechanisms, and refresh token usage within a web application, several key conclusions can be drawn.

Firstly, token-based authentication, especially using JSON Web Tokens, offer a secure and efficient way to handle user authentication and authorization processes. JWTs encapsulate user information in a compact format and are digitally signed, ensuring their integrity and authenticity.

Secondly, the implementation of access tokens and refresh tokens enhances security and user experience. Access tokens provide immediate access to resources and have a short lifespan, promoting security by limiting their usability in case of unauthorized access. On the other hand, refresh tokens have a longer lifespan and enable users to obtain new access tokens without repeated authentication, thereby improving user convenience.

Furthermore, strict typing enforcement, proper validation of HTTP request methods, and token format checks are crucial elements in ensuring the robustness and reliability of token-based authentication systems. These practices help prevent common vulnerabilities such as unauthorized access attempts, token tampering, and invalid token usage.

Overall, by combining secure token management practices, effective authentication mechanisms, and adherence to coding best practices, web applications can achieve a high level of security, user-friendliness, and resilience against potential threats.

See the full code here.

Reverb is a separate open-source package that's a first-party WebSocket server for Laravel applications. It helps facilitate real-time communication between client and server.

Before this new package, Laravel had event broadcasting, but basically it didn't have a built-in way to set up a self-hosted WebSocket server. Fortunately, Reverb now gives us that option.

Laravel Reverb has a few key features: it's written in PHP, it's fast, and and it's scalable. It was developed in particular to be horizontally scalable.

Reverb basically allows you to run an application on a single server – but if the application starts to outgrow that server, you can add multiple additional servers. Then those servers can all communicate with each other to distribute the messages between themselves.

In this article you will learn how to build a real-time chat application using Laravel Reverb. This will let you easily implement WebSocket communications between your backend and frontend.

For a frontend technology, you can use anything you want – but in this case we'll use React.js with the Vite.js build tool.

By the end of this article, you'll have a full-stack, real-time app in your local machine, which will work like this:

Demo of the app showing messaging between two logged in users

Table of Contents

• Prerequisites
• General Steps
• How to Install Laravel
• How to Create the Model and Migration
• How to Add Authentication
• How to Set Up Routes
• How to Set Up a Laravel Event
• How to Set Up a Laravel Queue Job
• How to Write the Controller Methods
• How to Install Laravel Reverb
• How to Setup WebSocket Channels
• How to Customize Laravel Views
• Let's Work on the Front End
• Running the Application
• Useful Reverb Resources
• Conclusion

Prerequisites

You'll need the following tools for the app that we'll build in this article:

• PHP: version 8.2 or above (run php -v to check the version)
• Composer (run composer to check that it exists)
• Node.js: version 20 or above (run node -v to check the version)
• MySQL: version 5.7 or above (run mysql --version to check if it exists, or follow the docs to install it)

General Steps

The main steps in this article will be:

• Installing Laravel 11.
• Adding authentication flow to it (authentication scaffolding). Laravel provides a basic starting point for this using Bootstrap with React / Vue.
• Installing Reverb.
• React.js components and event listening in the frontend.

How to Install Laravel

To start, install Laravel 11 by using the composer command:

composer create-project laravel/laravel:^11.0 laravel-reverb-react-chat && cd laravel-reverb-react-chat/

At this point, you can check out the app by running the serve command:

php artisan serve

How to Create the Model and Migration

You can generate a model and a migration for the messages by using this single command:

php artisan make:model -m Message

Then you'll need to set up the Message's model with the following code:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;

class Message extends Model
{
    use HasFactory;

    public $table = 'messages';
    protected $fillable = ['id', 'user_id', 'text'];

    public function user(): BelongsTo {
        return $this->belongsTo(User::class, 'user_id');
    }

    public function getTimeAttribute(): string {
        return date(
            "d M Y, H:i:s",
            strtotime($this->attributes['created_at'])
        );
    }
}

As you can see, there's a getTimeAttribute() accessor that will format the message creation timestamp into a human-readable date and time format. It will show it on the top of each message in the chat box.

Next, set up the migration for the messages database table with this code:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up(): void {
        Schema::create('messages', function (Blueprint $table) {
            $table->id();
            $table->foreignId('user_id')->constrained();
            $table->text('text')->nullable();
            $table->timestamps();
        });
    }

    public function down(): void {
        Schema::dropIfExists('messages');
    }
};

This migration creates a messages table in the database. The table contains columns for an auto-incrementing primary key (id), a foreign key (user_id) referencing the id column of the users table, a text column for storing the message content, and timestamps to automatically track the creation and modification times of each record.

The migration also includes a rollback method (down()) to drop the messages table if needed.

In this article, we'll use the MySQL database, but you can go with SQLite as the default one if you prefer. Just make sure to set up your database credentials in .env file correctly:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=username
DB_PASSWORD=password

After setting up the environment variables, optimize the cache:

php artisan optimize

Run migrations to recreate the database tables as well as to add the messages table:

php artisan migrate:fresh

How to Add Authentication

Now, you can add authentication scaffolding to your app. You can use Laravel's UI package to import some asset files. First you'll need to install the appropriate package:

composer require laravel/ui

Then import the React-related assets into the application:

php artisan ui react --auth

It may ask to overwrite the app/Http/Controllers/Controller.php, and you can go ahead and allow it:

The [Controller.php] file already exists. Do you want to replace it? (yes/no) [no]

This will do all of the authentication scaffolding compiled and installed, including routes, controllers, views, vite configurations, and a simple React-specific sample.
At this point, you're just one step away from the app being ready to go.

NOTE: Make sure you have Node.js (with npm) version 20 or above installed. You can check that by running the node -v command. Otherwise, just go ahead and install it using the official page.

npm install && npm run build

The command above will install NPM packages and build frontend assets. Now you can start the Laravel application and check out your fully ready app sample:

php artisan optimize && php artisan serve

A screenshot of the Register page

It's also important to note that you can separately run the dev command instead of using build every time when you're making changes to frontend files:

npm run dev

See the details in the package.json file, in the scripts field.

How to Set Up Routes

In this real-time chat app, you'll need to have a few routes:

• home for the home page (already should be added)
• message for adding a new message
• messages to get all the existing messages

You'll have these kind of routes in the web.php file:

<?php

use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;

Route::get('/', function () { return view('welcome'); });

Auth::routes();

Route::get('/home', [HomeController::class, 'index'])
    ->name('home');
Route::get('/messages', [HomeController::class, 'messages'])
    ->name('messages');
Route::post('/message', [HomeController::class, 'message'])
    ->name('message');

After setting up those routes, let's use Laravel Events and Queue Jobs advantages.

How to Set Up a Laravel Event

You need to create a GotMessage event for listening for a specific event:

php artisan make:event GotMessage

Laravel's events provide a simple observer pattern implementation, allowing you to subscribe and listen for various events that occur within your application. Event classes are typically stored in the app/Events directory. (Docs)

Set up a private WebSocket channel in the broadcastOn method for all the authenticated users to receive messages in real time. In this case, we will call it "channel_for_everyone", but you can also make it dynamic, depending on the user, like "App.Models.User.{$this->message['user_id']}".

<?php

namespace App\Events;

use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class GotMessage implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public function __construct(public array $message) {
        //
    }

    public function broadcastOn(): array {
        // $this->message is available here
        return [
            new PrivateChannel("channel_for_everyone"),
        ];
    }
}

As you can see, there's a public $massage property as a constructor argument, so you can get message infromation in the front end.

We've already used the channel name in the channels file, and we'll use it in the front end as well for real-time message updates.

Don't forget to implement the ShouldBroadcast interface in the event's class.

How to Set Up a Laravel Queue Job

Now it's time to create the SendMessage job for sending messages:

php artisan make:job SendMessage

Laravel allows you to easily create queued jobs that may be processed in the background. By moving time intensive tasks to a queue, your application can respond to web requests with blazing speed and provide a better user experience to your customers. (Docs)

<?php

namespace App\Jobs;

use App\Events\GotMessage;
use App\Models\Message;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;

class SendMessage implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    public function __construct(public Message $message) {
        //
    }

    public function handle(): void {
        GotMessage::dispatch([
            'id' => $this->message->id,
            'user_id' => $this->message->user_id,
            'text' => $this->message->text,
            'time' => $this->message->time,
        ]);
    }
}

The SendMessage.php queue job is responsible for dispatching the GotMessage event with information about a newly sent message. It receives a Message object upon construction, representing the message to be sent.

In its handle() method, it dispatches the GotMessage event with details such as the message ID, user ID, text, and timestamp. This job is designed to be queued for asynchronous processing, enabling efficient handling of message sending tasks in the background.

As you can see, there's a public $massage property as a constructor argument, which we'll use to attach a message information to the queue job.

How to Write the Controller Methods

For the defined routes, here are the appropriate controller methods:

<?php

namespace App\Http\Controllers;

use App\Jobs\SendMessage;
use App\Models\Message;
use App\Models\User;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function __construct() {
        $this->middleware('auth');
    }

    public function index() {
        $user = User::where('id', auth()->id())->select([
            'id', 'name', 'email',
        ])->first();

        return view('home', [
            'user' => $user,
        ]);
    }

    public function messages(): JsonResponse {
        $messages = Message::with('user')->get()->append('time');

        return response()->json($messages);
    }

    public function message(Request $request): JsonResponse {
        $message = Message::create([
            'user_id' => auth()->id(),
            'text' => $request->get('text'),
        ]);
        SendMessage::dispatch($message);

        return response()->json([
            'success' => true,
            'message' => "Message created and job dispatched.",
        ]);
    }
}

• In the home method, we'll get the logged in user's data from the database using the User model and send it to the blade view.
• In the messages method, we'll retrieve all the messages from the database using the Message model, attach the user relationship data to it, append the time field (accessor) to each item, and send all that to the view.
• In the message method, a new message will be created in the database table by using the Message model, and the SendMessage queue job will be dispatched.

How to Install Laravel Reverb

Now we've come to the most important moment: it's time to install Reverb in your Laravel app.

It's so easy. All the necessary packaging and configuration setup can be done using this single command:

php artisan install:broadcasting

It will ask you to install Laravel Reverb as well as install and build the Node dependencies required for broadcasting. Just press enter to continue.

After the command execution, make sure you've automatically added reverb-specific environment variables to the .env file, like:

BROADCAST_CONNECTION=reverb

###

REVERB_APP_ID=795051
REVERB_APP_KEY=s3w3thzezulgp5g0e5bs
REVERB_APP_SECRET=gncsnk3rzpvczdakl6pz
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

You'll also have two new configration files in the config directory:

• reverb.php
• broadcasting.php

How to Setup WebSocket Channels

Lastly, you'll need to add a channel in the channels.php file. It should already be created after installing Reverb.

<?php

use Illuminate\Support\Facades\Broadcast;

Broadcast::channel('channel_for_everyone', function ($user) {
    return true;
});

You'll have only one channel. You can change the channel's name and make it dynamic – it's up to you. In the closure of the channel, we'll always return true, but you can modify it later to make some restrictions regarding the channel's subscription.

Optimize caches one more time:

php artisan optimize

How to Customize Laravel Views

Now your back end should be ready at this point, so you can switch to the front end.

Before working on the React stuff, you'll want to set up Laravel *.blade.php views. In the home blade view, make sure to have the root div with an ID of main to render all the React components there.

@extends('layouts.app')

@section('content')
    <div class="container">
        <div id="main" data-user="{{ json_encode($user) }}"></div>
    </div>
@endsection

The div with ID of main gets a data property for holding the $user info sent from the controller's home method.

I won't put the whole resources/views/welcome.blade.php content here, but you can just make the following small changes to it:

• Replace url('/dashboard') with url('/home');
• Replace Dashboard with Home;
• Remove main and footer sections.

Let's Work on the Front End

In Reverb, event broadcasting is done by a server-side broadcasting driver that broadcasts your Laravel events so that the front end can receive them within the browser client.

In the front end, Laravel Echo does that job under the hood. Echo a JavaScript library that makes it painless to subscribe to channels and listen for events broadcast by your server-side broadcasting driver.

You can find the WebSocket configurations setup with Echo in the rources/js/echo.js file, but you don't need to do anything there for this project.

Let's create a few React components so that we have a refactored and more readable project.

Create a Main.jsx component in the new components folder:

import React from 'react';
import ReactDOM from 'react-dom/client';
import '../../css/app.css';
import ChatBox from "./ChatBox.jsx";

if (document.getElementById('main')) {
    const rootUrl = "http://127.0.0.1:8000";

    ReactDOM.createRoot(document.getElementById('main')).render(
        <React.StrictMode>
            <ChatBox rootUrl={rootUrl} />
        </React.StrictMode>
    );
}

Here we'll check if there's an element with the id 'main'. If it exists, it proceeds with rendering the React application.

As you can see, there's a ChatBox component. We'll learn more about it soon.

Remove the resources/js/components/Example.jsx file, and import the Main.jsx component in the app.js:

import './bootstrap';
import './components/Main.jsx';

Create Message.jsx and MessageInput.jsx files so you can use them in the ChatBox component.

The Message component will get userId and message arguments (fields) to show each message in the chat box.

import React from "react";

const Message = ({ userId, message }) => {
    return (
        <div className={`row ${
        userId === message.user_id ? "justify-content-end" : ""
        }`}>
            <div className="col-md-6">
        <small className="text-muted">
                    <strong>{message.user.name} | </strong>
                </small>
                <small className="text-muted float-right">
                    {message.time}
                </small>
                <div className={`alert alert-${
                userId === message.user_id ? "primary" : "secondary"
                }`} role="alert">
                    {message.text}
                </div>
            </div>
        </div>
    );
};

export default Message;

The Message.jsx component renders individual messages within the chat interface. It receives the userId and message props. Based on whether the message sender matches the current user, it aligns the message to the appropriate side of the screen.

Each message includes the sender's name, timestamp, and the message content itself, styled differently based on whether the message is sent by the current user or another user.

The MessageInput component will care about creating a new message:

import React, { useState } from "react";

const MessageInput = ({ rootUrl }) => {
    const [message, setMessage] = useState("");

    const messageRequest = async (text) => {
        try {
            await axios.post(`${rootUrl}/message`, {
                text,
            });
        } catch (err) {
            console.log(err.message);
        }
    };

    const sendMessage = (e) => {
        e.preventDefault();
        if (message.trim() === "") {
            alert("Please enter a message!");
            return;
        }

        messageRequest(message);
        setMessage("");
    };

    return (
        <div className="input-group">
            <input onChange={(e) => setMessage(e.target.value)}
                   autoComplete="off"
                   type="text"
                   className="form-control"
                   placeholder="Message..."
                   value={message}
            />
            <div className="input-group-append">
                <button onClick={(e) => sendMessage(e)}
                        className="btn btn-primary"
                        type="button">Send</button>
            </div>
        </div>
    );
};

export default MessageInput;

The MessageInput component provides a form input field for users to type messages and send them in the chat interface. By clicking the button, it triggers a function to send the message to the server via an Axios POST request to the specified rootUrl that it got from the parent ChatBox component. It also handles validation to ensure that users cannot send empty messages. You can customize it later if you want.

Now create a ChatBox.jsx component to have the front end ready:

import React, { useEffect, useRef, useState } from "react";
import Message from "./Message.jsx";
import MessageInput from "./MessageInput.jsx";

const ChatBox = ({ rootUrl }) => {
    const userData = document.getElementById('main')
        .getAttribute('data-user');

    const user = JSON.parse(userData);
    // `App.Models.User.${user.id}`;
    const webSocketChannel = `channel_for_everyone`;

    const [messages, setMessages] = useState([]);
    const scroll = useRef();

    const scrollToBottom = () => {
        scroll.current.scrollIntoView({ behavior: "smooth" });
    };

    const connectWebSocket = () => {
        window.Echo.private(webSocketChannel)
            .listen('GotMessage', async (e) => {
                // e.message
                await getMessages();
            });
    }

    const getMessages = async () => {
        try {
            const m = await axios.get(`${rootUrl}/messages`);
            setMessages(m.data);
            setTimeout(scrollToBottom, 0);
        } catch (err) {
            console.log(err.message);
        }
    };

    useEffect(() => {
        getMessages();
        connectWebSocket();

        return () => {
            window.Echo.leave(webSocketChannel);
        }
    }, []);

    return (
        <div className="row justify-content-center">
            <div className="col-md-8">
                <div className="card">
                    <div className="card-header">Chat Box</div>
                    <div className="card-body"
                         style={{height: "500px", overflowY: "auto"}}>
                        {
                            messages?.map((message) => (
                                <Message key={message.id}
                                         userId={user.id}
                                         message={message}
                                />
                            ))
                        }
                        <span ref={scroll}></span>
                    </div>
                    <div className="card-footer">
                        <MessageInput rootUrl={rootUrl} />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ChatBox;

The ChatBox component manages a chat interface within the application. It fetches and displays messages from a server using WebSocket and HTTP requests.

The component renders a list of messages, a message input field, and automatically scrolls to the bottom when new messages arrive.

It defines a WebSocket channel for real-time message updates. You need to set up that channel by using the same name as it was written in the routes/hannels.php and in the app/Events/GotMessage.php queue job.

Also, the leave() function is called within the useEffect cleanup function to unsubscribe from the WebSocket channel when the component unmounts. This prevents memory leaks and unnecessary network connections by stopping the component from listening to updates on the WebSocket channel after it's no longer needed.

Running the Application

Now, everything's ready and it's time to check out the app. Follow these instructions:

A screenshot from the terminal with all the necessary commands

• Build frontend assets (this is not a "forever" running command):
  npm run build
• Start listening to the Laravel events:
  php artisan queue:listen
• Start the WebSocket server:
  php artisan reverb:start
• Start the server (you may use an alternative for your app like a local running server):
  php artisan serve

After all the necessary commands are running, you can check out the app by visiting the default URL: http://127.0.0.1:8000.

For testing, you can register two different users, have those users log in, send messages from each of them, and see the chat box.

Useful Reverb Resources

Now that we've reached the end of this article, it's worth listing some useful resources about Reverb:

• Laravel Broadcasting (official documentation)
• Taylor Otwel - Laravel Update (talk on Laracon EU 2024)
• Joe Dixon on X (creator of Reverb)
• Laracast episode (practical example with Reverb)

Conclusion

Now you know how to build real-time applications with Laravel Reverb in the new version of Laravel. With this, you can implement WebSocket communications in your full-stack app and avoid using any additional 3rd-party services (like Pusher and Socket.io).

If you want to have a clear idea of how to integrate React.js into your Laravel app without using any additional Laravel tools (like Inertia), you can read through my previous freeCodeCamp article, where you can build a single-page, full-stack Tasklist app.

The complete code for this article is here on my GitHub⭐, where I actively publicize much of my work about various modern technologies.

For more information, you can visit my website: boolfalse.com

Feel free to share this article. 😇

Nodes are connected through references, forming the linked structure. One advantage of linked lists is that insertion and deletion of elements at the beginning of the list can be done in constant time, denoted as O(1).

This efficiency stems from the ability to directly manipulate references without needing to shift elements as required in arrays. Data types in a linked list can be any of the available data types supported by a programming language.

In this tutorial, you'll learn the following:

• Understanding Linked list
• Types of Linked List
• Summary of operations with their respective time and space complexities in tabular format.
• Differences Between Array and Linked list.
• Algorithm: Solve the Remove Duplicates from Sorted list in PHP and JavaScript.

Understanding Linked list

head => Points to the first box in the list
tail => Points to the last box in the list

To access the data in the first box

head.data => 6

To access the data in the second box, we first need to set the pointer (arrow) to point to the box. Hence we need the (next)
head.next => This points to the next item on the list
head.next.data => 4

To access the data in the third box, we first need to set the pointer (arrow) to point to the box. Hence we need the (next.next)
head.next.next => This points to the next > next item on the list
head.next.next.data => 5

What is a node ?

A node in a linked list is an example of a self-referential structure in programming. This structure is comprised of elements called nodes, where each node contains both data and a reference to another node of the same type. This reference, often termed a 'pointer,' facilitates the creation of a chain-like structure, where nodes are interconnected, forming the linked list.

The self-referential nature of nodes allows for efficient traversal and manipulation of data within the linked list. The structure can be implemented using classes or arrays

How to Implement a Linked List Using classes

class Node {
    public function __construct(
        public $data,
        public ?Node $next = null
    ) {}
}

// Creating nodes

$node1 = new Node(10);
$node2 = new Node(20);
$node3 = new Node(30);

// Linking nodes

$node1->next = $node2;
$node2->next = $node3;

// Traversing linked list

$current = $node1;
while ($current != null) {
    echo $current->data . " ";
    $current = $current->next;
}

How to Implement a Linked List Using Using arrays

// creating nodes as an associative array

$node1 = ['data' => 10, 'next' => null];
$node2 = ['data' => 20, 'next' => null];
$node3 = ['data' => 30, 'next' => null];

// linking nodes

$node1['next'] = &$node2;
$node2['next'] = &$node3;

// Traversing linked list

$current = $node1;
while ($current != null) {
  echo $current["data"] . " ";
  $current = &$current["next"];
}

In both cases, we create a structure where each element (node) contains data and a reference (next) to another element of the same type. This creates a self-referential structure. We then link these elements together to form a data structure like a linked list. Finally, we traverse the structure to access and manipulate its elements.

Unlike an array, a linked list doesn't provide constant time access to a particular index within the list. This means that if you'd like to find the nth element in the list, you'll need to traverse through to the nth element.

Traversing a linked list means iterating through each node of the list until the end node is reached.

Types of Linked list

We'll discuss the types under the Traversal, Memory and Complexity categories.

Singly Linked List

Each node has data and a reference to the next node.

Non-code explanation

Imagine taking a journey by train, where each train represents a part of your trip, and each station represents a point where you need to make a change.

• Train A represents the first part of your journey, taking you from Station A to Station B. When you arrive at Station B, there's a sign directing you to switch trains to continue your journey.
• Train B represents the second part of your journey, taking you from Station B to Station C. Again, when you arrive at Station C, there's no sign for another train because you've reached your final destination.

In this analogy:

• Each train segment (Train A, Train B, and Train C) represent a node in the singly linked list.
• The task of each train is analogous to the data stored in each node, representing a segment of your journey.
• The transition between trains at each station is analogous to the "next" pointer in a linked list, indicating the next segment of your journey.
• At the final destination (Station C), there's no need for a pointer or sign to another train because it's the end of your journey.

In simpler terms, a singly linked list is like a train journey with different segments, where each train (node) has the task of taking you from one station to the next until you reach your final destination. The transitions between trains are like pointers, guiding you through each segment of your journey.

Performance Characteristics of Singly Linked List

1. Traversal: Traversal is allowed only in one direction (that is, forward only). You can move forward through the list, but you cannot easily move backward.
2. Memory Efficiency: Singly linked list is generally more memory-efficient because it requires only one reference per node.
3. Complexity: Insertion and Deletion operation is easier as you only need to update references in one direction.

Time and Space Complexity

I wrote about constant and linear time complexity here, and we'll be using that to discuss the general time and space complexities for some common operations:

Traversal

Time complexity O(n), where n is the number of nodes in the list. Space complexity O(1), it doesn't require additional space proportional to the input size.

Insertion at the Beginning

Time complexity O(1), it involves updating references at the head. Space complexity O(1), it doesn't require additional space proportional to the input size.

Insertion at the End

Time complexity O(n), it may require traversing the entire list to reach the end. Space complexity O(1), it doesn't require additional space proportional to the input size.

Deletion at the Beginning

Time complexity O(1), it involves updating references at the head. Space complexity O(1), constant.

Deletion at the End

Time complexity O(n), it may require traversing the entire list to reach the end. Space complexity O(1), constant.

Doubly Linked List

In a doubly linked list, the head node typically does not have a prev reference because it is the first node and therefore has no previous node.

However, the head node does have a next reference pointing to the next node in the list. Each node has data and references to both the next and previous nodes.

Non-code explanation

Imagine that you have a book where each page represents a task you need to complete, just like items on your to-do list.

Each page does not only contain information about the task written on it but also has connections to the pages before and after it in the book.

• Page 1 (Task A) represents the first task in the book. It contains information about Task A and has an arrow pointing forward to Page 2 (Task B), indicating that Task B comes after Task A in the book. However, Page 1 does not have a backward arrow because it is the first page of the book and doesn't have a previous page.
• Page 2 (Task B) contains information about Task B and has arrows pointing both forward to Page 3 (Task C) and backward to Page 1 (Task A), indicating that Task C comes after Task B and Task A comes before Task B in the book.
• Page 3 (Task C) represents the last task in the book. It contains information about Task C and has an arrow pointing backward to Page 2 (Task B), indicating that Task B comes before Task C in the book.

With this in mind, you can think of a doubly linked list as a book where each page not only contains information about a task but also provides easy navigation to the tasks before and after it. The first page, similar to the head of a doubly linked list, does not have a previous reference, while the last page, similar to the tail of a doubly linked list, does not have a next reference

Performance Characteristics of Doubly Linked Lists

1. Traversal: Doubly linked lists allow traversal in both directions — forward and backward. This bidirectional traversal enables more flexible navigation through the list, allowing operations such as iterating in reverse order.
2. Memory Efficiency: Doubly linked lists typically require more memory compared to singly linked lists because each node contains two references (pointers) — one for the next node and one for the previous node. This additional memory overhead per node can impact the overall memory efficiency, especially for large lists.
3. Complexity: Doubly linked lists offer bidirectional traversal and flexibility. Insertion and deletion operations may require updating references in both directions (forward and backward), which can increase the complexity and potentially impact performance.

Time and Space Complexity

Traversal

The time and space complexity for this operation is the same with the singly linked list.

Insertion at the Beginning

The time and space complexity for this operation is the same with the singly linked list.

Insertion at the End

Time complexity for this operation takes O(1) time. This is because you have direct access to the tail node, so you can update the references without needing to traverse the entire list. Space complexity O(1), it doesn't require additional space proportional to the input size.

Deletion at the Beginning

The time and space complexity for this operation is the same with the singly linked list.

Deletion at the End

Time complexity for this operation takes O(1) time. This is because you have direct access to the tail node, so you can update the references without needing to traverse the entire list. Space complexity O(1), it doesn't require additional space proportional to the input size.

Circular Linked List

A circular linked list is a type of linked list where the last node of the list points back to the first node, forming a circle or loop. This characteristic distinguishes it from a traditional linked list, where the last node typically points to null, indicating the end of the list. In a circular linked list, there is no null pointer at the end; instead, the last node points back to the first node, creating a loop structure. This looping behavior allows for continuous traversal through the list. The below image shows how a singly circular linked list works.

Non-code explanation

Imagine a train line that forms a loop, with passengers boarding and exiting at various stations along the way. This loop represents a circular linked list, where each station is a node and the train continuously travels around the loop, picking up and dropping off passengers.

Just like in a circular linked list, the loop ensures continuous traversal without an end point, and passengers (data) can be added or removed at any station (node).

The circular linked list offers advantages in certain applications but requires careful handling of pointers and memory management to maintain its circular structure and prevent issues such as infinite loops.

Performance Characteristics of Circular Linked Lists

1. Traversal: Circular linked lists enable traversal in a loop, allowing seamless navigation from one node to another regardless of the direction. This circular structure facilitates efficient traversal without needing to iterate back to the beginning when reaching the end, enhancing traversal performance.
2. Memory Efficiency: Singly circular linked lists typically offer similar memory efficiency to singly linked lists, as they require only one pointer per node to connect to the next node in the sequence. This single-pointer structure results in lower memory overhead per node compared to doubly linked lists, potentially improving memory efficiency for large lists.
3. Complexity: In singly circular linked lists, insertion and deletion operations require updating references to maintain the circular structure, introducing moderate complexity compared to linear linked lists.

Time and Space Complexity

Traversal

Time Complexity: O(n) – Since you have to traverse through all the nodes in the list to reach the end.

Space Complexity: O(1) – Only a constant amount of extra space is required for a temporary variable to traverse the list.

Insertion at the Beginning

Time Complexity: O(1) – Insertion at the beginning simply involves updating the references at the head.

Space Complexity: O(1) – No additional space is required.

Insertion at the End

Time Complexity: O(n) – It may require traversing the entire list to reach the end where insertion needs to take place.

Space Complexity: O(1) – No additional space is required.

Deletion at the Beginning

Time complexity O(1), it involves updating references at the head.

Space complexity O(1), constant.

Deletion at the End

Time complexity O(n), it may require traversing the entire list to reach the end.

Space complexity O(1), constant.

Summary of Operations for the Time Complexity

Summary of Operations for the Space Complexity

Differences Between Array and Linked list

A linked list is a dynamic way to represent a list, where adding and removing items from the beginning of the list typically involves changing only a few pointers. This operation can be performed in constant time, denoted as O(1), regardless of the list's size.

On the other hand, arrays are a sequential representation of a list. Adding or removing items from the beginning of the list requires shifting all subsequent elements to accommodate the change. This operation has a time complexity of O(n), where n is the number of elements in the array. Therefore, for large arrays, adding or removing items from the beginning can be relatively slow compared to linked lists.

How to Solve the Remove Duplicates from Sorted List Problem

Explanation of the problem: Given the head of a sorted linked list, delete all duplicates such that each element appears only once. Return the linked list sorted as well.