Notes App using PHP (OOP), jQuery, and Bootstrap Free Source Code


This is a simple/mini-project entitled Notes Application. It is a web application developed using PHP OOP and MySQL Database. The main goal of this application is to provide the end-user with an online platform to store and manage their notes. It has a simple and pleasant user interface with the help of Bootstrap v5 Framework. The application consists of user-friendly features and functionalities.

What is Notes App?

Note Application is a PHP mini project that was mainly built for handling or storing the user's notes. It allows the user to create new, update existing, view, and delete noted data. It is straightforward and can be accessed without any registration or login processes. It also has a pin/unpin functionality that allows the user to pin specific notes to the top of the list.

What are the Technologies used for Developing the Notes App?

The Note Application was developed with the following technologies:

  • PHP v8.1
  • MySQL Database
  • HTML
  • CSS
  • Bootstrap v5 Framework
  • JavaScript (JS)
  • jQuery
  • Ajax
  • Fontawesome Icons

What are the Features and Functionalities of the Notes App?

Here is the list of the features and functionalities of this Note Application:

  • New Note Form Modal
    • A modal where users can create or add new note data.
  • Note List
    • Listing all the notes created and stored on the database. Notes are listed from old to new and pinned notes are listed first.
  • Edit Note Modal
    • A modal where the user can edit the note details
  • View Modal
    • A modal that shows the detailed information of the note.
  • Pin/Unpin Note
    • An action for pinning the note to display it on the top of the list.
  • Delete Note
    • An action for removing the note from the list and deleting the data from the database. This action comes with a confirmation feature to prevent unintentional data loss.


Here are the Snapshots of the Note Application.

Page Interface/Note List

Simple Note Application using PHP

New Note Form Modal

Simple Note Application using PHP

Edit Note Form Modal

Simple Note Application using PHP

View Note Modal

Simple Note Application using PHP

The Note Application Project in PHP source code zip file is provided on this website and is free to download. Feel free to download and modify the application the way you desire and to meet your own requirements. Note, this application was mainly developed for educational purposes only.

How to Run?


  • Download and Install any local web server such as XAMPP.
  • Download the provided source code zip file. (download button is located below)

System Installation/Setup

  1. Open your XAMPP Control Panel and start Apache and MySQL.
  2. Extract the downloaded source code zip file.
  3. Copy the extracted source code folder and paste it into the XAMPP's "htdocs" directory.
  4. Browse the PHPMyAdmin in a browser. i.e. http://localhost/phpmyadmin
  5. Create a new database named notes_db.
  6. Import the provided SQL file. The file is known as notes_db.sql located inside the database folder.
  7. Browse the Online Food Ordering System V2 in a browser. i.e. http://localhost/php-notes/

That's it! I hope this Simple Note Application using PHP Project will help you with what you are looking for and that you'll find something useful from the source code itself for your current and future PHP Projects. Feel free to leave a comment below for any queries or questions regarding this mini-project.

Explore this website for more Tutorials and Free Source Codes.

Enjoy :)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.


1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.


Submitted byoleteacheron Tue, 01/24/2023 - 07:24

Great share!

If a search function was included to locate notes, would make even more useful.

As always, we appreciate SQLite versions that we can run in the classroom.

Maybe a tutorial on converting MySQL projects like this to SQLite?

Keep the great shares coming!

Add new comment