How to create a full fetched crud web application using php and mysql

Step 0: Approach

Let's think about what to expect from my web application. Suppose I am going to create a complete note/crud page, where I can add, read, update and delete my notes. For this I need a database and some sorts of tables, we will think about what tables are required later, but let's select the database named as "notes". 

Note: WE ARE GOING TO USE LOCALHOST AS USERNAME AND BLANK("") AS PASSWORD FIELD.

 Step 1:  Creating a connection

<?php

$server = "localhost";

$username = "root";

$password = "";

$database = "notes";

$conn = mysqli_connect($server, $username, $password, $database);

if(!$conn){

    echo "Failed to connect to DB";

}

?>

Creating a connection is the easiest way to start with while making any PHP application. We are going to use mysqli extensions to communicate with database.

First of all create a folder named as your preferred choice name and open it with code, inside it, create another folder(here 'parts') and write the above code, to make the connection. Save the file as '_dbconnect.php' and you have successfully done your first step. The reason why I have put '_'  before 'dbconnect.php' because the underscores files are basically we do not want to show to the public. 

Note: Our next task is to check whether there is login authentication or not. If yes, creating logged in page first.

 Step 2:  Creating logged in Page

<div class="container my-4">

  <h2>Add a note to NoteTaker</h2>

  <form action="/crud/assets/_crud.php" method="POST">

    <div class="form-group">

      <label for="title">Title</label>

      <input type="text" class="form-control" id="title" name="title" maxlength="60" aria-describedby="titleHelp" required />

    </div>

    <div class="form-group">

      <label for="note">Note</label>

      <textarea class="form-control" id="note" rows="3" name="note" required></textarea>

    </div>

    <?php

    if (isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] == true) {

      echo '<button type="submit" class="btn btn-primary">Submit</button>';

    } else {

      echo '<button type="button" class="btn btn-primary disabled" data-toggle="tooltip" data-placement="top" title="Login to NoteTaker to create note">Submit</button>';

    }

    ?>

  </form>

don't look at 'if condition' now, this is the check condition whether user logged in or not. We will talk about it later. In this portion of code, we are creating a form, which is main moto of this website, to make a crud app, in this form we are going to add our create portion and do a POST request at the end.

$sql = "SELECT * FROM note where `userid`='$userid'";

    // this $result variable select all data in database, which is echoed by While loop in line 152

    $result = mysqli_query($conn, $sql);

    echo '<div class="container my-4">

    <table class="table .thead-dark" id="myTable">

      <thead>

        <tr>

          <th scope="col">Sl.</th>

          <th scope="col">Title</th>

          <th scope="col">Description</th>

          <th scope="col">Action</th>

        </tr>

      </thead>

      <tbody>';

    $sl = 0;

    while ($data = (mysqli_fetch_assoc($result))) {

      $sl++;

      //! Creating a dynamic table.

      echo "<tr>

                <th scope='row'>" . $sl . "</th>

                <td>" . $data['Title'] . "</td>

                <td>" . $data['Description'] . "</td>

                <td><button type='button' class='btn btn-primary btn-sm mx-1 edit' id=" . $data["SL"] . " >Edit</button><button type='button'class='" . $data['userid'] . " delete btn btn-primary btn-sm mx-1' id=d" . $data["SL"] . " >Delete</button></td>

              </tr>";

    };

In this portion of code, we are fetching all the records of that particular user who currently logged in. This is a basic while loop working behind the scene and fetching everything one by one under an associative array.

 Step 3:  Make my note editable

As you can check that I take the id of edit button from from that associative array.