DEV Community: Jibril Dauda Muhammad

Understanding methods and functions in JavaScript

Jibril Dauda Muhammad — Tue, 25 Apr 2023 18:43:15 +0000

Chances are if you are learning JavaScript or using it for development you definitely have make use of the popular console.log() method, which is use to output message on the console. in this place console is the object, while log is a function inside the console object

Lets dive into the differences between functions and methods

What is a function:

A function is a set of instructions that you can use over and over again in JavaScript. It's like a recipe that tells your code how to do something. You can give the function a name, and then call it whenever you want to use those instructions.

function addValue(a, b) {
  return a + b;
}

console.log(addValue(3, 4)); // Output: 7

the function addValue accepts two parameters a and b, and returns their sum.

What is a method:

A method is a special tool in JavaScript that can be used to make objects do something. It's like a button that you can press to make a toy do a specific action. Each object has its own set of methods that you can use to control it. In a lay mans term They are function inside object

const employee= {
  username: "mdjibril",
  developer: "fullstack developer",
  sayHello: function() {
    console.log("Hello, my username is " + this.username + " and I am a " + this.developer);
  }
};

employee.sayHello(); // Output: "Hello, my username is mdjibril and I am a fullstack developer."

In this example, sayHello is a method attached to the employee object. It logs a message to the console that includes the object's username and developer properties.

In summary, functions are standalone blocks of code that can be called from anywhere in your code, while methods are functions attached to objects that can be called on those objects.

More Example

Function to check if a number is even

function isEven(number) {
  if (number % 2 === 0) {
    return true;
  } else {
    return false;
  }
}

console.log(isEven(4)); // Output: true
console.log(isEven(5)); // Output: false

method to convert a string to uppercase

const myString = "hello world";

const upperCaseString = myString.toUpperCase();

console.log(upperCaseString); // Output: "HELLO WORLD"

that's a wrap, hope this clear the understanding between methods and function for you.

How to create a Signup page with PHP/MySQL Using ChatGPT: from prompt to result

Jibril Dauda Muhammad — Sat, 15 Apr 2023 12:49:42 +0000

ChatGPT an artificial intelligence chatbot developed by OpenAI and launched in November 2022

It is built on top of OpenAI's GPT-3.5 and GPT-4 language models and is optimized for dialogue using Reinforcement Learning with Human Feedback
.
In this tutorial you will create a signup page with PHP/MySQL using chatgpt, from prompt to result. the result has been broken down to more than 1 prompt for easier understanding of how the process where works
.

PREREQUISITE

Text Editor(Sublime text/Visual studio code)
PHP/MySQL install on you system (download XAMPP) to run the project
Basic understanding of PHP/MySQL
Account with ChatGPT if you want to try the prompt your self

NOTE: prompt might likely return different answer but result will still be the same

PROMPT 1

You will create a signup page using php/MySQL, I will feed you the required prompt first you will create a database with name auth, table user with rows (username, email, password, fullname, and gender). create only the sql file first

CREATE DATABASE auth;

USE auth;

CREATE TABLE user (
    id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    email VARCHAR(100) NOT NULL,
    password VARCHAR(255) NOT NULL,
    fullname VARCHAR(100) NOT NULL,
    gender ENUM('Male', 'Female', 'Other') NOT NULL
);

After successfully entering the above prompt it creates a database named auth and a table named user with five columns: id, username, email, password, fullname, and gender. The id column is set to auto-increment so that each new record will automatically be assigned a unique ID number. The username, email, password, fullname, and gender columns are all required and cannot be null. The gender column is an ENUM type, which means it can only take on one of the specified values: 'Male', 'Female', or 'Other'.

PROMPT 2

Create a connection file to the database name it connection.php, only create the connection file

<?php
$host = "localhost"; // Replace with your host name
$user = "root"; // Replace with your database username
$password = ""; // Replace with your database password
$dbname = "auth"; // Replace with your database name

// Create connection
$conn = new mysqli($host, $user, $password, $dbname);

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

Once you have created the database and table, you can create a file called connection.php . The code creates a new mysqli object and passes in the host name, database username, database password, and database name to establish a connection. It then checks if the connection was successful by checking for a connection error. If an error is detected, the script will output a message and terminate.

PROMPT 3

Create the php script that will handle the signup process, include the connection.php file inside, name the file register_handler.php, only create the file

<?php
// Include connection file
include_once 'connection.php';

// Get form data
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];
$fullname = $_POST['fullname'];
$gender = $_POST['gender'];

// Prepare SQL query
$stmt = $conn->prepare("INSERT INTO user (username, email, password, fullname, gender) VALUES (?, ?, ?, ?, ?)");
$stmt->bind_param("sssss", $username, $email, $password, $fullname, $gender);

// Execute query
if ($stmt->execute()) {
    // Registration successful
    header("Location: success.html");
    exit();
} else {
    // Registration failed
    header("Location: error.html");
    exit();
}

// Close statement and connection
$stmt->close();
$conn->close();
?>

The above prompt will write the script for rigister_handler.php page in the code it first includes the connection.php file to establish a connection to the database. It then retrieves the form data submitted via the POST method and stores it in variables.

Next, it prepares an SQL query to insert the form data into the user table using prepared statements to prevent SQL injection attacks. The bind_param method binds the variables to the SQL statement.

The script then executes the query and checks if it was successful. If so, it redirects the user to a success page. If not, it redirects them to an error page.

Finally, it closes the prepared statement and database connection

PROMPT 4

Create the html with all the required form input, the action attribute should reference the register_handler.php file, only create the file and name it index.php

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up</title>
</head>
<body>
    <h2>Sign Up</h2>
    <form method="post" action="register_handler.php">
        <label for="username">Username:</label><br>
        <input type="text" id="username" name="username" required><br>

        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email" required><br>

        <label for="password">Password:</label><br>
        <input type="password" id="password" name="password" required><br>

        <label for="fullname">Full Name:</label><br>
        <input type="text" id="fullname" name="fullname" required><br>

        <label for="gender">Gender:</label><br>
        <select id="gender" name="gender" required>
            <option value="">Select Gender</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
            <option value="Other">Other</option>
        </select><br>

        <input type="submit" value="Sign Up">
    </form>
</body>
</html>

The above prompt will code HTML. This code creates an HTML form with fields for the username, email, password, fullname, and gender input. The form's method attribute is set to post and the action attribute is set to register_handler.php, which is the file that will handle the form submission.The form includes a submit button that will submit the form data to the register_handler.php file when clicked.

PROMPT 5

Add a touch of styling to the index.php page, name the file style.css only create the style.css

body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
}

h2 {
  color: #333;
  text-align: center;
}

form {
  width: 400px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

label {
  display: inline-block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="password"],
select {
  width: 100%;
  padding: 8px;
  border-radius: 3px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-bottom: 10px;
  font-size: 16px;
}

select {
  height: 36px;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
}

input[type="submit"]:hover {
  background-color: #3e8e41;
}

input[type="submit"]:focus {
  outline: none;
}

The above prompt will the code that adds some basic styling to the page.

PROMPT 6

Create a sample code for success.html page and error.html page to show result when registration is successful or not

success.html

<!DOCTYPE html>
<html>
<head>
    <title>Registration Successful</title>
</head>
<body>
    <h2>Registration Successful</h2>
    <p>Congratulations! You have successfully registered.</p>
</body>
</html>

.
error.html

<!DOCTYPE html>
<html>
<head>
    <title>Registration Error</title>
</head>
<body>
    <h2>Registration Error</h2>
    <p>Sorry, an error occurred while processing your registration. Please try again later.</p>
</body>
</html>

RESULT

Thats wrap,

Have you use ChatGPT to write code? which language did you use? how effective was it? comment below

Practical Front End Development Part 4 - Deployment

Jibril Dauda Muhammad — Sat, 15 Aug 2020 23:18:21 +0000

Netlify

.
in short help you host your static website (HTML, CSS, Javascript)
.

First

Got to netlify and create an account
On your dashboard there is a place for you to upload your application
Drag and drop your project folder
After uploading, netlify will automatically deploy the app and create a custom URL for you to access the application live
After successful deployment the website will be listed under your website .

Practical Front End Development Part 3 - JS

Jibril Dauda Muhammad — Sat, 15 Aug 2020 22:38:31 +0000

JavaScript

.
we have style our web application, but yet to implement the main functionalities, which is to calculate GPA when a user input records.
.
now lets head to main.js in our js folder
.

Table Of Content

Step 1
Step 2
Step 3
Step 4 .

Step 1:

inside main.js we need three javascript function

to add new row addNewRow()
to calculate the gpa addUpCreditsGpa()
to convert the letters to equivalent point gradeToPoints() .

function addNewRow(){

}

function addUpCreditsGpa(){

}

function gradeToPoints(){

}

Step 2:

Inside the first function that is the function that is been invoked when when the user clicked on the add button from our index.html file, we populate it with the following

    const tableBody = document.getElementById("tableBody");
    const tr = document.createElement("tr");

    const td = document.createElement("td");
    const td1 = document.createElement("td");
    const td2 = document.createElement("td");
    const input = document.createElement("input");
    const select1 = document.createElement("select");
    const select2 = document.createElement("select");

    const option11 = document.createElement("option");
    const option12 = document.createElement("option");
    const option13 = document.createElement("option");
    const option14 = document.createElement("option");
    const option15 = document.createElement("option");
    const option16 = document.createElement("option");
    const option21 = document.createElement("option");
    const option22 = document.createElement("option");
    const option23 = document.createElement("option");
    const option24 = document.createElement("option");
    const option25 = document.createElement("option");
    const option26 = document.createElement("option");

    input.type = "text";
    input.name = "courseCode";
    input.classList.add("code-input");

    select1.name = "creditUnit";
    select2.name = "grade";
    select1.classList.add("select");
    select2.classList.add("select");
    select1.setAttribute("onchange", "addUpCreditsGpa()");
    select2.setAttribute("onchange", "addUpCreditsGpa()");
    option11.innerHTML = "6";
    option12.innerHTML = "5";
    option13.innerHTML = "4";
    option14.innerHTML = "3";
    option15.innerHTML = "2";
    option16.innerHTML = "1";
    option21.innerHTML = "A";
    option22.innerHTML = "B";
    option23.innerHTML = "C";
    option24.innerHTML = "D";
    option25.innerHTML = "E";
    option26.innerHTML = "F";

    select1.appendChild(option11);
    select1.appendChild(option12);
    select1.appendChild(option13);
    select1.appendChild(option14);
    select1.appendChild(option15);
    select1.appendChild(option16);
    select2.appendChild(option21);
    select2.appendChild(option22);
    select2.appendChild(option23);
    select2.appendChild(option24);
    select2.appendChild(option25);
    select2.appendChild(option26);

    td.appendChild(input);
    td1.appendChild(select1);
    td2.appendChild(select2);
    tr.appendChild(td);
    tr.appendChild(td1);
    tr.appendChild(td2);

    tableBody.appendChild(tr);

Explaining the code

when creating a variable in javascript you make use of

let or const: e.g const table
document.createElement() is use to create new HTML element via js e.g document.createElement("option") equivalent to <option></option> in javascript
in a normal input tag <input> attributes like type and name, can be found, class attribute if you want to style it. e.g <input type='text' name='my-input'>. therefore from our sourcecode above input.type = 'text' and input.name='courseCode' and input.classList.add('code-input') is equivalent to <input type='text' name='courseCode' class='code-input'> in a normal HTML file
Some elements do have event listeners, eventlisteners are things that happen when a user click, when a page load, when a file is submitted etc. an example is <from onSubmit='clearField()'></form> therefore select1.setAttribute("onchange", "addUpCreditsGpa()"); is equivalent to <select onchange='addUpCreditsGpa'>...</select> in HTML file
The .innerHTML is use to add content to an HTML tag e.g option11.innerHTML = "6"; in javascript is equivalent to <option>6</option> in HTML
The appendchild is use to insert another HTMl element into another, for those that can be child element to one another e.g select1.appendChild(option11); in javascript is equivalent to <select><option></option></select> in HTML, here <option></option> is appended to <select></select> .

Step 3:

Inside the second function this is where the calculation takes place, we add this codes to it

    const creditUnit = document.querySelectorAll('[name = creditUnit]');
    const grade = document.querySelectorAll('[name = grade]');
    let totalUnit = document.querySelector("[name = totalUnit]").value = "";
    let gpa = document.querySelector("[name = gpa]").value = "";
    let option1 = "";
    let option2 = "";
    let a  = [];
    for (let i = 0; i < creditUnit.length; ++i) {
        option1 = creditUnit[i].options[creditUnit[i].selectedIndex].text;
        let totalUnit = document.querySelector("[name = totalUnit]").value;
        totalUnit = Number(totalUnit) + Number(option1);
        a.push(totalUnit);
    }
    let asum = a.reduce((partial_sum, a) => partial_sum + a,0); 

    let b = [];
    for (let i = 0; i < grade.length; ++i) {
        option2 = grade[i].options[grade[i].selectedIndex].text;
        let gpa = document.querySelector("[name = gpa]").value;
        let letterPoint = gradeToPoints(option2);
        let totalPoint = letterPoint;
        b.push(totalPoint);
    }
    let addAB = a.reduce(function(r,a,i){return r+a*b[i]},0);


    let gpaScore = parseFloat(addAB / asum).toFixed(2);
    document.querySelector("[name = totalUnit]").value = asum;
    document.querySelector("[name = gpa]").value = gpaScore;

Explaining the code

The document.querySelectorAll() is use to select html elements/tags, id's, class, anything that can be traversed by the DOM e.g document.querySelectorAll('[name = creditUnit]') will select all element with attribute name as 'creditsUnit' when you have a .value = ""; method added to it, it means an empty value is been assigned here.
The first for loop will loop through the all the creditunit put every thing in an array and sum up all the unit.
The second for loop will loop through the grade, convert them to the equivalent point, store everything in an array and sum up all the values
The parseFloat(addAB / asum).toFixed(2); will calculate the GPA and correct it to 2 significant figures
The document.querySelector("[name = totalUnit]").value = asum; will search for an HTML element in index.html with attribute name='totalUnit' then assign the asum which is the sum of the totalunit and document.querySelector("[name = gpa]").value = gpaScore; will search for an HTML element in index.html with attribute name='gpa' then assign the gpaScore which is the quotient of addAB / asum where addAB is total of value of grade to points and asum is the total credit unit. .

Step 4:

inside the last function you paste this

    if ("A" == grade) {
        return 5.0;
    }
    else if ("B" == grade) {
        return 4.0;
    }
    else if ("C" == grade) {
        return 3.0;
    }
    else if ("D" == grade) {
        return 2.0;
    }
    else if ("E" == grade) {
        return 1.0;
    }
    else if ("F" == grade) {
        return 0.0;
    }
    else {
        //XXX! Should we throw an exception here?
        return Invalid;

Save your file and open index.html in your browser to see how it now work, as you change the values, the gpa and total credit unit are been updated
you can view the demo application here here

.

Github repo

mdjibril / spya-dev-crash-course

two week web development crash course

"# spya-dev-crash-course"

View on GitHub

Happy Coding

Practical Front End Development Part 2 - CSS

Jibril Dauda Muhammad — Sat, 15 Aug 2020 11:47:42 +0000

CSS

Welcome to the second series of Practical Front End Development walk through.
today we want to style out the web page for it to look more prettier
.
Open up main.css from your code editor and
.
remember our folder structure is still like this.

.

Table Of Content

Step 1
Step 2
Step 3
Step 4

.
.

Step 1:

inside main.css we want to set the margin of our form

main {
    margin: 20px;
    padding: 5px;
    display: block;
}
.section-con {
    display: flex;
    justify-content: center;
}

Step 2:

still inside your main.css, for the upper table we only want the left,top, right border to appear, while for the lower border bottom we want the left, bottom, right border to appear. the header text should be centralized

.table-con{
    margin-top: 8px; 
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: none;
    border-left: 2px solid #4caf50;
    border-right: 2px solid #4caf50;
    border-top: 2px solid #4caf50;
}

.table-con-result{
    margin-top: 8px; 
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: none;
    border-left: 2px solid #4caf50;
    border-right: 2px solid #4caf50;
    border-bottom: 2px solid #4caf50;
}

.table-con > thead, .table-con-result > thead {
    text-align: center;
    padding: 16px;
}

Step 3:

still inside main.css, we style the input element, and the select element to all have the same width when viewed from the front end

.code-input {
    width: 80px;
    padding: 5px;
    border: 1px solid #4caf50;
    margin: 5px;
}

.result-input {
    width: 120px;
    padding: 5px;
    border: 1px solid #4caf50;
    margin: 5px;
}

.select {
    width: 80px;
    padding: 5px;
    margin: 5px;
    border: 1px solid #4caf50;
}

Step 4:

still inside main.css we style the button and the footer respectively

button {
    background-color: #4caf50; /* Green */
    border: none;
    color: white;
    padding: 10px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-left: 10px;
    margin-top: 5px;
}

.footer {
    color: #4caf50;
    text-align: center;
}

.
.
Now save your file main.css, then open up index.html in your browser to see the changes
.
In other to implement our functionalities we need to code some javascript function in main.js. follow in the next series to see how when the add button is been clicked and a new row is inserted into the page, you will learn how to access the DOM(Document Object Model) of and HTML file through javascript
.
Github repo

mdjibril / spya-dev-crash-course

two week web development crash course

"# spya-dev-crash-course"

View on GitHub

. Happy Coding

Practical Front End Development Part 1 - HTML

Jibril Dauda Muhammad — Sat, 15 Aug 2020 10:04:28 +0000

HTML

Requirement

Text Editor
Browser

in this walk through tutorial will be build a complete functional frontend web application (a GPA calculator). for this guide i am using Sublime text editor for writing code and Chrome browser for testing my code. without wasting much time talking let jump into our code.

Table Of Content

Step 1
Step 2
Step 3
Step 4
Step 5

.
Below is the folder structure

inside the folder there are three files

index.html root folder
main.css css folder
main.js js folder

Let start with create a file index.html and open it up in your prefered text editor to add the main elements the page requires

Step 1

<!DOCTYPE html>
<html>
<head>
    <title>GPA Calculator</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" type="text/css" href="css/main.css">

    <script src="js/main.js" type="text/javascript"></script>
</head>
<body>

</body>
</html>

from line 7 and 8 we referenced the external stylesheet holding our css rules, and javascript files holding the app functionalities
.

Step 2:

inside the body <body> tag

<header>
        <h1 style="text-align: center;">GPA Calculator</h1>
</header>
<main>
     <section class='section-con'>

     </section>

     <section class='section-con'>

     </section>

     <section class='section-con'>

     </section>
</main>
<footer class="footer">
        <p> &copy; 2020. Made with love by mdjibril</p>
</footer>

Step 3:

inside the first section <section>tag add a <form> element and a <table> element

<form name="formBody" id="formdata" method="post" onSubmit="addUpCreditsGpa; return false">
                <table class="table-con">
                    <thead>
                        <tr>
                            <td>Course</td>
                            <td>Unit</td>
                            <td>Grade</td>
                        </tr>
                    </thead>
                    <tbody id="tableBody">
                        <tr>
                            <td>
                                <input type="text" name="courseCode" class="code-input">
                            </td>
                            <td>
                                <select name="creditUnit" class="select" onchange="addUpCreditsGpa()">
                                    <option value="6">6</option>
                                    <option value="5">5</option>
                                    <option value="4">4</option>
                                    <option value="3">3</option>
                                    <option value="2">2</option>
                                    <option value="1">1</option>
                                </select>
                            </td>
                            <td>
                                <select name="grade" class="select" onchange="addUpCreditsGpa()">
                                    <option value="A">A</option>
                                    <option value="B">B</option>
                                    <option value="C">C</option>
                                    <option value="D">D</option>
                                    <option value="E">E</option>
                                    <option value="F">F</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" name="courseCode" class="code-input">
                            </td>
                            <td>
                                <select name="creditUnit" class="select" onchange="addUpCreditsGpa()">
                                    <option value="6">6</option>
                                    <option value="5">5</option>
                                    <option value="4">4</option>
                                    <option value="3">3</option>
                                    <option value="2">2</option>
                                    <option value="1">1</option>
                                </select>
                            </td>
                            <td>
                                <select name="grade" class="select" onchange="addUpCreditsGpa()">
                                    <option value="A">A</option>
                                    <option value="B">B</option>
                                    <option value="C">C</option>
                                    <option value="D">D</option>
                                    <option value="E">E</option>
                                    <option value="F">F</option>
                                </select>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>

Inside the opening tag of the <form> element we have a javascript function that is been referenced from main.js, in the opening tag of the <select> element this function is repeated again addUpCreditsGpa()
.

Step 4:

inside the second <section> element add two html button

<button form="formdata" onclick="addNewRow()">&nbsp;&nbsp;&nbsp;Add&nbsp;&nbsp;</button>
<button form="formresult" onclick="addUpCreditsGpa()">Calculate</button>

in this path we have a new function addNewRow() when a user click on it, it will automattically add new row to the form.
.

Step 5:

in the last <section> element add another <form> with a <table> element embeded.

<form id="formresult" name="results" method="post" onSubmit="return false">
                <table class="table-con-result">
                    <thead>
                        <tr>
                            <td>Total CU</td>
                            <td>GPA</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input type="text" name="totalUnit" class="result-input" onchange="addUpCreditsGpa()"">
                            </td>
                            <td>
                                <input type="text" name="gpa" class="result-input" onchange="addUpCreditsGpa()">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>

.
From this your index.html should be complete,save and open it up in your browser, how does it look? this will lead us to our section series how we are going to style the web page to look more prettier than it is.
.
Github repo

mdjibril / spya-dev-crash-course

two week web development crash course

"# spya-dev-crash-course"

View on GitHub

. Happy Coding

Multiple CSS Modal Images on a single page with PHP

Jibril Dauda Muhammad — Fri, 13 Dec 2019 05:34:18 +0000

If you've been wondering how to have more than one modal image on one page then this should be of help to you, with a little tweak of our css you can get your code running

After going through different solutions across the web on having more than one modal image on page, i finally achieve this with the help of a php code.

Before proceeding you should be familiar with 'id' attributes, they are unique way of identifying HTML element on a page, the value can be use to perform certain task by calling it through CSS or javascript, in this tutorial we'll be getting our id from a php variable.

Below is the folder structure we'll be using, inside the image folder we'll create additional folders to hold single image file you can name this folder anything but make sure its a unique name: so i decide to use numbers

Note: the html, css, javascript is gotten from here w3school we will setup the php path ourselve:

connect.php for database connection

<?php 
$con = mysqli_connect("localhost", "root", "", "imagemodal");

if (!$con) {
    die("Connection failed: " .mysqli_connect_error());
}
?>

imagetb.sql which hold the table field and corresponding data:

-- Database: `imagemodal`
-- Table structure for table `imagetb`
CREATE TABLE `imagetb` (
  `imageId` int(11) NOT NULL AUTO_INCREMENT,
  `imageName` varchar(200) NOT NULL UNIQUE
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Dumping data for table `imagetb`
INSERT INTO `imagetb` (`imageId`, `imageName`) VALUES
(1, 'Chrysanthemum'),
(2, 'Lighthouse'),
(3, 'Desert'),
(4, 'Hydrangeas');

header.php for page hearder

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Modal Images on One Page</title>

    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimal-ui' />

    <style type='text/css'>
        body{
        font-size: 16px;
            line-height: 1.5; 
    }  
    </style>
</head>

modal.style.php this hold our stylesheet which is here w3School

index.php our main file

*.First we will include the required file first

<?php
include 'connect.php';
include 'header.php';
include 'modal.style.php';
?>

*. After including the required file, we will fetch the values from imagetb in our case we have only two that is imageId and imageName

<?php
echo "<p>Multiple Modal Images on a Single page</p>";
$output1 = "SELECT * FROM imagetb";
$result1 = $con->query($output1) or die($con->error);
?>

*. We will fetch all our result row as an associative array into a while block and create two variables inside it, the $imageId in this case is an auto_incremented value from our db, that was the reason behind naming the individual folders in which our images will be placed with number

<?php
echo "<div>";
    while ($row = $result1->fetch_assoc()) {

        $imageId = $row['imageId'];
        $imageName = $row['imageName'];

    }
    echo "</div>";
?>

*. Inside the while block and immediately after the two variables, we will create another variable which will point to the directory where our image files are and use a while block to open up all the folder inside the images folder

<?php
echo "<div>";
        $dir = "images/".$imageId."/";
        $open = opendir($dir);

        while (($file = readdir($open)) != false) {
            if ($file != "." && $file != ".." && $file != "Thumbs.db") {
                echo"<img id='$imageId' src='$dir/$file' alt='$imageName' style='height:300px; width:200px; border-radius: 10%;'>
                        ";
            }
        }

        echo "<h4 style='text-align:center' id='".$imageId."'>".$imageName."</h4>";
?>

*. Create a div tag immediately after the above while block which will hold our modal images when clicked

<?php
echo "
            <!-- The Modal -->
            <div id='myModal' class='modal'>
                <span class='close'>&times;</span>
                <img class='modal-content' id='img01' style='height:300px; width:200px; border-radius: 10%;'>
                <div id='caption'></div>
            </div>
        ";
        echo "</div>";
?>

*. Create a script tag, immediately after the above div with the following content. So what happens is that whenever an image is clicked, it will be collected with a unique id and inserted into the modal div. Basically the var img = document.getElementById('$imageId'); is been changed when an image is clicked so it save us the id problem

<?php
echo "
            <script>
                // Get the modal
                var modal = document.getElementById('myModal');

                // Get the image and insert it inside the modal - use its 'alt' text as a caption
                var img = document.getElementById('$imageId');
                var modalImg = document.getElementById('img01');
                var captionText = document.getElementById('caption');
                img.onclick = function(){
                    modal.style.display = 'block';
                    modalImg.src = this.src;
                    captionText.innerHTML = this.alt;
                }

                // Get the <span> element that closes the modal
                var span = document.getElementsByClassName('close')[0];

                // When the user clicks on <span> (x), close the modal
                span.onclick = function() { 
                    modal.style.display = 'none';
                }
            </script>
        ";
?>

*. Here is the complete look of our index.php

<?php  

    include 'connect.php';
    include 'header.php';
    include 'modal.style.php';

    echo "<p>Multiple Modal Images on a Single page</p>";
    $output1 = "SELECT * FROM imagetb";
    $result1 = $con->query($output1) or die($con->error);

    echo "<div>";
    while ($row = $result1->fetch_assoc()) {

        $imageId = $row['imageId'];
        $imageName = $row['imageName'];


        echo "<div>";
        $dir = "images/".$imageId."/";
        $open = opendir($dir);

        while (($file = readdir($open)) != false) {
            if ($file != "." && $file != ".." && $file != "Thumbs.db") {
                echo"<img id='$imageId' src='$dir/$file' alt='$imageName' style='height:300px; width:200px; border-radius: 10%;'>
                        ";
            }
        }

        echo "<h4 style='text-align:center' id='".$imageId."'>".$imageName."</h4>";

        echo "
            <!-- The Modal -->
            <div id='myModal' class='modal'>
                <span class='close'>&times;</span>
                <img class='modal-content' id='img01' style='height:300px; width:200px; border-radius: 10%;'>
                <div id='caption'></div>
            </div>
        ";
        echo "</div>";
        echo "
            <script>
                // Get the modal
                var modal = document.getElementById('myModal');

                // Get the image and insert it inside the modal - use its 'alt' text as a caption
                var img = document.getElementById('$imageId');
                var modalImg = document.getElementById('img01');
                var captionText = document.getElementById('caption');
                img.onclick = function(){
                    modal.style.display = 'block';
                    modalImg.src = this.src;
                    captionText.innerHTML = this.alt;
                }

                // Get the <span> element that closes the modal
                var span = document.getElementsByClassName('close')[0];

                // When the user clicks on <span> (x), close the modal
                span.onclick = function() { 
                    modal.style.display = 'none';
                }
            </script>
        ";
    }
    echo "</div>";
?>

Here is where my post ends and wishing you a better coding experience, the entire project can be clone from my github repo

mdjibril / multiple-modal-image

How to create a css multiple modal image on a single page

. Happy Coding