Bootstrap PHP MySQL

Trong bài đăng này, Chúng ta sẽ xem cách phát triển Ứng dụng CRUD (Tạo, Đọc, Cập nhật, Xóa) bằng Bootstrap 5, PHP - OOP, PDO - MySQL và Tìm nạp API của ES6 (ECMAScript),  i. e. , còn được gọi là Javascript hiện đại

Trong Phiên bản Alpha gần đây của Bootstrap 5, thư viện jQuery đã bị xóa và hiện Bootstrap 5 sử dụng JavaScript hiện đại (i. e. , ECMAScript 6)

Đó là lý do tại sao trong hướng dẫn này, tôi cũng đang sử dụng ECMAScript 6 để gửi yêu cầu HTTP đến máy chủ bằng Fetch API của ES6, như Ajax

Trong hướng dẫn này, tôi đang sử dụng Bootstrap 5 để thiết kế, PHP - OOP làm ngôn ngữ phụ trợ, MySQL làm Cơ sở dữ liệu và API tìm nạp ECMAScript 6 để gửi yêu cầu HTTP đến máy chủ

Vì vậy, bây giờ hãy bắt đầu hướng dẫn này, tôi sẽ chỉ cho bạn từng bước một, vì vậy hãy làm theo tất cả các bước thật cẩn thận

Nếu bạn muốn xem video hướng dẫn của bài đăng này, hãy nhấp vào đây

1. Tạo một thư mục dự án

Trong bước này, chúng tôi sẽ tạo một thư mục dự án bên trong localhost giống như nếu bạn đang sử dụng Máy chủ XAMPP, sau đó tạo bên trong thư mục htdocs, đặt tên là crud-app hoặc bất cứ thứ gì bạn muốn. Mở thư mục này bên trong trình chỉnh sửa mã của bạn

2. Tạo cơ sở dữ liệu & bảng

Trong bước này, Chúng tôi sẽ tạo cơ sở dữ liệu và bảng cho Ứng dụng CRUD này. Vì vậy, đừng lo lắng, bạn không cần phải viết mã cho việc này, tôi sẽ cung cấp cho bạn một liên kết, chỉ cần nhấp vào liên kết đó và tải xuống tệp SQL. Bạn có thể tải về từ đây. Sau khi bạn đã tải xuống, chỉ cần mở PHPMyAdmin của mình rồi tạo Cơ sở dữ liệu mới có tên là fetch_crud_app sau đó chỉ cần mở cơ sở dữ liệu rồi nhấp vào tab nhập, sau đó nhấp vào chọn tệp, chọn tệp SQL đã tải xuống rồi nhấp vào ĐI. Sau khi nhập thành công, bạn sẽ có thể thấy một bảng mới đã được tạo với tên người dùng

3. Thiết kế trang chỉ mục

Trong bước này, chúng tôi sẽ tạo một tệp mới trong thư mục gốc của thư mục dự án với tên chỉ mục. php. Bên trong tệp này, chúng tôi sẽ thiết kế trang của mình bằng Bootstrap 5. Vì vậy, đối với điều này, chỉ cần sao chép, các mã bên dưới sẽ dán chúng vào chỉ mục của bạn. tệp php và lưu

  
  
  CRUD Application Using PHP OOPS PDO MySQL & FETCH API of ES6
  
  



  
  

    

      

        

          
Add New User
          
        

        

          
            

              

                
                
First name is required!
              


              

                
                
Last name is required!
              




            


            

              
              
E-mail is required!
            


            

              
              
Phone is required!
            


            

              
            
          
        

      

    

  

  

  
  

    

      

        

          
Edit This User
          
        

        

          
            
            

              

                
                
First name is required!
              


              

                
                
Last name is required!




              

            


            

              
              
E-mail is required!
            


            

              
              
Phone is required!
            


            

              
            
          
        

      

    

  

  
  

    

      

        

          
All users in the database!
        

        

          Add New User
        
      




    

    

    

      

        
      
    

    

      

        

          
            
              
                ID
                First Name
                Last Name
                E-mail
                Phone
                Action
              
            
            

            
          
        
      

    

  

  

Trong đoạn mã trên, bạn có thể thấy tôi đã bao gồm các liên kết Bootstrap 5 CDN. Và bên dưới tôi đã bao gồm chính. js trong đó tôi sẽ viết mã ECMAScript

4. Kết nối Ứng dụng với Cơ sở dữ liệu

Trong bước này, Chúng tôi sẽ tạo một tệp mới trong thư mục gốc của thư mục dự án với tên config. php, trong tệp này, chúng ta sẽ viết mã PHP để kết nối cơ sở dữ liệu theo Kiểu hướng đối tượng. Vì vậy, chỉ cần sao chép các mã dưới đây và dán vào cấu hình của bạn. tệp php và lưu

conn = new PDO($this->dsn, self::DBUSER, self::DBPASS);
        $this->conn->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
      } catch (PDOException $e) {
        die('Error: ' . $e->getMessage());
      }
    }
  }

?>

5. Xác định một số phương pháp tiện ích

Trong bước này, chúng tôi sẽ tạo một tệp mới trong thư mục gốc của thư mục dự án với tên util. php, Trong tệp này, chúng tôi sẽ xác định một số phương thức tiện ích để làm sạch đầu vào và hiển thị thông báo lỗi và thành công một cách linh hoạt. Vì vậy, chỉ cần sao chép các mã dưới đây và dán chúng vào tiện ích của bạn. tệp php và lưu

                ' . $message . '
                
              

6. Tạo tệp mô hình

Trong bước này, chúng tôi sẽ tạo một tệp mới trong thư mục gốc của thư mục dự án với tên db. php, Trong tệp này, chúng ta sẽ tạo một lớp có tên Cơ sở dữ liệu và sau đó bên trong lớp này, chúng ta sẽ xác định các phương thức cho tất cả hoạt động như tìm nạp tất cả người dùng, tìm nạp người dùng theo id, chèn người dùng, chỉnh sửa người dùng, xóa người dùng. Vì vậy, chỉ cần sao chép các mã dưới đây và dán vào db của bạn. tệp php và lưu

conn->prepare($sql);
      $stmt->execute([
        'fname' => $fname,
        'lname' => $lname,
        'email' => $email,
        'phone' => $phone
      ]);
      return true;
    }

    // Fetch All Users From Database
    public function read() {
      $sql = 'SELECT * FROM users ORDER BY id DESC';
      $stmt = $this->conn->prepare($sql);
      $stmt->execute();
      $result = $stmt->fetchAll();
      return $result;
    }

    // Fetch Single User From Database
    public function readOne($id) {
      $sql = 'SELECT * FROM users WHERE id = :id';
      $stmt = $this->conn->prepare($sql);
      $stmt->execute(['id' => $id]);
      $result = $stmt->fetch();
      return $result;
    }

    // Update Single User
    public function update($id, $fname, $lname, $email, $phone) {
      $sql = 'UPDATE users SET first_name = :fname, last_name = :lname, email = :email, phone = :phone WHERE id = :id';
      $stmt = $this->conn->prepare($sql);
      $stmt->execute([
        'fname' => $fname,
        'lname' => $lname,
        'email' => $email,
        'phone' => $phone,
        'id' => $id
      ]);

      return true;
    }

    // Delete User From Database
    public function delete($id) {
      $sql = 'DELETE FROM users WHERE id = :id';
      $stmt = $this->conn->prepare($sql);
      $stmt->execute(['id' => $id]);
      return true;
    }
  }

?>

7. Gửi yêu cầu HTTP

Trong bước này, chúng tôi sẽ tạo một tệp mới trong thư mục gốc của thư mục dự án với tên chính. js, Trong tệp này, chúng tôi sẽ viết mã ECMAScript để gửi yêu cầu HTTP đến máy chủ cho mọi hành động như Chèn, Cập nhật, Tìm nạp và Xóa. Trong tệp này, chúng tôi cũng sẽ xác thực biểu mẫu bằng phương thức Bootstrap 5. Vì vậy, đối với điều này, chỉ cần sao chép các mã bên dưới và dán chúng vào tệp chính của bạn. js và lưu lại

const addForm = document.getElementById("add-user-form");
const updateForm = document.getElementById("edit-user-form");
const showAlert = document.getElementById("showAlert");
const addModal = new bootstrap.Modal(document.getElementById("addNewUserModal"));
const editModal = new bootstrap.Modal(document.getElementById("editUserModal"));
const tbody = document.querySelector("tbody");

// Add New User Ajax Request
addForm.addEventListener("submit", async (e) => {
  e.preventDefault();

  const formData = new FormData(addForm);
  formData.append("add", 1);

  if (addForm.checkValidity() === false) {
    e.preventDefault();
    e.stopPropagation();
    addForm.classList.add("was-validated");
    return false;
  } else {
    document.getElementById("add-user-btn").value = "Please Wait...";

    const data = await fetch("action.php", {
      method: "POST",
      body: formData,
    });
    const response = await data.text();
    showAlert.innerHTML = response;
    document.getElementById("add-user-btn").value = "Add User";
    addForm.reset();
    addForm.classList.remove("was-validated");
    addModal.hide();
    fetchAllUsers();
  }
});

// Fetch All Users Ajax Request
const fetchAllUsers = async () => {
  const data = await fetch("action.php?read=1", {
    method: "GET",
  });
  const response = await data.text();
  tbody.innerHTML = response;
};
fetchAllUsers();

// Edit User Ajax Request
tbody.addEventListener("click", (e) => {
  if (e.target && e.target.matches("a.editLink")) {
    e.preventDefault();
    let id = e.target.getAttribute("id");
    editUser(id);
  }
});

const editUser = async (id) => {
  const data = await fetch(`action.php?edit=1&id=${id}`, {
    method: "GET",
  });
  const response = await data.json();
  document.getElementById("id").value = response.id;
  document.getElementById("fname").value = response.first_name;
  document.getElementById("lname").value = response.last_name;
  document.getElementById("email").value = response.email;
  document.getElementById("phone").value = response.phone;
};

// Update User Ajax Request
updateForm.addEventListener("submit", async (e) => {
  e.preventDefault();

  const formData = new FormData(updateForm);
  formData.append("update", 1);

  if (updateForm.checkValidity() === false) {
    e.preventDefault();
    e.stopPropagation();
    updateForm.classList.add("was-validated");
    return false;
  } else {
    document.getElementById("edit-user-btn").value = "Please Wait...";

    const data = await fetch("action.php", {
      method: "POST",
      body: formData,
    });
    const response = await data.text();

    showAlert.innerHTML = response;
    document.getElementById("edit-user-btn").value = "Add User";
    updateForm.reset();
    updateForm.classList.remove("was-validated");
    editModal.hide();
    fetchAllUsers();
  }
});

// Delete User Ajax Request
tbody.addEventListener("click", (e) => {
  if (e.target && e.target.matches("a.deleteLink")) {
    e.preventDefault();
    let id = e.target.getAttribute("id");
    deleteUser(id);
  }
});

const deleteUser = async (id) => {
  const data = await fetch(`action.php?delete=1&id=${id}`, {
    method: "GET",
  });
  const response = await data.text();
  showAlert.innerHTML = response;
  fetchAllUsers();
};

8. Xử lý Yêu cầu API tìm nạp

Trong bước này, chúng tôi sẽ tạo một tệp mới trong thư mục gốc của thư mục dự án với tên hành động. php, Trong tệp này, chúng tôi sẽ xử lý tất cả các yêu cầu HTTP được gửi bởi ứng dụng khách và ở đây chúng tôi sẽ xử lý các phương thức đã được xác định trong db. tập tin php. Vì vậy, đối với điều này, chỉ cần sao chép các mã bên dưới và dán chúng vào hành động của bạn. tệp php và lưu

testInput($_POST['fname']);
    $lname = $util->testInput($_POST['lname']);
    $email = $util->testInput($_POST['email']);
    $phone = $util->testInput($_POST['phone']);

    if ($db->insert($fname, $lname, $email, $phone)) {
      echo $util->showMessage('success', 'User inserted successfully!');
    } else {
      echo $util->showMessage('danger', 'Something went wrong!');
    }
  }

  // Handle Fetch All Users Ajax Request
  if (isset($_GET['read'])) {
    $users = $db->read();
    $output = '';
    if ($users) {
      foreach ($users as $row) {
        $output .= '
                      ' . $row['id'] . '
                      ' . $row['first_name'] . '
                      ' . $row['last_name'] . '
                      ' . $row['email'] . '
                      ' . $row['phone'] . '
                      
                        Edit

                        Delete
                      
                    ';
      }
      echo $output;
    } else {
      echo '
              No Users Found in the Database!
            ';
    }
  }

  // Handle Edit User Ajax Request
  if (isset($_GET['edit'])) {
    $id = $_GET['id'];

    $user = $db->readOne($id);
    echo json_encode($user);
  }

  // Handle Update User Ajax Request
  if (isset($_POST['update'])) {
    $id = $util->testInput($_POST['id']);
    $fname = $util->testInput($_POST['fname']);
    $lname = $util->testInput($_POST['lname']);
    $email = $util->testInput($_POST['email']);
    $phone = $util->testInput($_POST['phone']);

    if ($db->update($id, $fname, $lname, $email, $phone)) {
      echo $util->showMessage('success', 'User updated successfully!');
    } else {
      echo $util->showMessage('danger', 'Something went wrong!');
    }
  }

  // Handle Delete User Ajax Request
  if (isset($_GET['delete'])) {
    $id = $_GET['id'];
    if ($db->delete($id)) {
      echo $util->showMessage('info', 'User deleted successfully!');
    } else {
      echo $util->showMessage('danger', 'Something went wrong!');
    }
  }

?>

Một số ảnh chụp màn hình của ứng dụng

Nếu bạn thích bài đăng này thì hãy chia sẻ bài đăng này với bạn bè của bạn. Nếu bạn muốn tìm hiểu về Thiết kế & Phát triển web nâng cao thì bạn cũng có thể theo dõi kênh YouTube của tôi

Nếu bạn đang gặp phải bất kỳ vấn đề nào liên quan đến hướng dẫn này thì bạn có thể bình luận về các vấn đề của mình, tôi sẽ cố gắng khắc phục chúng ngay khi có thể

Làm cách nào để tạo CRUD đơn giản trong PHP và MySQL Bootstrap?

Làm cách nào để thêm Bootstrap trong PHP?

Làm cách nào để tạo CRUD trong PHP và MySQL?

Làm cách nào để kết nối Bootstrap với cơ sở dữ liệu?