Forem: Simon Ugorji

How to Create An OTP Input Box in React/Next.js

Simon Ugorji — Sun, 23 Jul 2023 07:52:44 +0000

Today, I will show you how you can add an OTP input box to your React JS / Next JS project.

Please make sure that you have a basic knowledge of React's hooks so you can keep up with this tutorial.

I will be using the basic HTML, CSS, and Javascript logic from this snippet on Codepen, converting them to components, and then using states to modify and update the values.

PREREQUISITES

This tutorial assumes that you have a new ReactJs / NextJs installed or that you have an existing React / NextJS project.
We will aim at building something like this and of course, you are entitled to your own styling ✨

SETTING UP

Before we start off, we need to import the CSS declarations that we would use to style our input boxes.

IMPORT STYLES

Within your project, please create a CSS file otpInputs.css and import the declarations below




/** otpInputs.css **/

.digitGroup {
display: flex;
gap: 10px;
justify-content: center;
margin-bottom: 20px;
}

.digitGroup input {
 outline: 0 !important;
 user-select: none !important;
 width: 50px;
 height: 50px;
 background-color: #C5DBF5;
 font-weight: bold !important;
 border-radius: 5px;
 border: none;
 line-height: 50px;
 text-align: center;
 font-size: 24px;
 color: #001E9A;
 margin: 0;
}

.digitGroup input:focus {
 border: 2px solid #001E9A !important;
}

.digitGroup input:active {
 border: 2px solid #001E9A !important;
}

.digitGroup .splitter {
 padding: 5px 0;
 color: rgb(0, 0, 0);
 font-size: 25px;
 margin: 0;
}

.prompt {
 margin-bottom: 20px;
 font-size: 20px;
 color: white;
}

.formSection {
 max-width: 500px;
 margin: auto;
 border-radius: 10px;
 box-shadow: 0px 0px 8px #ddd;
 padding: 20px;
}

.w-100 {
 width: 100%;
}

/* Media query for mobile devices */
@media (max-width: 480px) {
 .digitGroup {
  gap: 5px !important;
 }
 .digitGroup input {
  width: 40px !important;
 }
 .digitGroup .splitter {
  font-size: 25px !important;
 }
}

Next, we need to create a component that will render the input boxes and apply the styling and attributes associated with each of them.

Before we do this, I want to explain the logic / how it works.

A sample input box rendered by the otpInput component will look like this.



<input id="input1" type="text" maxlength="1" name="input1" value="">
...
<input id="input6" type="text" maxlength="1" name="input6" value="">

The id attribute helps us identify each input box and the maxLength attribute ensures that the input box allows just one value.

Create The Components

Now, I will go ahead and create a file otpInputs.js and within this file, I will create a component OTPInput that will render the input box.

I will pass in the props below;

id - This is the unique identifier for each input box.
previousId - This is the ID of the previous input box.
nextId - This is the ID of the next input box. value - This is the value of a particular input.
onValueChange - This is a callback passed as a prop that will run when the input value changes.
handleSubmit - This is a callback that will run when the form is being submitted.

So our file will have the component below, with the properties I have explained above - what a nice wordplay if you noticed 🙂



const OTPInput = ({ id, previousId, nextId, value, 
    onValueChange, handleSubmit }) => {
//... Rest of the magical logic goes here
}

Now we need to add a very important logic to the component above.

We will use the keyup event which is fired when a key is released, and within this event, we will use the code emitted by this event (keyCode) to indicate the key that was pressed. With this code, we can either move to the next input box or go back to the previous input box using the previousId and nextId respectively.

If there's no other input box to serve as the next one in the queue, it will check if the attribute data-autosubmit is specified on the parent element that will group these boxes, and if the attribute is specified and it is set to true, it will submit the form.

Below I have attached the code with their respective explanations.



const OTPInput = ({ id, previousId, nextId, value, onValueChange, handleSubmit }) => {
    //This callback function only runs when a key is released
    const handleKeyUp = (e) => {
        //check if key is backspace or arrowleft
        if (e.keyCode === 8 || e.keyCode === 37) {
            //find the previous element
            const prev = document.getElementById(previousId);
            if (prev) {
                //select the previous element
                prev.select();
            }
        } else if (
            (e.keyCode >= 48 && e.keyCode <= 57) || //check if key is numeric keys 0 to 9
            (e.keyCode >= 65 && e.keyCode <= 90) || //check if key is alphabetical keys A to Z
            (e.keyCode >= 96 && e.keyCode <= 105) || //check if key is numeric keypad keys 0 to 9
            e.keyCode === 39 //check if key is right arrow key
        ) {
            //find the next element
            const next = document.getElementById(nextId);
            if (next) {
                //select the next element
                next.select();
            } else {
                //check if inputGroup has autoSubmit enabled
                const inputGroup = document.getElementById('OTPInputGroup');
                if (inputGroup && inputGroup.dataset['autosubmit']) {
                    //submit the form
                    handleSubmit();
                }
            }
        }
    }
}

Now it is time to return a value from our component. We will return a single input box as a JSX expression and depending on how many times this component is called, it will return the corresponding number of input boxes.

Here's the complete code for the OTPInput component.



const OTPInput = ({ id, previousId, nextId, value, onValueChange, handleSubmit }) => {
    //This callback function only runs when a key is released
    const handleKeyUp = (e) => {
        //check if key is backspace or arrowleft
        if (e.keyCode === 8 || e.keyCode === 37) {
            //find the previous element
            const prev = document.getElementById(previousId);
            if (prev) {
                //select the previous element
                prev.select();
            }
        } else if (
            (e.keyCode >= 48 && e.keyCode <= 57) || //check if key is numeric keys 0 to 9
            (e.keyCode >= 65 && e.keyCode <= 90) || //check if key is alphabetical keys A to Z
            (e.keyCode >= 96 && e.keyCode <= 105) || //check if key is numeric keypad keys 0 to 9
            e.keyCode === 39 //check if key is right arrow key
        ) {
            //find the next element
            const next = document.getElementById(nextId);
            if (next) {
                //select the next element
                next.select();
            } else {
                //check if inputGroup has autoSubmit enabled
                const inputGroup = document.getElementById('OTPInputGroup');
                if (inputGroup && inputGroup.dataset['autosubmit']) {
                    //submit the form
                    handleSubmit();
                }
            }
        }
    }
    return (
        <input
            id={id}
            name={id}
            type="text"
            className={Styles.DigitInput}
            value={value}
            maxLength="1"
            onChange={(e) => onValueChange(id, e.target.value)}
            onKeyUp={handleKeyUp}
        />
    );
};

If you noticed, we invoked a callback function on the onChange attribute to set a new value with the corresponding input ID, if the value of the input box changed. This callback function is passed as a property in our component and with the help of state management on the parent component, we will be able to track and store all the values of the input boxes with their respective IDs.

Next, we need to create this parent component called OTPInputGroup which will group these input boxes and render them. By rendering, I mean that it will invoke the OTPInput 6 times because we need just 6 input boxes.

This parent component will also be responsible to store the functions below;

handleSubmit - This function handles the logic when the form is submitted
handleInputChange - This function handles the logic when a value of an input box changes



//Our parent component
const OTPInputGroup = () => {
    //state to store all input boxes    
    const [inputValues, setInputValues] = useState({
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        input5: '',
        input6: '',
        // Add more input values here
    });
    //this function updates the value of the state inputValues
    const handleInputChange = (inputId, value) => {
        setInputValues((prevInputValues) => ({
            ...prevInputValues,
            [inputId]: value,
        }));
    };
    //this function processes form submission
    const handleSubmit = () => {
        // ... Your submit logic here
    };
}

If you look at the code above, you will notice that we have a state inputValues that stores all the input boxes and their respective values using their IDs from input1 - input as an object.

Now, to be able to update this state, we have another function handleInputChange which requests the input ID and the value of the input and then updates the state accordingly. This function is passed directly to the child component OTPInput as a callback through the prop onValueChange so it can get executed from within the child component.

Next, we have the handleSubmit function which processes the logic when our form is submitted. You can add your API call within that function and perform other validations as well.

Now, let us render the child component 6 times and pass in the properties as well.

Here's the complete code for the parent component.



//Our parent component
const OTPInputGroup = () => {
    //state to store all input boxes    
    const [inputValues, setInputValues] = useState({
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        input5: '',
        input6: '',
        // Add more input values here
    });
    //this function updates the value of the state inputValues
    const handleInputChange = (inputId, value) => {
        setInputValues((prevInputValues) => ({
            ...prevInputValues,
            [inputId]: value,
        }));
    };
    //this function processes form submission
    const handleSubmit = () => {
        // ... Your submit logic here
    };
    //return child component
        return (
        <>
            <div id='OTPInputGroup' className={Styles.digitGroup} data-autosubmit="true">
                <OTPInput
                    id="input1"
                    value={inputValues.input1}
                    onValueChange={handleInputChange}
                    previousId={null}
                    handleSubmit={handleSubmit}
                    nextId="input2"
                />
                <OTPInput
                    id="input2"
                    value={inputValues.input2}
                    onValueChange={handleInputChange}
                    previousId="input1"
                    handleSubmit={handleSubmit}
                    nextId="input3"
                />
                <OTPInput
                    id="input3"
                    value={inputValues.input3}
                    onValueChange={handleInputChange}
                    previousId="input2"
                    handleSubmit={handleSubmit}
                    nextId="input4"
                />
                {/* Seperator */}
                <span className={Styles.splitter}>&ndash;</span>
                <OTPInput
                    id="input4"
                    value={inputValues.input4}
                    onValueChange={handleInputChange}
                    previousId="input3"
                    handleSubmit={handleSubmit}
                    nextId="input5"
                />
                <OTPInput
                    id="input5"
                    value={inputValues.input5}
                    onValueChange={handleInputChange}
                    previousId="input4"
                    handleSubmit={handleSubmit}
                    nextId="input6"
                />
                <OTPInput
                    id="input6"
                    value={inputValues.input6}
                    onValueChange={handleInputChange}
                    previousId="input5"
                    handleSubmit={handleSubmit}
                />
            </div>
        </>
    );
}

Now if you noticed, before we invoked the child component, we had to group the input boxes and then there's this attribute data-autosubmit which enables the form to submit when a user has entered the value for all input boxes.

When invoking the child component, we passed in the properties below;

id - This is the unique Identifier for each input box
value - This is the value of the input box. It gets its value through the inputValues state which is being updated using the handleValueChange function
onValueChange - This prop will serve as a callback function that will reference the parent function handleInputChange responsible for updating the inputValues state.
previousId - This is the ID of the previous input box. This is not applicable to the first input box which is input1.
handleSubmit - This prop will serve as a callback function that will reference the parent function handleSubmit responsible for submitting the form when all inputs contain values and autosubmit is set to true
nextId - This is the ID of the next input box. This is not applicable to the last input box which is input 6.

COMPLETE CODE

Here is the complete code for the file otpInputs.js



//otpInputs.js
import React, {useState} from "react";
import Styles from './otpInput.css'; //remove this line if you are using react

//Our parent component
const OTPInputGroup = () => {
    //state to store all input boxes    
    const [inputValues, setInputValues] = useState({
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        input5: '',
        input6: '',
        // Add more input values here
    });
    //this function updates the value of the state inputValues
    const handleInputChange = (inputId, value) => {
        setInputValues((prevInputValues) => ({
            ...prevInputValues,
            [inputId]: value,
        }));
    };
    //this function processes form submission
    const handleSubmit = () => {
        // ... Your submit logic here
    };
    //return child component
        return (
        <>
            <div id='OTPInputGroup' className={Styles.digitGroup} data-autosubmit="true">
                <OTPInput
                    id="input1"
                    value={inputValues.input1}
                    onValueChange={handleInputChange}
                    previousId={null}
                    handleSubmit={handleSubmit}
                    nextId="input2"
                />
                <OTPInput
                    id="input2"
                    value={inputValues.input2}
                    onValueChange={handleInputChange}
                    previousId="input1"
                    handleSubmit={handleSubmit}
                    nextId="input3"
                />
                <OTPInput
                    id="input3"
                    value={inputValues.input3}
                    onValueChange={handleInputChange}
                    previousId="input2"
                    handleSubmit={handleSubmit}
                    nextId="input4"
                />
                {/* Seperator */}
                <span className={Styles.splitter}>&ndash;</span>
                <OTPInput
                    id="input4"
                    value={inputValues.input4}
                    onValueChange={handleInputChange}
                    previousId="input3"
                    handleSubmit={handleSubmit}
                    nextId="input5"
                />
                <OTPInput
                    id="input5"
                    value={inputValues.input5}
                    onValueChange={handleInputChange}
                    previousId="input4"
                    handleSubmit={handleSubmit}
                    nextId="input6"
                />
                <OTPInput
                    id="input6"
                    value={inputValues.input6}
                    onValueChange={handleInputChange}
                    previousId="input5"
                    handleSubmit={handleSubmit}
                />
            </div>
        </>
    );
}

//Our child component
const OTPInput = ({ id, previousId, nextId, value, onValueChange, handleSubmit }) => {
    //This callback function only runs when a key is released
    const handleKeyUp = (e) => {
        //check if key is backspace or arrowleft
        if (e.keyCode === 8 || e.keyCode === 37) {
            //find the previous element
            const prev = document.getElementById(previousId);
            if (prev) {
                //select the previous element
                prev.select();
            }
        } else if (
            (e.keyCode >= 48 && e.keyCode <= 57) || //check if key is numeric keys 0 to 9
            (e.keyCode >= 65 && e.keyCode <= 90) || //check if key is alphabetical keys A to Z
            (e.keyCode >= 96 && e.keyCode <= 105) || //check if key is numeric keypad keys 0 to 9
            e.keyCode === 39 //check if key is right arrow key
        ) {
            //find the next element
            const next = document.getElementById(nextId);
            if (next) {
                //select the next element
                next.select();
            } else {
                //check if inputGroup has autoSubmit enabled
                const inputGroup = document.getElementById('OTPInputGroup');
                if (inputGroup && inputGroup.dataset['autosubmit']) {
                    //submit the form
                    handleSubmit();
                }
            }
        }
    }
    return (
        <input
            id={id}
            name={id}
            type="text"
            className={Styles.DigitInput}
            value={value}
            maxLength="1"
            onChange={(e) => onValueChange(id, e.target.value)}
            onKeyUp={handleKeyUp}
        />
    );
};

export default OTPInputGroup;

In our project, we can now import this component and use it.



import React from 'react';
import OTPInputGroup from './path/to/otpInput.js';

export default function ResetPage(){
    return (
        <>
             <OTPInputGroup />
        </>
    )
}

That's all 🙂

If you followed the tutorial correctly, you should arrive at something like this. Go ahead and insert a value, you will notice that it moves you over to the next input box, and when you delete a value or use backspace, it moves you back to the previous input box, this is where the keyUp event comes to play.

BEFORE YOU GO…

If you are using NextJS, you can use the code as it is including the Styles already imported. But if you are using ReactJs, please modify the code by importing the styles directly and then modifying the CSS declarations.

Check out the code on GitHub

It's been a while since I wrote my last article. This is because I have some other projects currently that I am working on and it doesn't stop me from sharing the best practices used in each of them.

If you loved this article, please don't hesitate to follow me on my social handles. Let's build GREAT things together!

Happy coding!

Twitter

Facebook

…Off you go now, do well to stop by some other time 🥲

Photo credit: Lautaro Andreani On Unsplash

A Research On The 2 Popular AI Language Models

Simon Ugorji — Tue, 16 May 2023 17:20:21 +0000

In this ever-evolving world of artificial intelligence, there is a groundbreaking technology taking center stage: language models. These remarkable AI models are revolutionizing how we humans interact with computers and navigate through massive volumes of text.

Powered by advanced deep learning algorithms, these language models possess an extraordinary capability to comprehend, generate, and respond to human language in a manner that closely emulates human intelligence.

Currently, there are 2 popular AI language models;

ChatGPT is a chatbot developed by OpenAI and released in November 2022. It is trained to follow instructions in a prompt and provide a detailed response.

Bard AI, which is developed by Google and released in March 2023. It is a creative and helpful collaborator to supercharge your imagination, boost productivity, and bring ideas to life.

In as much as Bard is experimental, it still helps to perform most of the tasks and provide detailed responses wherever and whenever it is needed.

In this article, I will be sharing some differences and features between these 2 great language models.

Some differences & features Between BardAI and ChatGPT

Session Management

When using ChatGPT, each chat is treated as a separate session and this means that any information or data used in that session only remains in that session.

This is particularly useful if you want the AI to store information or data that will be used later in the conversation. For example, you can prompt the AI to address you by a particular name throughout the entire conversation.

And you cannot request the same information in a new chat session.

However, with Bard AI, there's no session management and this means that you can ask the AI to recall information that was shared earlier as long as the previous chats are still there. But if you happen to reload the page (or reset the chat), then the AI tries to answer your question using information that was shared by someone else 😕.

However, this language model is still in its experimental state and I hope they improve on the ability for it to recall information.

I can say ChatGPT passed this test ✅

Programming

We all know that programming is not an easy job, especially during the phase when you are trying to find a solution to a problem.

With these 2 great language models, you have an edge over other programmers because you can easily generate, debug and review your code and this can help improve your productivity.

However, there are a few things that you need to keep an eye on when using any of these 2 language models in programming.

Code Generation

When generating a code, think of the compatibility of that particular code that was generated and then ascertain if it can be executed on a different platform.

Here's a prompt for ChatGPT to generate a code that uses the speech-recognition API to listen and transcribe the spoken words.

In the image above, you can confirm that the AI generated the code that was needed and on the first line of this code, you will notice that it had placed a check to determine if the code (the speech recognition API) is compatible with the user's browser.

On the other hand, when using Bard AI to generate a similar code, it generated the code in Python programming language and I had to explicitly tell it that it had to generate it on JavaScript.

Still, the response is quite poor because the API does not check for compatibility and it's amazing that this code cannot be executed on Google Chrome🙂. The reason for this is that it is not compatible with the browser.

So I guess, ChatGPT passed the code compatibility test ✅.

Code Explanation

Both language models were able to explain the code it had generated, line by line and I can say that they both have good code explanations.

I can check that off my list and this means that they passed the code explanation test 😅

Code Debugging

We all know how relieving it is for us to debug our code almost immediately as the bug is spotted.

Consider the bugged code below;

(function() {
  (function() {
    console.log('Hello')
  })()

  (function() {
    console.log('World!')
  })()
})()

Credit: https://victorzhou.com/blog/a-javascript-bug-i-had-once/

When I used BardAI to debug this code, it was able to rewrite the code in such a way that you wouldn't have to experience the bug in the first place 😅 and this is not helpful.

However, ChatGPT was able to correctly debug this code and it was also able to explain why there was a bug in the first place.

So I can say that ChatGPT passed this test ✅

I can go on and on on programming cause it is my line of business but I would leave it to you to further explore these 2 language models.

Internet Access

We all know how important it is to have access to current information on the Internet.

It is quite unfortunate that ChatGPT is not able to action any request that involves accessing current information as it has a knowledge cut-off date (this is a specific point in time until which an AI or information system has been trained or has access to information).

However, with BardAI, you can get access to current information on the Internet and if this information involves the name of a person, please do well to use an underscore to separate the name of this person as it would have trouble looking up that information.

Prompt: look up simon_ugorji on Google

With BardAI, you can look up information on social media such as Instagram as well.

Below, I prompted the AI to look up the Nigerian chef, Hilda Baci's account on Instagram (Hilda Baci is a passionate chef that cooked for 100 hours straight in a bid to beat India’s record in Guinness World Record).

From the information above you can see the number of followers she has, the number of people she's following, etc.

I must admit it, this is a very powerful and useful feature.

Mathematics and Logical Questions

You can as well prompt these 2 AI language models to answer mathematics and logical questions and I can say that they passed this test ✅

I think the reason why some developers are afraid of being laid off due to the advancement of AI in this field is because they are scared to use it. A fun fact is that I was one of those developers and right now you cannot imagine how happy I am to have it as my companion.

I listed only a few differences and features of these 2 great AI language models and I'm sure there's more especially when you use it to generate a writing or an article.

However, there's always room for improvement. If you are a researcher for any of these popular AI language models, I believe you've read about something in this article that you need to work on 😉

Thank you for reading this little piece of mine about AI.

Psst! I'm open to web development and Technical writing roles

Image credit: Alex Knight on Unsplash

Original Article: https://simon-ugorji.medium.com/a-research-on-the-2-popular-ai-language-models-79d83781f865

How To Read A CSV File & Write Data Into It Using PHP

Simon Ugorji — Mon, 10 Apr 2023 16:26:12 +0000

I'm currently building an email software with PHP to help companies send newsletters to their contact list and I implemented a feature that would enable the software to read & write data into a contact list in CSV format.

I will start by explaining what a CSV file is, how to read data & extract data from it, then how to write data into it.

What is a CSV File?

A CSV (Comma Separated Values) File is a text file that uses commas to separate information.

Each line of this file is a data record and this means that it can be used to present information in a table-structured format.

In the next section, I will show you how to read and extract data from a CSV file.

Reading & Extracting Data From CSV File

I will use the inbuilt function file to read data from the CSV file and then I will use the str_getcsv() to parse the strings containing commas.

Before I explain how to use the function str_getcsv(), I want to show you how data from a CSV file is being outputted.

<?php
    if($_FILES){
        var_dump(file($_FILES['file']['tmp_name'], FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES));
    }
?>

<html>
    <body>
        <form method="post" enctype="multipart/form-data">
            <input type="file" name="file" />
            <button>upload</button>
        </form>
    </body>
</html>

When I upload a file using the code above, this is what the output looks like;

Now, If you look at the image above you will notice that each of the strings has commas within them and each comma separates one piece of information from the other.

I will go ahead and loop through this file again, but this time I will be using the array_map() function and then provide str_getcsv() as the callback that will parse each of these strings that have commas and separate them in a single array.

if($_FILES){
    //loop through the csv file into an array
    $theCSV = array_map('str_getcsv', file($_FILES['file']['tmp_name'], FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES));
    //dump result
    var_dump($theCSV);
}

This is what our array looks like now.

You can say that it is much better than the previous output, and we have the column headers (Full Name, Phone, Email) as the first element of this array.

Now, let us walk on this array using the array_walk() function and then provide a callback function that will combine the column headers (Full Name, Phone, Email) and each of the CSV data as a new array.

if($_FILES){
    //loop through the csv file into an array
    $theCSV = array_map('str_getcsv', file($_FILES['file']['tmp_name'], FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES));
    /*Walk through the array and combine the headers which is the first element of our csv array with the rest of the csv data*/
    array_walk($theCSV, function(&$ary) use($theCSV) {
        $ary = array_combine($theCSV[0], $ary);
    });
    //dump result
    var_dump($theCSV);
}
?>

If you noticed, on the callback function above, I used the & operator on the $ary variable to pass it into the function by reference and this makes it possible for us to modify the original array. Visit my article on LinkedIn to learn the difference between passing by reference and passing by value in PHP.

When we run the code above, this is what our CSV array now looks like;

If you noticed, the first element of this new array still has the headers combined with itself because we had earlier used it to combine with every other element of the CSV array.

Now, let us remove the column headers which is the first element of this CSV array using the function array_shift()

if($_FILES){
    //loop through the csv file into an array
    $theCSV = array_map('str_getcsv', file($_FILES['file']['tmp_name'], FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES));
    /*Walk through the array and combine the headers which is the first element of our csv array with the rest of the csv data*/
    array_walk($theCSV, function(&$ary) use($theCSV) {
        $ary = array_combine($theCSV[0], $ary);
    });
    //remove column headers which is the first element
    array_shift($theCSV);
    //dump result
    var_dump($theCSV);
}

This is what our final CSV array looks like

If you want to extract values from the Email columns only, you can write a loop that will go through the CSV array and then extract data from the email index.

We have made it very easy to read and extract data from a CSV file 😃

Now, before we talk about writing data to this same CSV file, I will make the code above a function so that we can return both the column headers and the CSV data as an array because we would need it in the next section 🙂

function readCSV($file){
    if(empty($file) || !file_exists($file)) return;
    //store the column headers
    $headers = null;
    $theCSV = array_map('str_getcsv', file($file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES));
    /*Walk through the array and combine the headers which is the first element of our csv array with the rest of the csv data*/
    array_walk($theCSV, function(&$ary) use($theCSV, &$headers) {
            $ary = array_combine($theCSV[0], $ary);
            //store the headers
            $headers = $theCSV[0];
    });
    //remove column headers which is the first element of our csv array
    array_shift($theCSV);
    //return data
    return array(
        "headers" => $headers,
        "data" => $theCSV
    );
}

Writing Data Into A CSV File

In this section, I will show you an easy way to write data into a CSV file.

The logic is to open the CSV file in append mode with fopen() and use fputcsv() to parse the data we want to write to it in CSV format and then it will write this data to the file stream.

Now, how do we format and arrange this new data that we want to append to our CSV file?

To do that, I will loop through the column headers that are returned from the readCSV() function and then attach the respective values to these headers so that they are able to maintain their position when we append them to the CSV file.

if($_SERVER['REQUEST_METHOD'] == "POST"){
    $file = "./my_csv_file.csv";
    //loop through the csv file into an array
    $csvData = readCSV($file);
    //create array to store the new data
    $newData = [];
    //loop through headers and then add values as a new array
    foreach($csvData['headers'] as $index => $key){
        if($key == 'Full Name'){
            $newData[$key] = $_POST['full_name'];
        }elseif($key == 'Email'){
            $newData[$key] = $_POST['email'];
        }elseif($key == 'Phone'){
            $newData[$key] = $_POST['phone'];
        }else{
            $newData[$key] = '';
        }
    }
    var_dump($newData);
}

So, this is what the array that will be appended to our CSV file looks like.

Before we append this data to the CSV file, we have to get rid of the keys and we can do that easily using array_values()

if($_SERVER['REQUEST_METHOD'] == "POST"){
    $file = "./my_csv_file.csv";
    //loop through the csv file into an array
    $csvData = readCSV($file);
    //create array to store the new data
    $newData = [];
    //loop through headers and then add values as a new array
    foreach($csvData['headers'] as $index => $key){
        if($key == 'Full Name'){
            $newData[$key] = $_POST['full_name'];
        }elseif($key == 'Email'){
            $newData[$key] = $_POST['email'];
        }elseif($key == 'Phone'){
            $newData[$key] = $_POST['phone'];
        }else{
            $newData[$key] = '';
        }
    }
    //open the csv file as in append mode
    $fp = fopen($file, 'a+');
    //remove keys from new data
    $newData = array_values($newData);
    //append data to csv file
    fputcsv($f, $newData);
    //close the resource
    fclose($fp);
}

If you followed the process correctly, you should see a new row of data when you open the CSV file.

CONCLUSION

We have talked about what a CSV file is, how to read and extract data from a CSV file, and then how you can write data back into a CSV file.

I explained all the functions and procedures used in this tutorial and I added external links if you want to extend your knowledge.

That's it! Is there anything I'm missing? Do you have any questions for me? I will be in the comments section! 😊

EXTRA

I am open to web development and Technical Writing roles ✅
You will never know if I am a good fit for your company until you give me a chance.

Which validation library do you use for your PHP forms?

Have you tried octavalidate, the simplest and easiest validation library with over 4 releases that help to validate your forms using validation rules, sophisticated regular expressions, and PHP's inbuilt functions?

Learn how you can validate your PHP forms using octavalidate

Thank you for reading!

Photo by Mika Baumeister on Unsplash

How To Setup Automatic Redirects In Your React Application

Simon Ugorji — Fri, 20 Jan 2023 09:36:06 +0000

In today's article, I will show you how you can set up an automatic redirect to a secured/restricted page in your react application after the user is authenticated.

INTRODUCTION

Let's assume that in your app, you have a page that needs authentication before a user will be able to access it, for example, the dashboard. This means that before a user is allowed to access the dashboard, he must be logged in.

Now, What if for any reason (session timeout, expired cookie, etc.), the user logs out of the app, but needs to revisit that same page on the dashboard? Or maybe he tries to visit information on the dashboard by clicking on the link from an email sent to him? How would you redirect this user back to the link he tried to visit after authentication?

This question will immediately make you understand that it is not enough to ask a user to log in before he can access a restricted page. But you should also redirect the user to the restricted page immediately after he is authenticated.

STILL CONFUSED? LET ME EXPLAIN BETTER

So I have this page http://my-website.com/dashboard/update-profile that needs the user to be authenticated before he is allowed to visit it. Whenever a user that is not authenticated tries to visit it, he will be redirected to http://my-website.com/login

Now the goal is to preserve this URL http://my-website.com/dashboard/update-profile so that when the user is authenticated successfully, he will be redirected back to it.

I will show you how you can achieve this in your React App, and if you should understand the logic, you can implement it anywhere!

USING A QUERY PARAMETER

In this approach, I will check if the user is not logged in, then retrieve the URL he is trying to visit, store it in the query parameter next, and then redirect him to the login page. If authentication is successful, I will redirect him back to the URL in the next query parameter.

Place this code on a secured/restricted page (a page that requires authentication)

To achieve this, the first thing that I need to do is to check if the user is not logged in.

useEffect(() => {
    isAuthenticated().then(res => {
        //check if user is not logged in
        if(!res){
            //----
        }
    }
}, []) //make the function run only once when the component mounts

Now we need to create a new URL object with the link that this user will be redirected to in order to get authenticated.

In my case, it will be the /login page and the reason why I am creating a new URL object with it is that I am going to manipulate the link by adding a query parameter later on.

useEffect(() => {
    isAuthenticated().then(res => {
        //check if user is not logged in
        if(!res){
            //create a URL object with the Login Link
            const loginUrl = new URL('http://my-website.com/login');
        }
    }
}, []) //make the function run only once when the component mounts

Now before we continue, we need to make sure that the user is trying to visit a restricted page in the dashboard. We can do that by checking if the current URL contains /dashboard.

I will use a regular expression inside the match method to perform this search on the current URL.

useEffect(() => {
    isAuthenticated().then(res => {
        //check if user is not logged in
        if(!res){
            //create a URL object with the Login Link
            const loginUrl = new URL('http://my-website.com/login');
            //check if user is trying to access dashboard without logging in
            if(window.location.href.match(new RegExp('/dashboard', 'i'))){
                //---
            }
        }
    }
}, []) //make the function run only once when the component mounts

Now we need to append the link the user tried to visit as a query parameter to the URL object we created earlier, and then redirect the user to the full URL from this URL object.

useEffect(() => {
    isAuthenticated().then(res => {
        //check if user is not logged in
        if(!res){
            //create a URL object with the Login Link
            const loginUrl = new URL('http://my-website.com/login');
            //check if user is trying to access dashboard without logging in
            if(window.location.href.match(new RegExp('/dashboard', 'i'))){
                //Get the url he wanted to visit
                const next = window.location.href
                //append it to the URL object
                loginUrl.searchParams.append('next', next);
            }
            //redirect the user to the full URL from the URL Object
            window.location.href = loginUrl.href.toString()
        }
    }
}, []) //make the function run only once when the component mounts

Here's what we have done so far.

When a user that is not authenticated tries to visit any page in the dashboard for example http://my-website.com/dashboard/update-profile, he will be redirected to http://my-website.com/login?next=http://my-website.com/dashboard/update-profile.

Now, here's something to have in mind.

The browser will try to encode the value in the next query parameter because it is a URL and before we access this value, we need to decode it.

On my end, here's what my address bar looks like

It is time for us to handle the redirect if the user becomes authenticated.

HANDLING THE REDIRECT

Now on your login page, we will create a variable that will store the default link the user will be redirected to if authentication is successful.

We will also import useLocation from react-router-dom so that we can be able to read the current URL and check if it contains a search (query) parameter.

import {useLocation} from 'react-router-dom';

export default function Login(){
  //invoke the function
  const location = useLocation();
  //default page to redirect user after login
  let redirect = 'http://my-website.com/dashboard/home';
  //check if there's search param in the URL
  if(location.search){
    //---
  }
}

If you don't want to use the useLocation module to read the current URL, you can equally access the current URL directly using JavaScript.

export default function Login(){
    //default page to redirect user after login
    let redirect = 'http://my-website.com/dashboard/home';
    //create a URL object using the current url
    const url = new URL(window.location.href)
    //check if url contains a search parameter
    if(url.search){
        //---
    }
}

Whichever method you choose to use, the next thing to do is to read the search parameters and check if it contains next.

If it contains next, we will decode the value and reassign the value of the redirect variable to this URL.

You can also perform a search to check if the decoded value contains /dashboard.

export default function Login(){
    //default page to redirect user after login
    let redirect = 'http://my-website.com/dashboard/home';
    //create a URL object using the current url
    const url = new URL(window.location.href)
    //check if url contains a search parameter
    if(url.search){
        //read the search parameters
        const search = new URLSearchParams(url.search)
        //check if next parameter is present
        if(search?.get('next')){
            //decode it
            const next = decodeURIComponent(search.get('next'))
            //check if dashboard is present in the URL
            if(next.match(new RegExp('/dashboard', 'i'))){
                redirect = next;
            }
        }
    }
    //after authentication, redirect users to the redirect variable
    //window.location.href = redirect;
}

So after authentication, you should redirect your users to the value of the redirect variable, which is the decoded URL!

Watch my implementation below

A LITTLE TIP

If you want to make your redirects cleaner, you can store the URL in the browser's sessionStorage and when you validate it, you can go ahead and delete it from the session storage, then redirect the user to the URL.

Thank you for reading.

Psst! I'm open to gigs on web development and Technical Writing!

EXTRA

I built a JavaScript Library that is capable of validating your front-end forms using regular expressions, validation rules, and form input attributes.

Check out this library on GitHub

Octagon-simon / octaValidate

This Library helps to validate your HTML forms using validation rules, sophisticated regular expressions and form input attributes.

Octavalidate - JS V1.3.2

This JavaScript library helps to validate your frontend (HTML) forms using validation rules, sophisticated regular expressions and form input attributes.

We have included a demo.html file which you can play with to see how this library really works.

OTHER RELEASES

Octavalidate - ReactJS

Use the ReactJS release of this library to validate your front-end forms client-side.

Visit the package

Octavalidate - PHP

Use the PHP release of this library to validate your forms server-side.

Visit the repository

Octavalidate - NodeJS

Use the NodeJS release of this library to validate your forms server-side.

Visit the package

DOCUMENTATION

Visit the DOCUMENTATION to learn more about this GREAT Library!

INSTALL

CDN

Place this script before the </head> tag.

<script src="https://unpkg.com/octavalidate@latest/native/validate.js"></script>

LOCAL

Download and import the latest release to your project.
In your project, create a script tag and link the file…

View on GitHub

Check out the Documentation

Octavalidate | Getting Started

Octavalidate: A feature-rich easy-to-use form validation library for your project

octagon-simon.github.io

Photo Credit: Hal Gatewood On Unsplash

How to Strategically Set Up Roles for User Authentication in NodeJS Applications

Simon Ugorji — Wed, 21 Dec 2022 07:23:34 +0000

Broken authentication is a common vulnerability in web applications that can allow attackers to gain access to the system without proper credentials. This type of vulnerability can occur when the authentication system is weak or poorly implemented, or when user credentials are not properly protected. As a result, attackers may be able to exploit the vulnerability to gain access to sensitive data or manipulate user information.

To prevent broken authentication, it is essential to implement strong and secure authentication measures in your web application. This may include using robust password policies, enabling two-factor authentication, and regularly monitoring and testing the authentication system to identify and fix any vulnerabilities. Additionally, it is important to protect user credentials by storing them securely and using secure protocols to transmit them. By taking these precautions, you can help protect your web application and its users from the risks of broken authentication.

Now, let us discuss the various authentication methods.

DIFFERENT AUTHENTICATION METHODS

PASSWORD-BASED AUTHENTICATION

This is the most common type of authentication. It requires the user to register with a username or email address and a password which will be required if they want to sign in to the application.

PASSWORDLESS AUTHENTICATION

This mode of authentication does not require a user to provide a username or a password. Instead, the user only needs to provide some other form of evidence, such as a fingerprint, physical token code, or a magic link sent to their email address. The user can also be authenticated using verified accounts like; Google, Facebook, or GitHub.

There are so many ways to authenticate users in your application. For the purpose of this article, I will focus on a third-party authentication system called Frontegg. Frontegg is a modern UI platform that enables developers to provide various user management features, such as secure authentication and login.

It also comes with the ability to change styles and utilize a variety of third-party logins, such as Github, Facebook, Google, and more. It also contains user management features such as profile management, roles, permissions setup, and more.

GETTING STARTED WITH FRONTEGG

Head over to their website at Frontegg and register as a new user.

Once you sign up successfully, you will be taken through an onboarding process where you will select a custom logo for your login portal, a brand color, and a custom name.

When you are done, hit the 'Next' button to see the various login options you can enable for your app.

After you choose the login options, you want to implement in your application, hit the 'Next' button. Now, you come to enabling an extra layer of security. On this page, you will be able to enable device fingerprinting, captcha challenge, session management, and forced multi-factor authentication.

Once you have completed the onboarding process, click on the 'Create login box' button, and you will be redirected to your dashboard.

Now, we are ready to integrate authentication into our app.

INTEGRATING AUTHENTICATION INTO OUR APP

Click on the 'Publish to dev' button on your dashboard's top right.

Once you click on this button, you will be redirected to a page where you can choose a tech stack for your project and then configure your app's development environment URL.

Now, click on the 'Next' button and follow the steps on the new page to integrate Frontegg into your project based on the tech stack you chose.

If you want to use React in your project, follow the process below to integrate Frontegg into your React project.

INTEGRATING FRONTEGG INTO A REACT PROJECT

If you don't have React installed, use the command below to install a new react project.

npx create-react-app app-with-frontegg
cd app-with-frontegg

Next, install Frontegg and react-router-dom libraries from NPM.

npm install @frontegg/react react-router-dom

Now, it is time to fire up your project. Run the following command on your terminal.

npm start

Next, we need to wrap our root component with FronteggProvider.
The code to achieve this is on the integration page. However, if you are using React 18, you may copy the code below but do well to replace the baseUrl and clientId with yours.

In your index.js or main.jsx, paste the code below:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

import { FronteggProvider } from '@frontegg/react';

const contextOptions = {
  baseUrl: 'YOUR_BASE_URL',
  clientId: 'YOUR_CLIENT_ID'
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <FronteggProvider contextOptions={contextOptions} hostedLoginBox={true}>
        <App />
    </FronteggProvider>
);

If you see this error on your terminal:

Stop the server and install the missing dependency with the command:

npm install tslib

After installing this package, restart your server, and you should be ready. At this point, Frontegg should be successfully integrated into our react project.

Now, it is time to authenticate users in our app.

AUTHENTICATING USERS IN OUR APP

In this section, we will use the Frontegg useAuth hook to check whether a user is logged in to our app. If the user is not authenticated, we will redirect the user to a login page using the useLoginWithRedirect hook.

If you need help with hooks in react, learn how to do so in free code camp.

In your app.js or App.jsx, paste this code:

import './App.css';
// import { useEffect } from 'react';
import { useAuth, useLoginWithRedirect, ContextHolder } from "@frontegg/react";

function App() {
  const { user, isAuthenticated } = useAuth();
  const loginWithRedirect = useLoginWithRedirect();

  // Uncomment this to redirect to log in automatically
  // useEffect(() => {
  //   if (!isAuthenticated) {
  // loginWithRedirect();
  //   }
  // }, [isAuthenticated, loginWithRedirect]);

  const logout = () => {
    const baseUrl = ContextHolder.getContext().baseUrl;
    window.location.href = `${baseUrl}/oauth/logout?post_logout_redirect_uri=${window.location}`;
  };

  return (
    <div className="App">
      { isAuthenticated ? (
        <div>
          <div>
            <img src={user?.profilePictureUrl} alt={user?.name}/>
          </div>
          <div>
            <span>Logged in as: {user?.name}</span>
          </div>
          <div>
            <button onClick={() => alert(user.accessToken)}>What is my access token?</button>
          </div>
          <div>
            <button onClick={() => logout()}>Click to logout</button>
          </div>
        </div>
      ) : (
        <div>
          <button onClick={() => loginWithRedirect()}>Click me to login</button>
        </div>
      )}
    </div>
  );
}

export default App;

If you want users of your application to be redirected to a login page automatically, uncomment the lines above.

If you go back to your browser, you should see a button prompting you to log in to the application.

Click on this button, and you will be redirected to a page containing the login form with the authentication options you had built earlier.

Now let us test the authentication by clicking on the link to sign up.

After you sign up, you should be automatically redirected back to your app.

Now, click on the button again to log into the application. You should see the screen below in your application.

We have successfully implemented authentication in our react app!
Let us take things a bit further, shall we?

ADDING AN ADMIN PORTAL

The admin portal enables a user to add more information to his profile. This is more like a user updating their profile in your application.

In the app.js or App.jsx file, import the admin portal module into the project.

import { AdminPortal } from '@frontegg/react'

Now, let us add a button that will open the admin portal:

const handleClick = () => {
  AdminPortal.show();
};

<button onClick={handleClick}>Settings</button>

If you reload your browser and click on the settings button, you should see a similar screen.

This will enable users in your application to update their profiles.

HOW TO LOCATE USER DATA IN FRONTEGG

Now, let's see where you can locate the profiles of people that have signed up on your application and assign roles to them.

Go to 'Homepage' on your Frontegg portal by clicking the egg icon on the top left of your dashboard.

On the sidebar, click on the 'Environments' dropdown menu and then click on 'Development'. This will switch you to a development environment since we have not yet published our app.

On the development environment, click on 'Users' in the sidebar.
This will take you to a page where you can manage the users of your application.

On this page, you will see all your application users, including those who have verified their accounts. You can also perform actions like editing a user's data, locking a user, deleting a user, and resending an activation email.

Now, let us set up roles for the users of our application.

HOW TO SET UP ROLES

In the sidebar, click on 'Roles' and a new page will be revealed. On this page, you will see the roles already created and a button to create a new role.

Click on the add new button and provide some information about the new role.

If you need help setting up roles, check the Frontegg documentation.

After creating a role, you need to add permissions to the role you created.
On the sidebar, click on 'Permissions' and select the permissions that are to be applied to the role. When you are done, click on the save changes button to save your changes.

Now that we have created roles and assigned permissions to them, let us assign these roles to our application users.

HOW TO ASSIGN ROLES TO USERS

On the sidebar of your Frontegg portal, click on 'Accounts'. On this page, you will see the list of organizations registered in your application.

Now, click on the organization you wish to manage and you will see the users attached to that organization. Click on the secondary menu of a particular user and you should be able to assign or remove the roles of that user.

We have successfully integrated authentication and strategically set up roles in our application with the help of Frontegg.

CONCLUSION

Today, we discussed authentication, the need to implement strong authentication in our application, and the various authentication methods.
I also showed you how to use Frontegg for implementing strong authentication and setting up user roles and permissions in your web application. I hope this article has helped you dip your toes in the authentication pool.

Thank you for reading.

Image Credit: Onur Binay On Unsplash

How To Upload And Zip Single Or Multiple Files in PHP

Simon Ugorji — Sun, 11 Dec 2022 20:23:05 +0000

In my article today, I will show you how you can upload both single and multiple files in PHP and save them in a zip file.

I will make use of the ZipArchive() class in PHP for the purpose of this tutorial.

INTRODUCTION

The ZipArchive() class is an inbuilt class in PHP that can be used to archive a file or group of files and compress it with zip.

Now let me show you how you can use this class to upload and zip both single and multiple files.

ABOUT THE CLASS

In order to use this class in your project, you must initialize it using the new keyword

//initialize the zip archive class
$zip = new ZipArchive()

Once you have initialized it, the methods below become available for use

open

This method opens an existing zip archive for reading, writing, or modifying or creates an empty zip archive.

addFile

This method adds a file from a given path to a ZIP archive.

This method closes opened or created archives and then saves changes.

Now let us go ahead and understand how we can upload and zip both single and multiple files in PHP

UPLOADING A SINGLE FILE

Assuming I have an HTML form that allows users to upload a single file like this;

<form method="post" action="" enctype="multipart/form-data">
    <input type="file" name="file">
    <button type="submit">Submit</button>
</form>

In PHP, I will check if a file was uploaded using the POST method, then I will process the file, create a new Zip Archive, and add the file to the zip archive.

Now let us talk about what happens when we upload a file.

What Happens When We Upload A File

When we upload a file, its properties become available to the $_FILES global variable.

The $_FILES global variable is an associative array of items uploaded to the current script via the HTTP POST method.

This means that we can see properties like;

The name of the file [name].
The type of file [type].
The temporary location of the file [tmp_name].
The error code [error].
The size of the file (in bytes) [size].

This is an example of a typical output from the $_FILES array when a single file is uploaded.

So we can see that the index tmp_name contains the path of the uploaded file which is also its temporary location in the server.

Now let us create a script that will process the incoming file and save it to an archive.

//check if the request method is POST
if($_SERVER['REQUEST_METHOD'] === 'POST'){
    //check if a file was uploaded
    if(isset($_FILES['file']) && !empty($_FILES['file']) && !is_array($_FILES['file'])){
        //initialize the ziparchive class
        $zip = new ZipArchive();
        //set the name of our zip archive
        $zip_file_name = 'MyFile.zip';
        //create the new zip archive using the $file_name above
        if($zip->open($zip_file_name, ZipArchive::CREATE) === true){
            //add the file to the archive
            $zip->addFile($_FILES['file']['tmp_name'], $_FILES['file']['name']);
            //close the archive
            $zip->close();
        }else{
            echo "Couldn't create Zip Archive";
        }
    }
}

If you look at the snippet above, you will notice that we followed a very simple order while creating our zip archive.

First, we created a new zip archive with the name MyFile.zip using the open() method.

Then we added the file coming from the $_FILES array using the addFile() method and lastly, we closed the archive so that it will save our changes using the close() method.

if you should run this code in your local development server and upload a file, you will see the zip archive MyFile.zip right within the root of your folder. Open this archive and you will see the file you just uploaded.

Now let us talk about how we can upload and zip multiple files

UPLOADING MULTIPLE FILES

Uploading multiple files and saving them in a zip file is not too different from the script above.

Let us modify the HTML form responsible for uploading multiple files like so;

<form method="post" action="" enctype="multipart/form-data">
    <input type="file" name="file[]" multiple>
    <button type="submit">Submit</button>
</form>

Before we go into detail, let us see the output of the $_FILES array when we upload multiple files.

At this point, you may be confused about how to retrieve the file path and names of each of the files, and how to add them to an archive.

Well, you don't have to be confused because we will loop through the $_FILES array, then match the file tmp_names and file names based on their indexes.

//check if the request method is post
if($_SERVER['REQUEST_METHOD'] === 'POST'){
    //check if a file was uploaded
    if(isset($_FILES['file']) && !empty($_FILES['file']) && is_array($_FILES['file'])){
        //initialize the ziparchive class
        $zip = new ZipArchive();
        //set the name of our zip archive
        $zip_file_name = 'MyFile.zip';
        //create the new zip archive using the $file_name above
        if($zip->open($zip_file_name, ZipArchive::CREATE) === true){
            //loop through the tmp_name of the files in $_FILES array
            foreach($_FILES['file']['tmp_name'] as $key => $tmpName){
                //get the name of the file
                $file_name = $_FILES['file']['name'][$key];
                //add the file
                $zip->addFile($tmpName, $file_name);
            }
            //close the archive
            $zip->close();
        }else{
            echo "Couldn't create Zip Archive";
        }
    }
}

Now if you should run this code in your local development server and upload some files, you will notice that the archive is updated with the recent files you just uploaded.

You can easily group the logic to handle both single and multiple file uploads.

//check if request method is post
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    //check if a file was uploaded
    if (isset($_FILES['file']) && !empty($_FILES['file'])) {
        //single file upload
        if (!is_array($_FILES['file'])) {
            //initialize the ziparchive class
            $zip = new ZipArchive();
            //set the name of our zip archive
            $zip_file_name = 'MyFile.zip';
            //create the new zip archive using the $file_name above
            if ($zip->open($zip_file_name, ZipArchive::CREATE) === true) {
                //add the file to the archive
                $zip->addFile($_FILES['file']['tmp_name'], $_FILES['file']['name']);
                //close the archive
                $zip->close();
            } else {
                echo "Couldn't create Zip Archive";
            }
        }
        //multiple file uploads
        elseif (is_array($_FILES['file'])) {
            //initialize the ziparchive class
            $zip = new ZipArchive();
            //set the name of our zip archive
            $zip_file_name = 'MyFile.zip';
            //create the new zip archive using the $file_name above
            if ($zip->open($zip_file_name, ZipArchive::CREATE) === true) {
                //loop through the tmp_name of the files in $_FILES array
                foreach ($_FILES['file']['tmp_name'] as $key => $tmpName) {
                    //the name of the file
                    $file_name = $_FILES['file']['name'][$key];
                    //add the file
                    $zip->addFile($tmpName, $file_name);
                }
                //close the archive
                $zip->close();
            } else {
                echo "Couldn't create Zip Archive";
            }
        }
    }
}

If in your application, users are allowed to upload multiple files that are archived and compressed as zip, you need to make sure that you generate a unique name for the zip archives.

You can use PHP's inbuilt functions uniqid(), rand() to generate a random key for the zip archive name.

//generate a random key for the zip archive name
$randKey  = uniqid().rand(0000,9999);
//zip file name
$zip_file_name = "$randKey.zip";

CONCLUSION

We have talked about the ZipArchive class in PHP, its methods, and how we can use it to create an archive of files and compress them as zip.

We also talked about what happens when we upload a file and how we can extract the name of an uploaded file, its size, and its temporary location from the $_FILES array.

I also showed you the output of the $_FILES array in case of a single or multiple file upload.

Finally, I gave you a hint on how you can generate a random key for your zip archive names if you are zipping the files uploaded by users.

EXTRA

I have developed a validation library that helps to validate your forms in PHP using validation rules, sophisticated regular expressions, and PHP's inbuilt validation.

This Library is Open-source and you can use this library to validate data coming from the $_POST, $_GET, or $_FILES arrays.

Check out the documentation of this library below

Octavalidate - PHP | Server-side Validation Library for PHP

octavalidate-PHP: This PHP Library helps to validate your forms server-side using validation rules, PHP's inbuilt validation, and sophisticated regular expressions.

octagon-simon.github.io

Thank you for reading.

Image Credit: Henry & Co on Unsplash

How does the sort method work in JavaScript?

Simon Ugorji — Sun, 04 Dec 2022 08:58:29 +0000

In my article today, I will show you how the sort method (Array.prototype.sort()) works in JavaScript, the logic behind it, and how you can use it to sort an array.

INTRODUCTION

The Array prototype sort() is used to sort elements in an array depending on the logic provided and then returns the reference to the same array, now sorted.

The default order of the sort() method is ascending and it works by converting the array elements into strings, then arranging them according to each character's Unicode code point value.

The sort() method accepts a callback function and this function will contain some logic that will be used to properly sort the array.

WHAT WE WILL DO

I will make use of the sort() method on an array and then provide a callback function that will actually perform the sorting

If I am to sort an array of numbers [3,4,5,2,1] in ascending order, I will use the logic ( a > b ) to compare each element and it will return the element whose code point value is lower than the next, sorted.

LET'S TALK ABOUT CODE POINTS

According to Wise geek, a code point refers to a specific numerical value that signifies any individual character in a character set.

So this means that every character on your keyboard has a code point in the character set.

Now you may ask, "What then is a character set?"

Well, a character set is like a multilingual dictionary that explains to the computer which numbers correspond to which characters.

So the uppercase character "A" has a code point of "65" and the lowercase character "a" has a code point of "97" in the character set.

This means that if we were to sort an array of letters in ascending order, the uppercase letters get sorted first before the lowercase letters and if we were to sort an array of letters in descending order, the lowercase characters get sorted first before the uppercase letters.

This happens because of their code points in the character set.

That makes sense right? 😃

Let's see how we can get the code points of characters in JavaScript.

RETRIEVE THE CODE POINTS OF CHARACTERS

To retrieve the code point of a character in javascript, I will make use of the string method codePointAt() on the string.

//uppercase A
console.log("A".codePointAt())
//65

//lowercase a
console.log("a".codePointAt())
//97

So you can see that an uppercase letter comes before a lowercase letter because of its code point in the character set.

Now let us try what we have learned so far on an array.

SORTING AN ARRAY

Recall that we talked about the sort method and the logic that we would use in its callback function to make it sort our array.

In my first example, I will sort the array in ascending order, and I will use the logic ( a > b ) in its callback function

//sort in ascending order
["a", "C", "b", "A", "c", "B"].sort( (a, b) => {
    return (a > b)
})

//Array(6) [ "A", "B", "C", "a", "b", "c" ]

So you can see that the array got sorted by arranging the uppercase letters first before the lowercase letters in ascending order.

In my second example, I will sort the array in descending order using the logic ( b > a ) in its callback function

//sort in descending order
["a", "C", "b", "A", "c", "B"].sort( (a, b) => {
    return (b > a)
})

//Array(6) [ "c", "b", "a", "C", "B", "A" ]

You can see that the array got sorted by arranging the lowercase letters first before the uppercase letters in descending order.

With my explanation, we can even sort an array containing the names of people in ascending order and it will sort it just fine

//sort in ascending order
["john", "jane", "jade", "joseph"].sort( (a, b) => {
    return (a  > b)
}) 

//Array(4) [ "jade", "jane", "john", "joseph" ]

It works by summing up the code points of each character in the string and then arranging them in ascending order.

This will give you a better view of what the computer does under the hood.

The code below calculates the sum of the code points of each character in an element of the array

let output = []

//function to calculate code point values 
const calcCodePoint = (val) => {
    //store the total code point number of a string
    let totalCodePoint = 0
    //get the code point total of the string
    val.split('').forEach( (el) => totalCodePoint+=el.charCodeAt())
    //add result to the array
    return output.push(totalCodePoint)
}

//loop through the array and calculate their code point values
["john", "jane", "jade", "joseph"].forEach(calcCodePoint)

//sort the result
output.sort( (a, b) => {
    return (a - b)
}) 

//Array(4) [ 404, 414, 431, 649 ]

So you can see that the element with a total code point of 404 (jade) was arranged first and the element with a total code point of 649 (joseph) was arranged last and this is how our array actually gets sorted. 😎

I hope you understand now.

MAKE NO MISTAKES

If you are trying to sort an array of strings containing letters, make sure that you have converted them to lowercase already using the string method toLowerCase() before sorting them.

Sorting an array like this will probably make you feel like the sort function is useless, but it isn't!

Take note of the capitalization in "John", "Jane", and "jOseph".

//sort in ascending order
["John", "Jane", "jade", "jOseph"].sort( (a, b) => {
    return (a  > b)
})
//Array(4) [ "Jane", "John", "jOseph", "jade" ]

It's a computer and it was programmed to calculate the code points of characters based on the character set before acting on it!

Also, do not try to sort an array containing strings and numbers because the result wouldn't be what you expect to see 😅

//sort in ascending order
["1", "3", "a", "4", "2", 5].sort( (a, b) => {
    return (a > b)
})
//Array(6) [ "1", "2", "3", "4", "a", 5 ]

//sort in ascending order
[1, 2, "a", "4", "2", "80", "9"].sort( (a, b) => {
    return (a > b)
})
//Array(7) [ 1, 2, "2", "4", "80", "9", "a" ]

Mozilla Docs have an explanation for this;

In a numeric sort, 9 comes before 80, but because numbers are converted to strings, "80" comes before "9" in the Unicode order

So do not blame your computer or the JS Engine because you now have a clear understanding of characters and their code point numbers now and how they are sorted.

WHAT ABOUT NUMBERS?

Well, numbers are not left out because you can sort them either in ascending or descending order and this brings to notice that the sort method converts the elements of the array to strings before acting on it and the reason why it is converted to a string is to get its code point number.

If I have the scores of students in my class in an array, I will sort them in ascending order like this;

//sort in ascending order
[344,500,222,132,90,50].sort( (a, b) => {
    return (a > b)
})

//or
[344,500,222,132,90,50].sort( (a, b) => {
    return (a - b)
})

//Array(6) [ 50, 90, 132, 222, 344, 500 ]

The same goes for strings of numbers.

Because an array might contain strings of numbers, we will use the logic (a - b) to sort the array in ascending order, and if we wanted to sort the array in descending order, we will use the logic(b - a).

This is the recommended way to sort an array containing numbers or strings of numbers.

Take a look at the difference below;

//❌ not recommended 👇

//sort in ascending order
["344",500, "222",132, "90", "50"].sort( (a, b) => {
    return (a > b)
})
//Array(6) [ 132, "222", "344", "50", "90", 500 ]

// ✅ recommended 👇

//sort in ascending order
["344",500, "222",132, "90", "50"].sort( (a, b) => {
    return (a - b)
})
//Array(6) [ "50", "90", 132, "222", "344", 500 ]

I hope you have learned something spectacular today.

It is recommended to use the logic (a > b) on strings depending on the order in which you want your results to appear and the logic (a - b) on numbers or strings of numbers depending on the order in which you want your results to appear.

Visit this link to Mozilla docs if you want to learn more about the sort method in JavaScript.

IT'S FUN TIME

I have seen a lot of debate regarding this question.

"The chicken and the egg, which came first?" 😅

Well, I guess computer programmers gave us their opinion regarding this.

If I am to retrieve the Unicode code point of the emojis of an egg and chicken, this is the number I see

//code point of egg
console.log( "🥚".codePointAt() )
//129370

//code point of chicken
console.log( "🐥".codePointAt() )
//128037

Looking at the result above, you might have guessed that the chicken came before the egg, and if I am to sort an array containing just these 2 elements, this will be the result.

//sort in ascending order
["🥚", "🐥"].sort( (a, b) => {
    return (a > b)
}) 
//Array [ "🐥", "🥚" ]

Well, as for me, I believe that the chicken came before the egg.

CONCLUSION

We have talked about the code point of characters and how every character on your keyboard has a code point in the character set of your computer.

We have also talked about how the sort() method works and the logic that it uses to be able to arrange array elements depending on our logic.

I also showed you some of the mistakes you should avoid making when trying to sort an array and lastly, the recommended way to sort an array of strings and an array of numbers.

I hope you understood this article

EXTRA

I built and launched a validation library that you can use to validate your forms both client-side and server-side using validation rules, sophisticated regular expressions, and form input attributes

It's available for ReactJS, NodeJs, PHP, and Native Js.

Here is a link to the repository of the library

Octavalidate | Getting Started

Octavalidate: A feature-rich easy-to-use form validation library for your project

octagon-simon.github.io

I am open to both web development, and technical writing roles.

Thank you for reading.

Image credit: Mohammad Rahmani on Unsplash

How To Implement A Password Reset Feature In Your NodeJS Application

Simon Ugorji — Tue, 25 Oct 2022 20:02:03 +0000

In my article today, I will show you how you can implement a fully functional password reset feature in your NodeJS application.

GETTING STARTED

THE CRYPTO MODULE

We will be using the built-in node module crypto to generate a hash for the password reset link. If this module does not come with your node version, use the command below to install it.

$ npm i crypto

If you have installed the module / verified that the module exists already, we may proceed with the next step

THE MODEL FILE

Head over to the user model and add the methods below to the schema object.

//generate password reset hash
userSchema.methods.generatePasswordResetHash = function(){
    //create hash object, then create a sha512 hash of the user's current password 
    //and return hash
    const resetHash = crypto.createHash('sha512').update(this.password).digest('hex')
    return resetHash;
}

//verify password reset hash
userSchema.methods.verifyPasswordResetHash = function(resetHash = undefined){
    //regenerate hash and check if they are equal
    return this.passwordResetHash() === resetHash;
}

THE FIRST METHOD

This method generatePasswordResetHash() will generate and return a sha512 hash using the user's current password.

If in your database, the user's password is hashed already, you must modify the method to use the hashed password instead.

So you will do something like this

//generate password reset hash
userSchema.methods.generatePasswordResetHash = function(){
    //create hash object, 
    //then create a sha512 hash of the user's hashed password 
    //and then return hash
    const resetHash = crypto.createHash('sha512').update(this.hash).digest('hex')
    return resetHash;
}

So if you want to use this method, create a new instance of the model and then pass in the user's document as an argument so that it will extract the user's hashed password or the user's password (if you stored it in plain text)

THE SECOND METHOD

This method verifyPasswordResetHash() will regenerate the hash again and then compare it against the submitted hash from the URL.

Now you need to set up the HTML pages needed for this feature. If you have one set up already, you may skip the step below.

THE HTML TEMPLATES

reset.html

This HTML page will have a form that will send the password reset link to the user.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reset Your Password</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <!-- MDB -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.css" rel="stylesheet" />

    <style>
        .body{
            font-family: "Roboto", sans-serif;
        }
        .container{
            box-shadow: 0px 0px 8px #ddd
        }
    </style>
</head>

<body>
    <section class="container p-4 mt-5" style="max-width:500px">
        <h4 class="text-center mb-4">RESET YOUR PASSWORD</h4>
        <form method="post" action="/reset" style="max-width:500px;">
            <div class="mb-3">
                <label class="form-label">Email Address</label>
                <input type="email" name="email" class="form-control" placeholder="simon@webdev.com">
            </div>
            <div class="mb-3">
                <button type="submit" class="btn btn-primary">Send Reset Link</button>
            </div>
        </form>
    </section>
</body>

</html>

new_pass.html

This HTML page will have a form that will enable the user to enter new password.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enter New Password</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <!-- MDB -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.css" rel="stylesheet" />

    <style>
        .body{
            font-family: "Roboto", sans-serif;
        }
        .container{
            box-shadow: 0px 0px 8px #ddd
        }
    </style>
</head>

<body>
    <section class="container p-4 mt-5" style="max-width:500px">
        <h4 class="text-center mb-4">ENTER NEW PASSWORD</h4>
        <form method="post" action="/reset-pass" style="max-width:500px;">
            <div class="mb-3">
                <label class="form-label">New password</label>
                <input type="password" name="pass" class="form-control" placeholder="*****">
            </div>
            <div class="mb-3">
                <label class="form-label">Re-enter password</label>
                <input type="password" name="conpass" class="form-control" placeholder="*****">
            </div>
            <div class="mb-3">
                <button type="submit" class="btn btn-success">Reset</button>
            </div>
        </form>
    </section>
</body>

</html>

So this is an example of a password reset request form

Now here is the logic 😃

When a user enters his email address and requests for a password reset link, the system will check if the email address exists.

If the email address exists, the application should generate a hash using the user's current password or the user's hashed password if the password is hashed before they are saved, then I will attach this hash with the user's email address to the password reset link

But if the email address does not exist, the application should respond with the message "Email address does not exist".

Now, when the user opens the password reset link in a browser, we will extract the user's email address and the hash from the URL. Then we will check again if the email address exists and if the hash is valid.

If the hash is valid, we will then issue a password reset form.

THE SERVER FILE

Now let us create a POST route that will generate a password reset link and send to the user's email address.

In our password reset link, we will attach an Identifier that will help us to identify the particular user that is requesting for a password reset. Our Identifier in this case is the user's email address, and when we generate a password reset link for the user, it will look like the format below;

localhost:5000/reset?email=me@you.com&hash=122JNn2bi333

Getting interesting right?

Let's code it

In your server file, add the code below

app.post('/reset', async (req, res) => {
    try{
        //find a document with such email address
        const user = await User.findOne({email : req.body.email})
        //check if user object is not empty
        if(user){
            //generate hash
            const hash = new User(user).generatePasswordResetHash()
            //generate a password reset link
            const resetLink = `http://localhost:5000/reset?email=${user.email}?&hash=${hash}`
            //return reset link
            return res.status(200).json({
                resetLink
            })
            //remember to send a mail to the user
        }else{
            //respond with an invalid email
            return res.status(400).json({
                message : "Email Address is invalid"
            })
        } 
    }catch(err){
        console.log(err)
        return res.status(500).json({
            message : "Internal server error"
        })
    }
})

This is the result of the code above, when I submit my email address for a password reset link

At this stage, you only need to send a mail to the user's email address with the password reset link.

A LITTLE EXPLANATION

Let's talk about the code above.

Remember that we added 2 schema methods in our model file.

The first method generatePasswordResetHash() used above, generates a hash with the user's current password using the sha512 algorithm and this hash will be included in our password reset link.

So what I basically did, was to create a new instance of the model and I passed in the user's document as an argument so that the method generatePasswordResetHash() can take in the password directly when it is invoked.

WHAT HAPPENS NEXT?

Now, what happens when the user clicks on the reset link?

That's a good question.

We need to set up / modify the already existing GET route for /reset.

Recall that this route serves a form that requests an email address from the user for the password reset link to be sent to.

We will check if the URL has a query that contains the email address & the hash, then we will extract them. This means that the URL must be in the format localhost:5000/reset?email=me@you.org&hash=aws5e5c44

//reset route
app.get('/reset', async (req, res) => {
    try {
        //check for email and hash in query parameter
        if (req.query && req.query.email && req.query.hash) {
            //find user with suh email address
            const user = await User.findOne({ email: req.query.email })
            //check if user object is not empty
            if (user) {
                //now check if hash is valid
                if (new User(user).verifyPasswordResetHash(req.query.hash)) {
                    //save email to session
                    req.session.email = req.query.email;
                    //issue a password reset form
                    return res.sendFile(__dirname + '/views/new_pass.html')
                } else {
                    return res.status(400).json({
                        message: "You have provided an invalid reset link"
                    })
                }
            } else {
                return res.status(400).json({
                    message: "You have provided an invalid reset link"
                })
            }
        } else {
            //if there are no query parameters, serve the normal request form
            return res.sendFile(__dirname + '/views/reset.html')
        }
    } catch (err) {
        console.log(err)
        return res.status(500).json({
            message: "Internal server error"
        })
    }
})

A LITTLE EXPLANATION

Let's talk about the code above.

Recall again that we added 2 schema methods in our model file.

The second method verifyPasswordResetHash() used above, regenerates the hash with the user's current password, then compares this hash with the one from the URL. It returns true if they are equal or false if they are not.

So what I basically did was to create a new instance of the model and pass in the current user's document as an argument, then I invoked the method verifyPasswordResetHash() and passed in the hash from the URL as an argument, for the method to regenerate a hash and compare to see if they are equal.

What happens if they are equal?

It means that the user truly requested for a password reset and what we need to do now is to save the user's email address in the session and issue a password reset form.

So this is a sample page that will be rendered when the hash is valid

All you have to do now is;

Create a new route that will read the form data
Compare the two passwords
Then update the user's password using his email address stored in the session

After the user must have updated his password, the password reset link will become invalid because the hash will no longer be the same.

EXTRA

I published an e-book that will help you understand how to perform CRUD operations in MongoDB Using NodeJS And Express. If you are a fan of my articles and you love how I write, I am sure that you will love this e-book too.

Use the link below to get $5 off your purchase.

CRUD OPERATIONS IN MONGO DB USING NODEJS AND EXPRESS FRAMEWORK

In this book, we take you on a hands-on and pragmatic journey to learning how you can perform CRUD operations with Mongo DB using NodeJS and Express framework.In the course of this book, we will cover;The definition of CRUDSetting up the required files and foldersInstalling MongoDBBasic terminologies that you have to understandConnecting to the databaseSetting up the AppThe definition of a ModelThe various methods that can be used for CRUD operationsSome things you should be aware ofThe knowledge panelSummaryExtra tips and reposThe goal of this book is to teach you about the various methods that can be used to perform CRUD operations to Mongo DB in a Node JS environment.

simonugorji.gumroad.com

Here is a Github repository implementing a basic password reset feature in NodeJS. Check it out and modify it to suit your project.

Thank you for reading

Image Credit: Freepik

How To Use Embedded JavaScript (EJS) As A Template Engine In NodeJs - Full Explanation

Simon Ugorji — Tue, 20 Sep 2022 04:40:16 +0000

Before we begin, let us understand what a Template Engine is.

A template engine is a mechanism that enables you to use static template files in your application.
It replaces the variables inside a web template file with actual values(at runtime), then transforms the template into an HTML file that is sent to the client with the dynamic data.

So we can say that it helps us to create Dynamic HTML content!

In this article, I will show you how to use EJS as a templating engine for your node app. I will also use the CDN links of MDB for bootstrap as our CSS framework.

INSTALLING EXPRESS & EJS

In order to begin, create a folder (name it whatever you want) then create an index.js file.

Now you need to install express through the terminal.



$ npm install express

Once express has been installed, install ejs which is our templating engine



$ npm install ejs

Now your folder structure should look like the image below

SETTING UP YOUR APP

We need to import express & ejs and then configure our app to use express functions.

In your index.js file, type in the code below.



//import express
const express = require('express')
//import ejs
const ejs = require('ejs')
//load express
const app = express()
//set port number
const port = 5000

Now we need to create a pages folder that will store our HTML pages. This folder will have a sub-folder called layouts which will store sub-sections of our HTML page eg the navbar, and the footer.

Once you've created the pages folder, create a file and name it home.ejs. This file will be the template for our homepage.

Now we need to tell express to use ejs as our templating engine (view engine) and since our views directory is going to be different, we will tell express to use the ./pages folder as our views directory.

The views directory is the directory where all your template files are stored



//tell express to use ejs as our template/view engine
app.set('view engine', 'ejs')
//tell express to use pages as our views directory
app.set('views', './pages')

Let us create a simple HTML page that will welcome us to the homepage of our app.

Copy the HTML below and paste it into pages/home.ejs file which is the template for our homepage



<!Doctype html>
<html>
    <head>     
    </head>
    <body>
        <header>
        </header>
        <main>
            <h1 style="text-align:center">Welcome</h1>
        </main>
    </body>
    <footer>
    </footer>
</html>

CREATING A ROUTE

In the index.js file, we will create a route to the homepage and render the HTML template responsible for the homepage.

I will use the render method to render the template responsible for the homepage.

This method takes in 2 arguments, which are;

The file name of the HTML page we are trying to render
The data we wish to send to that page

Make sure that the file that you're trying to render exists in the views directory which is the /pages folder

Since I want to render the file home.ejs as the homepage when the user navigates to the root of our website, I will do something like this



//route to homepage
app.get( '/', (req, res) => {
    //render the template for the homepage
    res.render('home');
})

Notice that we didn't provide the extension of the home.ejs file inside the render method.

Now before we fire up our app, we need to make it listen on the port number provided.



//listen on the port number
app.listen( port, () => {
    console.log("App is live")
})

So here's the full code of index.js



//import express
const express = require('express')
//import ejs
const ejs = require('ejs')
//load express
const app = express()
//set port number
const port = 5000
//tell express to use ejs as our template/view engine
app.set('view engine', 'ejs')
//tell express to use pages as our views directory
app.set('views', './pages')
//route to homepage
app.get( '/', (req, res) => {
    //render the template for the homepage
    res.render('home');
})
//listen on the port number
app.listen(port, () =>{
    console.log("App is live")
})

FIRING UP YOUR APP

Using the terminal, start up your app



$ node index.js

Then visit this URL on your browser localhost:5000

If you followed the steps correctly, you should see the welcome page

If you've gotten to this point, here's a round of applause because you're about to understand how ejs works

CREATING PAGE LAYOUTS

Now we need to create 3 layouts for all pages. These layouts will exist in different files within the ./pages/layouts/ directory

So, within this directory ./pages/layouts/, create a head.ejs file and add the code below.



<!-- Font Awesome -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
  rel="stylesheet"
/>
<!-- Google Fonts -->
<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
  rel="stylesheet"
/>
<!-- MDB -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.css"
  rel="stylesheet"
/>

Merely looking at the code above, you should know that it is the content that goes inside the head tag of a webpage

Still within the ./pages/layouts/ directory, create a navbar.ejs file and add the code below.



<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- Container wrapper -->
    <div class="container-fluid">
        <!-- Toggle button -->
        <button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
            data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
            aria-label="Toggle navigation">
            <i class="fas fa-bars"></i>
        </button>

        <!-- Collapsible wrapper -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <!-- Navbar brand -->
            <a class="navbar-brand mt-2 mt-lg-0" href="#">
                <img src="https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp" height="15" alt="MDB Logo"
                    loading="lazy" />
            </a>
            <!-- Left links -->
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/fruits">Fruits</a>
                </li>
            </ul>
            <!-- Left links -->
        </div>
        <!-- Collapsible wrapper -->
    </div>
    <!-- Container wrapper -->
</nav>
<!-- Navbar -->

Lastly, create a footer.ejs file still in the same directory, then add the code below.



<!-- Footer -->
<footer class="bg-light text-center ">
  <!-- Grid container -->
  <div class="container p-4">
    <!-- Section: Text -->
    <section class="mb-4">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt
        distinctio earum repellat quaerat voluptatibus placeat nam,
        commodi optio pariatur est quia magnam eum harum corrupti dicta,
        aliquam sequi voluptate quas.
      </p>
    </section>
    <!-- Section: Text -->
  </div>
  <!-- Grid container -->
  <!-- Copyright -->
  <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
    © 2020 Copyright:
    <a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
  </div>
  <!-- Copyright -->
</footer>
<!-- Footer -->

At the moment, our home page, which is the home.ejs file is unattractive.

Let us include the layouts; head, navbar, and footer using ejs.

To include a layout on a page, place the code below wherever you want the layout to render



<%- include('PATH_TO_LAYOUT') %>

This means that wherever you placed the code, it is going to import the specified layout and render it there.

This also means that whatever changes you make to a layout will affect any page that included it.

So in the home.ejs file, I will do something like this



<!Doctype html>
<html>
    <head>
        <%- include('./layouts/head') %>
    </head>
    <body>
        <header>
            <%- include('./layouts/navbar') %>
        </header>
        <main>
            <h1 class="text-primary mt-5 text-center">Welcome</h1>
        </main>
    </body>
    <footer>
        <%- include('./layouts/footer') %>
    </footer>
</html>

To make sure that we are on the same page, this is my folder structure.

Now let us reload our browser and check the progress so far

You can testify that with minimal code, we were still able to generate a full home page.

Let's keep going!

WRITING DYNAMIC HTML

Now we are ready to send data from the backend to the frontend.

Let us create a route that renders a fruits page. This page will also receive the fruits to display from the backend.

Recall that the render method takes in 2 arguments, which are;

The file name of the HTML page we are trying to render
The data we wish to send to that page

So in my case, I wish to send an array of fruits as the data to the page.



//route to fruits
app.get( '/fruits', (req, res) => {
    //our fruits array
    const fruitsAry = ['apple', 'mango', 'guava', 'banana', 'pineapple']
    //render the template for the fruits page & send data as json
    res.render('fruits', {fruitsAry});
})

Now create a new fruits.ejs template within ./pages/ directory then add the code below



<!Doctype html>
<html>

<head>
    <%- include('./layouts/head') %>
</head>

<body>
    <header>
        <%- include('./layouts/navbar') %>
    </header>
    <main class="mt-5">
        <div class="m-auto p-3" style="max-width:700px;box-shadow:0px 0px 8px #ddd">
            <h1 class="text-primary mt-5 text-center">Welcome To Fruits Page</h1>
            <h5 class="text-center">I have <span class="text-danger">
                    <%= fruitsAry.length %>
                </span> favourite fruits and they are listed below.</h5>
            <ol>
                <% for(let i=0; i < fruitsAry.length; i++){ %>
                    <li>
                        <%= fruitsAry[i] %>
                    </li>
                    <% } %>
            </ol>
        </div>

    </main>
</body>
<footer>
    <%- include('./layouts/footer') %>
</footer>

</html>

TIME FOR AN EXPLANATION

If you look at the snippet above, you will notice that this code <%= fruitsAry.length %> is similar to the one used to include a layout.

Except that this one allows us to directly access & print out the rendered data.

So I have a little syntax below to demonstrate how it works.

If you want to execute a code or access rendered data without printing it out, do something like this



<% CODE_TO_EXECUTE %>

However, If you want to execute a code or access rendered data & and print it out, do something like this



<%= CODE_TO_EXECUTE %>
//or
<%- CODE_TO_EXECUTE %>

Don't forget the syntax to include a layout on a page



<%- include("PATH_TO_LAYOUT") %>

So with this one <% for(let i=0; i < fruitsAry.length; i++){ ... }%>, we were able to embed a JavaScript code (that's why it is called Embedded JavaScript right?) that loops through the fruits array sent from the backend using a for loop, then creates a list item for each fruit in the array.

Restart your server, then visit this URL on your browser localhost:5000/fruits

Amazing... right?

LET'S WRITE A CONDITIONAL STATEMENT

Just like I explained above concerning embedding JavaScript directly into your template file, it is also possible to write conditional statements within this file.

Say, for example, I have a variable loggedIn that checks if a user is logged in to our app or not, i.e. if the user is logged in, the value of this variable will be true and if the user is not logged in, the value will be false.

Now I want to use this variable to conditionally display 1 out of 2 links on my navbar which are login and logout. If the user is not logged in, you will see login on the navbar and if the user is logged in, you will see logout instead.

In the ./layouts/navbar file, add the code below right after the nav-item for fruits



<% if(loggedIn === true) { %>
    <li class="nav-item">
        <a class="nav-link text-danger" href="/logout">Logout</a>
    </li>
<% }else{ %>            
    <li class="nav-item">
        <a class="nav-link text-success" href="/login">Login</a>
    </li>
<% } %>

Now we need to modify our server file ./index.js and add the variable loggedIn to the global space so that it can be accessed by all pages in our app.

Just before the route to the homepage, add this code



//make variable globally accessible
global.loggedIn = false //default value is false

Now let us create routes for the login and logout pages. If you click on login, it will set the global variable to true and if you click on logout, it will set the global variable to false

Just after the route to the fruits page, add this code



//route to login
app.get('/login', (req, res) => {
    //user is logged in
    loggedIn = true
    //redirect to homepage
    return res.redirect('/')
})
//route to logout
app.get('/logout', (req, res) => {
    //user is logged in
    loggedIn = false
    //redirect to homepage
    return res.redirect('/')
})

Now let us reload our server and test it out.

This is what happens on my navbar when I click on the login link

You will see the logout link on the navbar instead of login

Now let us click on the logout link

Bravo! There's the login link.

CONCLUSION

We have covered so much detail in this article. Here's a recap of what we did so far

Before you can use ejs templating engine in your app, you must tell express to use it as your view engine.
If you have a different views directory, tell express to use it, then make sure it contains your templates
Use layouts to store sections of a page that will be needed by other pages. Eg the navbar, the footer, etc
The render method takes in 2 arguments.
- The first one is the template you're trying to render
- The second one is the data you want to send to that template. This data must be passed as an object
You start embedding javascript in your template using the syntax <% ... %>
To include a layout in a page, you must specify the path to the layout file using the syntax <%- include('PATH_TO_LAYOUT_FILE') %>
To access & print data sent from the backend, use the syntax <%= THE_OBJECT_KEY %> or <%- THE_OBJECT_KEY %> where the_object_key is the key sent from res.render( 'SOME_TEMPLATE', { KEY : VALUE } )

That's all for now. If you want the source code of this article, visit my GitHub repo below.

Octagon-simon / ejs-class

Learn how to use embedded javascript (ejs) as a templating engine for your app

HOW TO USE

Clone or download the repository.

Install dependencies through the terminal

$ npm i

Fire up the server

$ node index.js

Visit this URL in your browser localhost:5000

READ THE ARTICLE

Read the article on Medium
Read the article on Hashnode
Read the article on Tealfeed
Read the article on Devto

SUPPORT ME

Donate with PayPal

View on GitHub

If you have any questions, suggestions, or contributions, feel free to drop a comment below and I will attend to it.

Did you enjoy the article? Consider giving me a tip 😁

Thank you for reading.

Image credit: Joan Gamell on Unsplash

How To Create A Simple Word Unscrambler With JavaScript

Simon Ugorji — Wed, 24 Aug 2022 06:35:00 +0000

Assuming you've been given a long set of letters that appears to be a scrambled word and you're asked to unscramble it, how would you unscramble the word?

Today, I will show you how you can build a function that will help you to unscramble any word as long as the word exists in our dictionary.

GETTING STARTED

We need to set up our project by installing a very nice dictionary that will be used to filter the words.

On your local server,

Install the npm package "an-array-of-english-words"

$ npm install an-array-of-english-words

Or download it from Github

words / an-array-of-english-words

List of ~275,000 English words

`an-array-of-english-words`

List of ~275,000 English words Derived from the Letterpress word list.

Install

npm:

npm install an-array-of-english-words

Use

var words = require('an-array-of-english-words')
console.log(words.filter(d => /fun/.test(d)))

Yields:

[
  'antifungal',
  'antifungals',
  'bifunctional',
  'cofunction',
  'cofunctions',
  // …and many more
]

API

`anArrayOfEnglishWords`

Array.<string> — List of all English words, lowercased.

CLI

Install the CLI globally:

npm i -g an-array-of-english-words

Now run words to print all the words to stdout:

words

Use grep to filter by pattern:

words | grep cheese

Use egrep to filter with regular expressions:

words | egrep '^fun'            # start with 'fun'
words | egrep 'ification$'      # end with 'ification'
words | egrep 'ou?r$'           # end in 'or' or 'our'

Use wc to find out how many…

View on GitHub

BUILDING OUR FUNCTION

Now that we have our dictionary installed, we need to build a function that will help us unscramble a word, making use of the words in our dictionary.

This function will have just one parameter which is the word to unscramble.

function unscramble(word){
  /* This function unscrambles a word
  * @word: This is the word to unscramble 
  */
}

IMPORTING OUR DICTIONARY

Now we need to import our dictionary into the function, to help us filter the words based on our logic.

function unscramble(word) {
    //import dictionary
    const dict = require('an-array-of-english-words');
}

If the require statement isn’t allowed in your development environment, you have to import the dictionary and work with it as a module.

FILTERING THROUGH THE DICTIONARY

This is the most important section of our function. In this section, I will write very simple logic to filter through the dictionary and return the word(s) that we are looking for.

I will use Array.filter() on the dictionary, and the first step is to check if the length of the word we are trying to unscramble is equal to the length of the current item in the dictionary. This will save us a huge amount of time and memory as well as make our logic neater.

function unscramble(word) {
    //import dictionary
    const dict = require('an-array-of-english-words');
    //return the result of our logic
    return(
        dict.filter( item => {
            //check if their lengths are equal
            if(item.length === word.length){
                //logic continuation here
            }
        })
    );
}

HANDLING A REOCCURRENCE

Because I don't know the word that you are trying to unscramble;

I will retrieve the current item in the dictionary
Convert it to an array using the split() method
Loop through the array
Then store the number of reoccurrences of each letter in a variable reOccurence1

I will do the same to the scrambled word provided but in a different variable reOccurence2.

function unscramble(word) {
    //import dictionary
    const dict = require('an-array-of-english-words');
    //return the result of our logic
    return(
        dict.filter( item => {
            //handle reoccurrences
            const reOccurrence1 = {}
            const reOccurrence2 = {}
            //check if their lengths are equal
            if(item.length === word.length){
                //convert the current item to array and loop through
                item.split('').forEach(letter => {
                    //store the number of reoccurrences of each letter
                    reOccurrence1[letter] = reOccurrence1[letter] + 1 || 1;
                })
                //convert word to array and loop through
                word.split('').forEach(letter => {
                    //store the number of reoccurrences of each letter
                    reOccurrence2[letter] = reOccurrence2[letter] + 1 || 1;
                })
            }
        })
    );
}

BREAKING IT DOWN

To make you understand the code above, take, for example, there's a word in the dictionary with the name "simon", and you're trying to unscramble the word "mnios".

If our function should execute up to the reoccurrence section, we will have exactly these two objects containing each of the letters and the number of times they are repeated.

Just by looking at the objects, you will notice that they are equal and this means that we have found a word that matches the scrambled letters.

UNSCRAMBLING THE WORD

Having understood how reoccurrences are stored and handled, we now have to loop through the first object and check if the number of reoccurrences of the letters is the same as the other object.

If they are the same, then without a doubt, the current item in the dictionary is the word that we are looking for.

I will create a variable that will serve as our counter. This counter will increase on every match found while looping through the object.

function unscramble(word) {
    //import dictionary
    const dict = require('an-array-of-english-words');
    //return the result of our logic
    return(
        dict.filter( item => {
            //handle reoccurrences
            const reOccurrence1 = {}
            const reOccurrence2 = {}
            //check if their lengths are equal
            if(item.length === word.length){
                //convert the current item to array and loop through
                item.split('').forEach(letter => {
                    //store the number of reoccurrences of each letter
                    reOccurrence1[letter] = reOccurrence1[letter] + 1 || 1;
                })
                //convert word to array and loop through
                word.split('').forEach(letter => {
                    //store the number of reoccurrences of each letter
                    reOccurrence2[letter] = reOccurrence2[letter] + 1 || 1;
                })
                //counter to increase on every match found
                let match = 0;
                for(let key in reOccurence1){
                    if(reOccurence1[key] === reOccurence2[key]){
                        match++;
                    }
                }
            }
        })
    );
}

Now if the counter is equal to the number of keys in the array, we will return the current item in the dictionary because that is the word that we are looking for.

Here's the full code

function unscramble(word) {
    //import dictionary
    const dict = require('an-array-of-english-words');
    //return the result of our logic
    return(
        dict.filter( item => {
            //handle reoccurrences
            const reOccurrence1 = {}
            const reOccurrence2 = {}
            //check if their lengths are equal
            if(item.length === word.length){
                //convert the current item to array and loop through
                item.split('').forEach(letter => {
                    //store the number of reoccurrences of each letter
                    reOccurrence1[letter] = reOccurrence1[letter] + 1 || 1;
                })
                //convert word to array and loop through
                word.split('').forEach(letter => {
                    //store the number of reoccurrences of each letter
                    reOccurrence2[letter] = reOccurrence2[letter] + 1 || 1;
                })
                //counter to increase on every match found
                let match = 0;
                for(let key in reOccurrence1){
                    if(reOccurrence1[key] === reOccurrence2[key]){
                        match++;
                    }
                }
                //return item
                return ( (Object.keys(reOccurrence1).length === match) ? item : false );
            }
            return;
        })
    );
}

TESTING OUR FUNCTION

Assuming I have these letters "izrbera", and I want to unscramble it. This is how I will call the function

console.log( unscramble("izrbera") );

This is the result

bizarre
brazier

This function returns an array containing the words that match the scrambled letters, or an empty array if no words were found.

You've reached the end of my article/.

Check out a live demo of this function here

octagon-simon.github.io

Check out the NPM package here

word-unscrambler - npm

This package helps to unscramble any word as long as the word exists in the dictionary. Latest version: 1.0.2, last published: 11 hours ago. Start using word-unscrambler in your project by running `npm i word-unscrambler`. There are no other projects in the npm registry using word-unscrambler.

npmjs.com

Image Credit: Brett Jordan on Unsplash

Thank you for reading.

How To Validate Your Forms Server-Side With Octavalidate-PHP

Simon Ugorji — Fri, 29 Jul 2022 04:30:32 +0000

Form validation is very important to prevent unwanted/malformed data from being stored in your database.

One wrong input from a user can affect the whole records in a database, so it is necessary to validate all form inputs before they are stored in a database.

Recently, I built a Library that helps to validate your forms server-side with PHP, and in this tutorial, I will show you how to use it in your project.

DEMO FILE

I will work with a demo PHP file that submits the form post data to itself.

Here's my demo file

<html>

<body>
    <form id="form_demo" method="post" novalidate>
        <label>Username</label><br>
        <input name="username" type="text" id="inp_uname"> <br>
        <label>Email</label><br>
        <input name="email" type="email" id="inp_email"> <br>
        <label>Age</label><br>
        <input name="age" type="number" id="inp_age"> <br>
        <label>Password</label><br>
        <input name="password" type="password" id="inp_pass"> <br><br>
        <button type="submit">Run Test</button>
    </form>
</body>

</html>

This is what the form looks like

IMPORTING THE LIBRARY

We have to download and import the validation library to our project in order to begin validation on the form.

Visit the GitHub repository and download the library

Octagon-simon / octaValidate-PHP

This PHP Library helps to validate your forms using regular expressions & validation rules.

octaValidate-PHP V2.0

This is a feature-rich Library that helps to validate your forms server-side using sophisticated regular expressions, PHP's inbuilt validation, and validation rules.

We have included a demo folder containing some forms with validation rules applied to each of them. Open any of the files in your local server and submit the form.

This Library also helps to validate your frontend forms using JavaScript. Visit the repository

OTHER RELEASES

Octavalidate - JS

Use the JavaScript release of this library to validate your frontend forms.

Visit the repository

Octavalidate - NodeJS

Use the NodeJS release of this library to validate your forms server-side.

Visit the repository

DOCUMENTATION

Visit the DOCUMENTATION to learn more about this GREAT Library, and play with the forms there!

INSTALL

COMPOSER

$ composer require simon-ugorji/octavalidate-php

LOCAL

Download and import the latest release to your project.
In your project, use the require keyword & include the file…

View on GitHub

After downloading the library, this is how I will import the library to the project

//include the validation file
require 'octaValidate-php/src/Validate.php';
use Validate\octaValidate;
//create new instance of the class
$DemoForm = new octaValidate('form_demo');

Now we are ready to begin validation on the form.

DEFINING VALIDATION RULES

In order to begin validation, we need to;

Define validation rules for the form.
Invoke the validateFields() method and pass in the rules as the first argument and then the form fields as the second argument

On this page, you will see a list of inbuilt validation rules, that can be used on your forms.

Here's the syntax to define validation rules for a form

//syntax for defining validation rules
$valRules = array(
  "FORM_INPUT_NAME" => array(
    ["RULE_TITLE", "CUSTOM_ERROR_MESSAGE"]
  )
);

So for the form inputs above, I want them to have these rules

Username
- R (required)
Email
- R (required)
- EMAIL (Checks if the value is a valid email address)
Age
- R (required)
- DIGITS (Checks if the value is a valid digit)
Password
- R (required)

This is how I will define the rules

//define validation rules
$valRules = array(
    "username" => array(
        ["R", "Your username is required"]
    ),
    "email" => array(
        ["R", "Your Email is required"],
        ["EMAIL", "Your Email is invalid"]
    ),
    "age" => array(
        ["R", "Your Age is required"],
        ["DIGITS", "Your Age must be in digits"]
    ),
    "password" => array(
        ["R", "Your Password is required"]
    )
);

INVOKING THE VALIDATE FIELDS METHOD

Now that we have defined the rules, we need to invoke the validateFields() method and pass in the rules as the first argument and then the form fields as the second argument.

The form fields can be the $_POST or $_GET array. It defaults to the $_POST array if no value is provided.

With this, you can choose to validate data coming from the $_POST array or from the $_GET array, or even from the $_REQUEST array.

The validateFields() method returns boolean

true means there are no validation errors

If there are no validation errors, you are free to process the form data and probably store the data in a database

false means there are validation errors

If there are validation errors, we need to return the errors back to the user by invoking the getErrors() method.

While returning the errors back to the user, you need to have a JavaScript function that will append the errors into the form since it is a server-side library. Luckily for us, the library comes with a helper script that is available in /frontend/helper.js.

The helper script contains 2 functions which are;

showErrors(errorObject)

Pass in the error object to this function for the function to append the errors into the form.

removeErrors(formId)

Pass in a form ID to this function for the function to remove any errors present within the form.

You don't need to call the removeErrors() function if your form is submitted to the page itself or to another PHP script, because the page will reload on every submit. However, it is necessary that you call the function if you're using Ajax to process form submission.

Locate this script and include the functions there in your project.

So this is how I will handle the result of the validateFields() method

//begin validation
if ( $DemoForm->validateFields($valRules, $_POST) === true ){
    //process form data here
}else{
    //retrieve & display errors
    print('<script>
        window.addEventListener(\'load\', function(){
            showErrors(' . $DemoForm->getErrors() . ');
        })
    </script>');
}

Here's the full code of the demo page

<?php
//require library
require 'octaValidate-php/src/Validate.php';
use Validate\octaValidate;
//create new instance of the class
$DemoForm = new octaValidate('form_demo');

//define validation rules
$valRules = array(
    "username" => array(
        ["R", "Your username is required"]
    ),
    "email" => array(
        ["R", "Your Email is required"],
        ["EMAIL", "Your Email is invalid"]
    ),
    "age" => array(
        ["R", "Your Age is required"],
        ["DIGITS", "Your Age must be in digits"]
    ),
    "password" => array(
        ["R", "Your Password is required"]
    )
);

if ($_POST) {
    //begin validation    
    if ( $DemoForm->validateFields($valRules, $_POST) === true ) {
        //process form data here
        print('<script> alert("NO VALIDATION ERROR") </script>');    }
    else {
        //retrieve & display errors
        print('<script>
            window.addEventListener(\'load\', function(){
                showErrors(' . $DemoForm->getErrors() . ');
            })
        </script>');    
    }
}
?>
<html>

<body>
    <form id="form_demo" method="post" novalidate>
        <label>Username</label><br>
        <input name="username" type="text" id="inp_uname" value="<?php ($_POST && $_POST['username']) ? print($_POST['username']) : '' ?>"> <br>
        <label>Email</label><br>
        <input name="email" type="email" id="inp_email" value="<?php ($_POST && $_POST['email']) ? print($_POST['email']) : '' ?>"> <br>
        <label>Age</label><br>
        <input name="age" type="number" id="inp_age" value="<?php ($_POST && $_POST['age']) ? print($_POST['age']) : '' ?>"> <br>
        <label>Password</label><br>
        <input name="password" type="password" id="inp_pass" value="<?php ($_POST && $_POST['password']) ? print($_POST['password']) : '' ?>"> <br><br>
        <button type="submit">Run Test</button>
    </form>
    <script src="octaValidate-php/frontend/helper.js"></script>
</body>

</html>

Let us submit the form and check if all is working as expected, shall we? 🙂

When I hit the submit button, this is what I see

That is for the required rule which checks if values are submitted. Now let us enter random values for the inputs and hit the submit button again.

This is what I see

That is for the email rule which checks if a valid email was submitted.

Now, we have covered the basics. Let us define custom rules that will handle validations for username and password.

DEFINING CUSTOM RULES

Aside from the inbuilt validation rules, you have the power to define custom rules and the rules will be processed as if they were inbuilt rules.

To define a custom rule, you need;

The Rule Title,
The Regular Expression and
The Error Text

These are the 2 methods that can be used to define custom rules;

customRule()
moreCustomRules()

The first method allows us to define a single rule and the second method allows us to define multipe rules.

I will use the second method because it allows us to define multiple rules.

For the sake of this article, I will define simple rules that will allow the user to enter "simon" for the username field and "12345" for the password field.

//custom rules
$customRules = array(
    "UNAME" => ['/simon/', "You must enter simon"],
    "PASS" => ['/12345/', "You must enter 12345"]
);
//build the rules
$DemoForm->moreCustomRules($customRules);

Now let us place the code just before we define validation rules for the form, then we will provide only the rule title on the validation rules.

//custom rules
$customRules = array(
    "UNAME" => ['/simon/', "You must enter simon"],
    "PASS" => ['/12345/', "You must enter 12345"]
);
//build the rules
$DemoForm->moreCustomRules($customRules);

//redefine validation rules
$valRules = array(
    "username" => array(
        ["R", "Your username is required"],
        ["UNAME"]
    ),
    "email" => array(
        ["R", "Your Email is required"],
        ["EMAIL", "Your Email is invalid"]
    ),
    "age" => array(
        ["R", "Your Age is required"],
        ["DIGITS", "Your Age must be in digits"]
    ),
    "password" => array(
        ["R", "Your Password is required"],
        ["PASS"]
    )
);

Now let us submit the form again with random values.

From the image above, you can see that the error message that we defined alongside the rule, worked as expected.

ATTRIBUTE VALIDATION

For my last validation, I will show you how you can perform attribute validation.

Generally, all attribute validation allows you to provide a rule title eg "MAXSIZE", a value for the rule eg "5MB", and an error message eg "your file must not exceed 5MB"

All attributes validation follows the syntax below

//syntax
$valRules = array(
  "FORM_INPUT_NAME" => array(
    ["ATTRIBUTE_TITLE", "VALUE", "CUSTOM_ERROR_MESSAGE"]
  )
);

You can use this type of validation to validate; length, minlength, maxlength, size, minsize, maxsize, equalto, files, minfiles, maxfiles.

I will use the length validation on the Age form input because we want the user to provide just 2 digits.

So to add the length validation to the form's age validation rules, I will do something like this;

$valRules = array(
    "age" => array(
        ["LENGTH", "2", "Your age must be 2 digits"]
    )
);

Here are the validation rules for the demo page

//define validation rules
$valRules = array(
    "username" => array(
        ["R", "Your username is required"],
        ["UNAME"]
    ),
    "email" => array(
        ["R", "Your Email is required"],
        ["EMAIL", "Your Email is invalid"]
    ),
    "age" => array(
        ["R", "Your Age is required"],
        ["DIGITS", "Your Age must be in digits"],
        ["LENGTH", "2", "Your age must be 2 digits"]
    ),
    "password" => array(
        ["R", "Your Password is required"],
        ["PASS"]
    )
);

So let us enter random values and hit the submit button

You can see an error message telling us that our age must be 2 digits. Let us provide the correct values for all form inputs and submit the form again.

No validation error! So the library works perfectly 😎

DOCUMENTATION

There are more validations on the documentation page. Please visit the documentation below to learn more about this Library

octavalidate-PHP | Getting Started

octavalidate-PHP: This PHP Library helps to validate your forms server-side using validation rules, PHP's inbuilt validation, and sophisticated regular expressions.

octagon-simon.github.io

EXTRA

Do you want to use this library for front-end form validation? Visit the documentation below to learn how you can easily set up frontend validations on your HTML forms using Octavalidate-JS.

octavalidate | Getting Started

octaValidate: This JavaScript Library helps to validate your HTML forms using validation rules, sophisticated regular expressions and form input attributes

octagon-simon.github.io

Do you want to use this library for both front-end & back-end form validation? Visit the documentation page below to see how smooth front-end & back-end validation is with this library.

octavalidate-PHP | FRONTEND & BACKEND VALIDATION

octavalidate-PHP: Check out how we used both frontend & backend validation on this form

octagon-simon.github.io

Image credit: Ben Griffiths on Unsplash

That would be all for now,

Thank you.

File Validation Using The FileList API in JavaScript to

Simon Ugorji — Fri, 15 Jul 2022 16:01:23 +0000

The FileList API enables you to have full control over the user's selected file, and with this, you can perform file validation.

I will show you some of the things you could validate on a file using the FileList API.

Supposing I have a file input below,

<form novalidate>
    <input type="file" id="inp_file" accept=".png" multiple><br><br>
    <button type="submit">Upload</button>
<form>

When I reload my HTML page and select some images, this is how I will retrieve the selected files as an object.

//retrieve file input element
const fileInp = document.querySelector('#inp_file');
//retrieve file
const fileInpFiles = fileInp.files
//log result
console.log(fileInpFiles);

Here's the preview

You can see that the FileList is an object that has other properties within.

Within the FileList Object;

You can retrieve the number of files selected by the user through the length property.
You can get more information about the selected file using the numeric index 0...(length - 1)

From the image above, you can see that the length is 6 and this means that the user selected 6 files. So the files will take an index of 0 to (6 - 1) ie 0 to 5.

This is useful if you want to loop through each of the files selected by a user.

FileList API Object Properties

Now let us talk more about the properties contained within a selected File.

lastModified timestamp

This is the file's last modification date provided as a timestamp.

To have control over the date, pass in the timestamp to the Date constructor.

lastModifiedDate Date

This is the full date when the file was last modified.

name string

This is the file's name.

size integer

This is the file's size in bytes.

type string

This is the file's MIME type.

To recap, here's an image showing the properties of a FileList API

LOOPING THROUGH FILES

Now, let us learn how we can loop through each of the files selected by the user and perform validations on them.

The FileList Api provides data as an object, so we need to write a loop that will go through this object and retrieve the data we need.

If you haven't checked my previous article on how to loop through an object in JavaScript, here's a link to the article.

//loop through object
for (let file of fileInpFiles){
    //log current file
    console.log(file);
}

When you execute the above code, you will see that we are able to loop through the object and output each of the files.

Now we are ready to validate the files.

VALIDATION

Size Validation

Recall that the size of a particular file is returned as bytes.

Assuming the user is allowed to select files that are not more than 2MB, this is how I will perform the validation.

Convert 2MB to bytes
Loop through files and save their sizes
Check if the total size is greater than 2MB

//convert 2mb to bytes
const requiredSize = 1024 * 1024 * 2;
//save file size
let filesSize = 0;
//loop through object
for (let file of fileInpFiles){
    //add up file sizes
    filesSize+=file.size;
}
//check if files size is greater than 2MB or 2,000,000 bytes
if(filesSize > requiredSize){
    console.log("Files must not exceed 2MB in size");
}

Type Validation

Now, assuming the user is allowed to select only image files, this is how I will perform my validations.

Create an array that will store the image file types
Loop through the files and check if any file doesn't match the required type

//create an array that will store the image file type
const requiredTypes = ["image/jpg", "image/jpeg", "image/png"];
//store error
const valError = [];
//loop through object and compare type
for (let file of fileInpFiles){
      if ( !requiredTypes.includes( file.type ) ){
          valError.push(file.name);
      }
}
//check if there's a validation error
if( valError.length !== 0 ){
    valError.forEach( f => {
        console.log(`${f} is not an image file`);
    } );
}

Here's what happens when I select some files that are not supported

File Extensions Validation

For my last validation, I want the user to provide files that have the extension ".png, .jpg, .jpeg", and any file that doesn't match the extension will be flagged as an unsupported file type.

To perform this validation, I will;

Store the required file extensions in an array
Loop through the files and retrieve their names
Extract the file extension from the name and then compare it with the required file extensions

//store required extensions
const requiredExts = [".png", ".jpg", ".jpeg"];
//store error
const valError = [];
//loop through object
for (let file of fileInpFiles){
    //retrieve extension from name
    const ext = file.name.substring(file.name.lastIndexOf('.'));
    //check if it matches with the required extension
    if ( !requiredExts.includes( ext ) ){
        //store file name that doesn't match the extension
        valError.push( file.name );
    }
}
//check if there's a validation error
if( valError.length !== 0 ){
    valError.forEach( f => {
        console.log(`${f} is not supported`);
    } );
}

Here's what happens when I select files that are not supported

I hope that with the little exercise that we did here, you are able to fully understand what the FileList API in JavaScript is capable of, including how to use it.

I would love to have your contributions to this article.

Extra

I built and launched a JavaScript Library on NPM that is capable of validating your front-end forms using regular expressions, validation rules, and form input attributes.

With this Library, you can validate all types of form inputs, including files validation and length validation

Check out this library on NPM

octavalidate - npm

This Library helps to validate your HTML forms using validation rules, sophisticated regular expressions and form input attributes.. Latest version: 1.2.0, last published: a month ago. Start using octavalidate in your project by running `npm i octavalidate`. There are no other projects in the npm registry using octavalidate.

npmjs.com

Check out this library on GitHub

Octagon-simon / octaValidate

This Library helps to validate your HTML forms using validation rules, sophisticated regular expressions and form input attributes.

octaValidate V1.2.0

This library helps to validate your HTML forms using validation rules, sophisticated regular expressions and form input attributes.

We have included a demo.html file which you can open to see how this library really works.

We have developed this Library to work server-side on PHP language and as such, you can validate your forms server-side using this Library for PHP. Visit the repository

DOCUMENTATION

Visit the DOCUMENTATION to learn more about this GREAT Library!

INSTALL

CDN

Place this script before the </head> tag.

<script src="https://unpkg.com/octavalidate@1.2.0/native/validate.js"></script>

NPM

Visit this Link to the Documentation to learn how to install this Library with NPM.

LOCAL

Download and import the latest release to your project.
In your project, create a script tag and link the file validate.js.
Place the script before the </head> tag.

<script src="octaValidate/src/validate.js"></script

…

View on GitHub

Check out the Documentation

octavalidate | Getting Started

octaValidate: This JavaScript Library helps to validate your HTML forms using validation rules, sophisticated regular expressions and form input attributes

octagon-simon.github.io

Image Credit: Joan Gamell on Unsplash

Thank You.