DEV Community: Vivian Ijomah

Beginners guide to JavaScript Variables

Vivian Ijomah — Thu, 01 Dec 2022 00:28:39 +0000

Hello World, JavaScript is one of the most popular web technologies that when mastered will open a new door of creativity and power in building web applications.
With the JavaScript language, we deal with a lot of data or information, this data or information needs to be stored somewhere we can quickly have access to.
The box or container for storing data are variables.
In this post, we take a look at variables in JavaScript, we will learn what variables are, how to create variables, how to store values and how to access the stored values.

Let's get started

What are variables?

With most web applications, you may want to work with some information or data. For instance, if you plan to build the next social media application, you may want to keep information like who created an account, who posted, who liked a post etc.
The way to keep track of these informations or data is store them in variables.

Variables are boxes that stores values or information or data.

The value or data stored can then be used during the program execution.
Every variable has three main structures

The name : to uniquely identify the variable
The value : referring to the data or information stored in the variable
The memory address : referring to the location in the computer's memory where the variable is stored.

Let's learn how to create variables.

Declaring a variable
To be able to store data in a variable, you need to declare it.

You declare a variable with the var (less recommended) or let or const keywords.
Followed by the *name * you want to give to the variable.

For instance

var firstName;

let firstName;

From the above, I have created a 'container' or box with a label **firstName.
After declaring the variable, you can now **store the data or value into the variable. The syntax will be
var variableName = value;
Let's now assign the firstName variable a value

let firstName = "Vivian";

We have now stored the data or value "Vivian" in our firstName variable (or container).
You can also declare multiple varialbes and assign values to each of them.

let firstName = "Vivian";
let lastName = "Sylvanus";
let email = "vivaluv98@gmail.com"

The above declare three variables firstName, lastName, and email and store three distinct piece of data or value in them.
We can also declare multiple variables at a go, each variable declaration must be followed by a , (comma).

//declaring 3 variables together
let firstName = "Vivian", lastName ="Sylvanus", email="vivaluv98@gmail.com";

Rules for variable name
The following are some rules to take note of when declaring variables

Variable names cannot contain spaces
The first letter of the variable can be [a-z, A-z], dollar sign ($), or underscore(_)
Any digit can be used after the first letter
Variable names are case sensitive. For instance let firstName and let FirstName are not the same

Undefined vrs Undeclared Variables
An undefined variable is a variable that has been declared, but has not been assigned a value. Because it has not been assigned a value, the variable uses undefined as its initial value.
Let's declare a variable not assign it a value and see what the output will be

let firstName;
console.log(firstName)

The output will be undefined
However, an undeclared variable is a variable that has not been declared. Accessing an undeclared variable will produce a ReferenceError.
For instance

console.log(message);
//ReferenceError: message has not been declared.

Retrieving Values
To easily grasp the concept of variable, you can imagine it as box with a unique name or label on it, used for storing data. We can put any value or data in the box.
To access the data or value in the box, you need to call the variable name (type the unique name you gave to the variable).

let firstName = "Vivian"
//retrieving the value
firstName;

To dispay the output of a variable, you can use the console.log() method and insert the variable name in the () parenthesis.
So, if you want to view what data is stored in the firstName variable , you can write

console.log(firstName);
/*This will output the data stored in firstName in the developer console.*/

You can also change the value or data stored in the variable by assigning the variable a new data.
See the code below:

firstName = "Chiamaka"; //change the value stored in the variable to Chiamaka 
console.log(firstName); //Chiamaka

Now when you call the firstName variable, it will contain the value Chiamaka instead of Vivian
Declaring a variable twice
A variable should be declared only once, a repeated declaration of the same variable is an error

let firstName = "Vivian";
let firstName = "Chiamaka ";
/*SyntaxError: 'firstName' has already been declared */

Types of variables
All variables exist within a scope, which determines which part of the code can have access to the variables, and the life span of the variables.
There are two types of variables supported in JavaScript

Local variables
Global variables

Local Variables

A local variable is a variable that is declared inside a code block, a function body or inside a loop body.

In other words, if we declare a variable inside a curly braces {} or block scope, it is a local variable. That variable can only be accessed inside that scope or {}

Also, if you declare a variable inside a function, JavaScript will add the variable to the function's scope, the variable will only exist inside the function

It is recommended to use let keyword when declaring local variables.

Let's examine the code below:

function someFunc(){
    let firstName ="Vivian";
//accessing the local varialbe
    console.log(firstName)
}
someFunc() // output "Vivian"

//accessing the variable outside the scope {}
console.log('access out scope', firstName)
// Uncaught ReferenceError: firstName is not defined

Since firstName variable is declared inside the curly braces {} or a function scope, it is a local variable and cannot be accessed outside {}.
If you try to access firstName outside of the function, as in the example above, you will get a ReferenceError because the firstName variable was not defined.

Global variable

A variable declared anywhere within the script and not declared inside a block scope or function scope is a global variable

In simple words, if the variable was not declared inside a function's body or in a block of code {}, then it s a global variable. **
Global variables can be accessed **anywhere in your code.
It is recommended to use the var keyword for global variables.
Naming things right
It is recommended that the name you give the variable, should have an obvious meaning, describing the data that it stores.
A quick glance at variable names can reveal if the program was written by a novice or an experienced developer.
Some good to follow rules are

Use identifiable and human-readable names like userName , firstName or tasks
Avoid using abbreviations or short names like a, , usr etc. Conclusion

In summary, you have learnt that:

Variables are like boxes for keeping data or information
We can declare variables using var, let and const keywords.
To access the value of the variable, call the variable name
Lastly, variables should be named in a way that will help easily understand what is inside them.

If you have found value, in this post, kindly leave a comment. Help other #codenewbies by sharing the post.
Written with love from Lagos Nigeria,( thank you )

Arrow Function vs Function

Vivian Ijomah — Tue, 29 Nov 2022 18:26:26 +0000

In JavaScript, arrow functions provide a concise syntax for anonymous function expressions stripped off of their OOP baggage. They are a syntactic sugar on a subset of the function capabilities. Both can be used as closures capturing variables of the outer scope.
Arrow functions are part of the ECMAScript 2015 standard also known as ES6. We will unpack variations of the arrow function ES6 syntax to their analogous function implementation and discuss the differences.
The article assumes familiarity with the traditional functions and builds on the prior knowledge by drawing parallels between the two language mechanisms.

Syntax

The "fat arrow" syntax => is dedicated to arrow functions, hence the name.
Arrow function declaration

(arg1, arg2, ..., argN) => expression

Equivalent anonymous function:

(function (arg1, arg2, ..., argN) {
  return expression;
}).bind(this)

There's a lot going on here: omitted keywords, the implicit return statement, this context binding. Each aspect is discussed separately below.

Semantics
Return Expression

Unlike ordinary functions (anonymous or otherwise), arrow functions implicitly return an evaluated expression without having to use the return statement.
Arrow function:

(arg1, arg2, ..., argN) => expression

Equivalent anonymous function:

function (arg1, arg2, ..., argN) {
  return expression;
}

There's a lot going on here: omitted keywords, the implicit return statement, this context binding. Each aspect is discussed separately below.

Semantics
Return Expression

Unlike ordinary functions (anonymous or otherwise), arrow functions implicitly return an evaluated expression without having to use the return statement.

Arrow function:

(arg1, arg2, ..., argN) => expression

Equivalent anonymous function:

function (arg1, arg2, ..., argN) {
  return expression;
}

Once you get used to the syntax, you'll appreciate how much shorter the code becomes and would never want to go back.

Block Statement

The short return expression syntax cannot represent sequence of statements. That's where the familiar block statement {} comes in. Within the curly braces you'd have to explicitly return result of the function.
Arrow function:

(arg1, arg2, ..., argN) => {
  let result = doSomething();
  doDependentThing(result);
  return result;
}

Equivalent anonymous function:

function (arg1, arg2, ..., argN) {
  let result = doSomething();
  doDependentThing(result);
  return result;
}

The functions look more alike now, don't they?

Object Expression

Functions often return newly constructed objects. There's a catch: the object declaration notation {} is indistinguishable from the block statement syntax. The solution is to surround the inline object with () to make it an expression.
Arrow function:

(arg1, arg2, ..., argN) => ({
  prop1: value1,
  prop2: value2,
  ...,
  propN: valueN
})

Equivalent anonymous function:

function (arg1, arg2, ..., argN) {
  return {
    prop1: value1,
    prop2: value2,
    ...,
    propN: valueN
  };
}

Single Argument

There's an extra syntactic sugar for a special case of an arrow function having only one argument. You can omit the parentheses () around the argument.
Arrow function:

arg => expression

Equivalent anonymous function:

function (arg) {
  return expression;
}

No Arguments

An arrow function w/o arguments is just an edge case of empty parentheses. Unlike the single argument syntax, the parentheses are required here.
Arrow function:

() => expression

Equivalent anonymous function:

function () {
  return expression;
}

Context Binding

Let's talk about the elephant in the room – the this context. Arrow functions aside, this (pun intended) has always been a confusing topic in JavaScript.
Functions have access to a special variable this holding the context assigned in runtime. The problem is that the value varies depending on how the function is called which is error-prone and often undesirable.

With callbacks being the primary use case, in most cases you'd want access to this context defined at a declaration time, not at invocation.

You'd find yourself sprinkling your code with the following closure boilerplate:

let self = this;
let callback = function () {
  self.doSomething();
};

or the re-binding to avoid self in the callback:

let callback = function () {
  this.doSomething();
};
callback = callback.bind(this);

In contrast, arrow functions provide no this context of their own and instead inherit the current "lexical" scope. They're naturally suited for inline callbacks.

Equivalent arrow function:

let callback = () => void this.doSomething();

The void operator discards the result returned by this.doSomething(), if any. In practice, passing the result though is often okay and void can be omitted. The block statement {} is another (perhaps better) way to ignore the result.

Class Methods

Arrow functions come in handy in classes due to the nature of this context. Ordinary methods are prone to losing class context when called from outside of class methods. Arrow methods are immune to this issue.
The arrow method syntax is nothing but a class property declaration with an arrow function assigned in place of the value. Note the class properties are introduced in the ECMAScript 2017 specification.

Arrow method (arrow function property):

class Example {
  constructor(arg) {
    this.arg = arg;
  }

  callback = () => {
    console.log(this.arg);
  }
}

Equivalent ES6 class method:

class Example {
  constructor(arg) {
    this.arg = arg;
    this.callback = this.callback.bind(this);
  }

  callback() {
    console.log(this.arg);
  }
}

Examples
Loop Refactoring

Single argument is quite common in array method callbacks, such as map() and its cousins, that iterate over items.
Loop over array of items:

let ids = [];
for (let i = 0; i < items.length; i++) {
  ids.push(items[i].id);
}
return ids;

Equivalent traditional function implementation:

let ids = items.map(function (item) {
  return item.id;
});

Equivalent arrow function implementation:

let ids = items.map(item => item.id);

This example vividly demonstrates the level of code compression provided by arrow functions without sacrificing readability and even improving it.

Enjoy the utility of arrow functions in your modern JavaScript code!

7 JavaScript Concepts You Should Be Familiar With As a Developer

Vivian Ijomah — Tue, 29 Nov 2022 03:31:36 +0000

As of 2022, JavaScript currently stands as the most commonly-used language in the world. It is used by 95 percent of all websites, whether small startups or giant corporations. Several of them are working on specific website or app that requires a strong understanding of this language.

There are tons of frameworks and libraries available for javascript users. If you can understand Javascript fundamentals, you can learn these frameworks and libraries easily. Several concepts are confusing and overwhelming for several developers, but learning these Javascript concepts will benefit you in the long run. Not only that but learning these JavaScript concepts will help you build any kind of application and learn any framework and libraries.

Learning Javascript is going to come in handy to you in 2022. It will also help you in interviews as well. So without further ado, let's discuss some fundamental Javascript concepts that every JavaScript developer should know.

Scope

Scope stands for variable access. So, the question is, what variable do I have access to when a code is running? However, in Javascript, you are always in the root scope by default (the window scope). These boundaries restrict variables and determine whether or not you have access to them. It restricts a variable's visibility or availability to other parts of the code. Understanding this concept will help you separate logic in your code and improve readability. We can define a scope in two ways:

Local Scope: It lets you access everything within the boundaries inside the box.
Global Scope: It lets you access everything outside the boundaries outside the box. It can't access a variable defined in the local scope unless you return it, as it is enclosed from the outside world.

Async & Await

Async & await are essentially syntactic sugar on top of Promises, and they give the means to keep asynchronous operations running more synchronously, just like Promises. As a result, you can handle asynchronous operations in javascript in several ways:

ES5 -> Callback
ES6 -> Promise
ES7 -> Async & Await

In cases where you wish to wait for the data to fully load before displaying it, you can perform a Rest API request using Async/Await. They are great syntactic improvements for NodeJS and browser programmers. It helps developers implement functional programming in Javascript and also makes the code more readable.

Callbacks

When a function is called, it must wait for another function to perform or return a value, creating the chain of functionalities. As a result, callbacks are generally used in javascript's asynchronous operation to provide synchronous functionality.

Closures

Simply put, a closure is a function within another function with access to the outer function variables. The definition itself seems pretty straightforward, but the scope makes this definition unique. Inner functions (closure) can access variables defined in their scope (variables defined between curly brackets), their parent functions, and inside global variables. Now, here you need to keep in mind that the outer function cannot have access to the inner function variables.

Hoisting

Several developers get unexpected results because they are unfamiliar with the concept of hoisting in javascript. If you call a function before it is defined in javascript, you won't get an 'Uncaught ReferenceError' error. As a result, the javascript interpreter elevates variables and function declarations above the current scope (function scope or global scope) before executing the code.

IIFE (Immediately Invoked Function Expression)

As its name implies, IIFE is a Javascript function that immediately gets invoked and executed instantly as it is defined. A variable declared within IIFE cannot be accessed by the outside world, preventing the global scope from getting polluted. Thus, IIFE is primarily used for the instant execution of code and data privacy.

Promises

Promises are useful in asynchronous javascript operations when you need to start two or more back-to-back operations (or chain calls), where each subsequent function is called after the preceding one finishes. A promise is an object that will produce a single value shortly, either a solved value or a reason why it cannot be resolved (rejected).

A promise can exist in one of three states:

Fulfilled: Operation completely successfully
Rejected: Failed operation
Pending: early state, neither fulfilled nor rejected.

Thanks for taking your time to read this article.

How to solve PHP parse/syntax errors

Vivian Ijomah — Thu, 24 Nov 2022 16:16:43 +0000

Introduction

As a beginning PHP developer, you will encounter an error message from your PHP code, I remember when I kick-started as a PHP developer. When I write code to a certain extent, I'll get an error message, and it
piece me off. So that is what we are going to bridge here, if you read and study carefully, you'll know several things about syntax error and parsing. So to skip much talk, If you are ready let's get started.

Prerequisite

The only thing you need for this course is your pen and jotter And pay proper attention.

What is a parse error?

Parse errors are caused by misuse or missing symbols in a particular line of code. The compiler catches the error and terminates the script.

What is a syntax error?

If the PHP code contains a syntax error, the PHP parser cannot interpret the code and stops working. For example, a syntax error can be a forgotten quotation mark, a missing semicolon at the end of a line, a missing parenthesis, or extra characters.
In computer science, a syntax error is an error in the syntax of a sequence of characters or tokens that are intended to be written in a particular programming language. For compiled languages, syntax errors are detected at compile time. A program will not compile until all syntax errors are corrected.

What is the difference between parse error & syntax error

The difference between syntax errors is that parse error happens because of a syntax error. You (the developer) write code that contains a 'syntax error'. When that code is compiled, the compiler tries to parse your code but cannot which results in a parse error. If you are dealing with an interpreted language, (PHP, ASP, etc.)

What causes parse & syntax error

Parse errors are caused by: Unclosed brackets or quotes. Missing or extra semicolons or parentheses.
A parse error: syntax error, unexpected appears when the PHP interpreter detects a missing element. Most of the time, it is caused by a missing curly bracket "}". To solve this, it will require you to scan the entire file to find the source of the error.

How to solve parse and syntax error
Solving syntax errors In steps.

Look at the mentioned code line.
More regularly you need to look at preceding lines as well.
Look at the syntax colorization!
White-space is your friend.
You can freely add newlines between operators or constants and strings.
Comment out the offending code.

Conclusion

You have come to the end of this tutorial, so as a PHP developer, when an error is thrown on you screen, trace that error, from the line of code. And you'll find out that what causes it is either wrong input of semi-column, curly-brace, Etc..

About the Author

I am Vivian Ijomah i have grown full-blown skills in JavaScript, PHP, HTML & CSS, and more.
I am currently freelancing, building websites for clients, and writing technical tutorials,teaching others how to do what i does. Any question drop on the comment box…
Vivian Ijomah is open and available to hear from you. You can reach him on Linked In, Google, Facebook, GitHub, or on his website.

A Simple Crude Application Function With MYSQL and PHP.

Vivian Ijomah — Wed, 23 Nov 2022 23:33:31 +0000

Introduction
CRUD Operations are typically performed on databases, hence, in this PHP CRUD Operations tutorial, you will implement CRUD techniques on MySQL databases with the help of PHP.

CRUDE is an acronym for the four basic types of SQL commands: Create, Read, Update, Delete. Most applications have some kind of CRUD functionality, and we can assume that every programmer had to deal with CRUD at some point.

A CRUD application uses forms to get data into and out of a database.
We use CRUD apps every day. Most of the time, without notice. They keep us organized, they help digitize business processes, and they’re critical to application development.

What is a crude application?
CRUD apps are the user interface that we use to interact with databases. Broadly, CRUD apps consist of the database, the user interface, and the APIs.

Modern web applications have a user perform at least one of the following operations on a database – creating a new record, reading or viewing existing records, updating, or deleting a record. If you have worked with a database, you have most likely worked with CRUD without realizing it.

CRUD apps are used daily by several businesses and organizations to maintain their day-to-day workflow. HR uses CRUD apps to manage staff records and keep and track the keeping of employee leaves, and attendance.

Customer success uses CRUD apps to solve customer tickets, and so on. Take a look at the blogging sites. You as a user can create your post, read your post, update your post and select your post. Bloggs are classic CRUD apps.

How to Build a Crud Application.
This is a step-by-step procedure on how to implement a simple user crud operation app with validation. Using this crud app, you can learn how to insert, read, update and delete data from a database in PHP.

Follow the following steps to build a crud operation using PHP and MySQL;

Step 1 – Create Database Table
Step 2 – Create an index page(with a form)
Step 3 – Create a config Page
Step 4 – Create an action Page
Step 5 – Create an update Page
Step 6 – Create a Delete file. Step 1: Create Database Table

First, we need to create a database and database table where we save the ’ data or records.
In the database, we will keep only four pieces of information in our table (people) – name,Date of birth, ‘food, and ‘friend.

Database Name – yearbook
Table Name – people
CREATE TABLE users (
uid INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(255) As defined,
email VARCHAR(255) As defined,
dob VARCHAR(255) As defined,
food VARCHAR (255) As defined,
friend VARCHAR (255) As defined,

);

Step 2: Create Index File

our index will contain our form, from which users can log in.

<!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="css/bootstrap.min.css" rel="stylesheet" >
      <link rel="stylesheet" href="css/owl.carousel.min.css">
      <link rel="stylesheet" href="css/owl.theme.default.min.css">
      <link rel="stylesheet" type="text/css" href="css/aos.css">
      <link rel="stylesheet" type="text/css" href="css/fontawesome/css/all.min.css">
      <link rel="stylesheet" href="css/style.css">
      <title>Hello, world!</title>
    </head>
    <body>
<section class="bg-dark py-5">
   <div class="container">
     <div class="row">
      <div class="col-md-4 offset-md-4 bg-warning p-5">
        <form action="action.php"    method="post">

          <div class="input-group mb-3">
            <span>
            <i class="fa fa-envelope"></i>
            </span>
          <input type="text" name="name" class="form-control" placeholder="full name">
        </div>

      <div class="input-group mb-3">
        <span>
        <i class="fa fa-calendar-alt"></i>
        </span>
      <input type="text" name="name" class="form-control" placeholder="Date of Birth" 
     </div>

    <div class= "input-group mb-3">
     <span>
      <i class="fa fa-fish"></i>
      </span>
<input type="text" name="name" class="form-control" placeholder="Forvourite food"
</div> 

    <div class="input-group mb-3">
     <span>
      <i class="fa fa-handshake"></i>
       </span>
<input type="text" name="name" class="form-control" placeholder="best friend"
    </div> 

</form>
</div>
</div>
</div>
</section>

      <script src="js/bootstrap.bundle.min.js" ></script>
      <script src="Js/jquery.min.js"></script>
      <script src="js/owl.carousel.min.js"></script>
      <script src="js/aos.js"></script>
      <script src="js/script.js"></script>

    </body>
  </html>

Step 3: Create Config File

The config file is enables us connect to the database.

<?php 
$db= new mysqli ("localhost", "root", "", "yearbook");

/* server with default setting (user 'root' with no password) */
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');


/* Attempt to connect to MySQL database */
$link = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD,);
 // check connection.
?>

Step 4: Create an Action File

On your action page, you check for the submit button. we also collect all data from the form. we do the insert query as well. if you insert data, it will insert and redirect you back to the index page using the header location.

<?php
include_once("config.php");

if(isset($_POST['submit'])){
$name=$_POST['name'];
$DOB=$_POST['DOB'];
$food=$_POST['food'];
$friend=$_POST['friend'];
$db->query (INSERT INTO people(name,DOB,food,friend) VALUES ('$name', '$DOB', '$food','$friend');

header(location:index.php);
}
?>

THE READ SECTION
To read information from your database. you need to include your config.php in your index.php file. just before your Doctype using include_once(“config.php”). This must be done because one cannot read a database without the config.

The next step is to write a select query. Because we want to select all from people(which is the table name) we will write the following code.

<?php
include_once("config.php");
$list=db->query("SELECT *FROM people order by DESC LIMIT 10")

?>



<!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="css/bootstrap.min.css" rel="stylesheet" >
      <link rel="stylesheet" href="css/owl.carousel.min.css">
      <link rel="stylesheet" href="css/owl.theme.default.min.css">
      <link rel="stylesheet" type="text/css" href="css/aos.css">
      <link rel="stylesheet" type="text/css" href="css/fontawesome/css/all.min.css">
      <link rel="stylesheet" href="css/style.css">
      <title>Hello, world!</title>
    </head>
    <body>
     <section class="bg-dark py-5">

        <div class="container">
          <div class="row">
            <div class="col-md-4 offset-md-4  bg-warning p-5">
              <form action="action.php" method="post">


                 <div class="input-group mb-3">
                  <span class="input-group-text">
                    <i class="fa fa-envelope"></i>
                  </span>
                  <input type="text" name="name" class="form-control" placeholder="full name">
                </div>


               <div class="input-group mb-3">
                  <span class="input-group-text">
                    <i class="fa fa-calendar-alt"></i>
                  </span>
                  <input type="text" name="DOB" class="form-control" placeholder="Date of Birth">
                </div>



              <div class="input-group mb-3">
                  <span class="input-group-text">
                    <i class="fa fa-fish"></i>
                  </span>
  <input type="text" name="food" class="form-control" placeholder="Favourite food">
            </div> 


                <div class="input-group mb-3">
                  <span class="input-group-text">
                    <i class="fa fa-handshake"></i>
                  </span>
<input type="text" name="friend" class="form-control" placeholder="Best friend">
                </div>
<input type="submit" name="submit" value="login" class="btn btn-dark col-12">
           </form>
           <?php 
           while ($row=$list->fetch_assoc()):?>

            <div class="my-3">
            <h3 class="text-muted"><i class="fa fa-user"></i><?=$row['name'];?></h3>

            <p class="text-secondary">
             <i class="fa fa-envelope text-dark"></i><?=$row['dob'];?>
             <i class="fa fa-fish text-dark"></i><?=$row['food'];?>
             <i class="fa fa-handshake text-dark"></i><?=$row['friend'];?>

<a href="delect.php?uid=<?=$row['uid']?> class="text-danger" title="delete"><i class="fa fa-trash"></i></a>
<a href="update.php?uid=<?=$row['uid']?>" class="badge bg-success badge-pill">update<i class="fa fa-edit"></i></a>
      </p>
    </div>
<?php endwhile;?>

  </div>
    </div>
     </div>
      </section>



      <script src="js/bootstrap.bundle.min.js" ></script>
      <script src="Js/jquery.min.js"></script>
      <script src="js/owl.carousel.min.js"></script>
      <script src="js/aos.js"></script>
      <script src="js/script.js"></script>

    </body>
  </html>

The “list” above is called a resource. our objective is to convert the resources into an associative array using <?PHP while ($row =$list → fetch_assoc);
$row is now the associative array.

The above while loop brings everything to the database and displays it on the index page.

Step 4: Create an Update File

In our update file, we have a button called the update.php. but that button is a link to our index .php. if (isset($_GET)[‘uid’]; means the user is suspicious, then you kill the page. you must be aware of the previous information before you can do an update.
To get the previous information you do a select query. that will enable you to specify the person you to want to update. with the value attribute, the update change will be effected and changes will be made in the database.

<?php

  include_once("config.php");

if(isset($_GET['uid'])){

    $uid=$_GET['uid'];

    }else{


die(header('location:index.php'));

  }

  $list=$db->query("SELECT * FROM people WHERE uid=$uid");

  $person=$list->fetch_assoc()


//helps you read your database and put a limit to how much information that would 

display.

  ?>


<!doctype html>

    <html lang="en">

      <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="css/bootstrap.min.css" rel="stylesheet" >

        <link rel="stylesheet" href="css/owl.carousel.min.css">

        <link rel="stylesheet" href="css/owl.theme.default.min.css">

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

        <link rel="stylesheet" type="text/css" href="css/fontawesome/css/all.min.css">

        <link rel="stylesheet" href="css/style.css">

        <title>Hello, world!</title>

      </head>

      <body>

       <section class="bg-dark py-5">


      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-4 offset-md-4  bg-warning p-5"&gt;
            &lt;form action="update_action.php" method="post"&gt;


              &lt;div class="input-group mb-3"&gt;
                &lt;span class="input-group-text"&gt;
                  &lt;i class="fa fa-envelope"&gt;&lt;/i&gt;
                &lt;/span&gt;



<input type="text" name="name" class="form-control" placeholder="full name" value="<?=$person['name']?>">

                  </div>


             &lt;div class="input-group mb-3"&gt;
                &lt;span class="input-group-text"&gt;
                  &lt;i class="fa fa-calendar-alt"&gt;&lt;/i&gt;
                &lt;/span&gt;



<input type="text" name="DOB" class="form-control" placeholder="Date of Birth" value="<?=$person ['dob']?>">

                  </div>


            &lt;div class="input-group mb-3"&gt;
                &lt;span class="input-group-text"&gt;
                  &lt;i class="fa fa-fish"&gt;&lt;/i&gt;
                &lt;/span&gt;



<input type="text" name="food" class="form-control" placeholder="Favourite food" value="<?=$person['food']?>">

                  </div> 


              &lt;div class="input-group mb-3"&gt;
                &lt;span class="input-group-text"&gt;
                  &lt;i class="fa fa-handshake"&gt;&lt;/i&gt;
                &lt;/span&gt;



<input type="text" name="friend" class="form-control" placeholder="Best friend" value="<?=$person['friend']?>">

                  </div>

<input type="hidden" name="uid" value="<?=$person['uid']?>">

<input type="submit" name="submit" value="login" class="btn btn-dark col-12">


</form>


       &lt;/div&gt; 
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/section&gt;



    &lt;script src="js/bootstrap.bundle.min.js" &gt;&lt;/script&gt;
    &lt;script src="Js/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/owl.carousel.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/aos.js"&gt;&lt;/script&gt;
    &lt;script src="js/script.js"&gt;&lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;

Step 5: Create a Delete File

<?php

include_once("config.php");

if (isset($_GET['uid'])){

        $uid=$_GET['uid'];


    $db-&gt;query("DELETE FROM people WHERE uid='$uid'");


    header("location: index.php");



}


?>

Conclusion

Finally, we have come to the completion of this tutorial and hopefully, you got value from it.

Thanks for reading, please hit the like, clap, or heart button to show some love, I will see you in the next tutorial…

We learned how to build a simple crude application with SQL and PHP.

If you have any questions, please leave them in the comments. Like and share, and till next time, all the best!

About the Author

I am Vivian Ijomah, an enthusiastic developer with a passion for JavaScript, PHP, HTML & CSS.
I work as a freelancer, building websites for clients, and love writing technical tutorials to teach others what I do. I am eager to hear from you. Reach me on LinkedIn, Github, or my website.