Download Code – PHP-Based Notes App Free Source Code using OOP, jQuery, and Bootstrap
PHP-Based Notes Application Source Code
Introduction
The Notes Application is a simple web-based project developed using PHP OOP (Object-Oriented Programming) and MySQL Database. It provides users with an online platform to store and manage their notes efficiently. The application features a clean and user-friendly interface designed with Bootstrap v5.
What is a Notes App?
A Notes Application is a PHP mini-project designed for storing and managing user notes. It allows users to:
- Create new notes
- Update existing notes
- View and delete notes
- Pin important notes to keep them at the top
This application does not require user registration or login, making it simple and easy to use.
Technologies Used
The Notes App is built using the following technologies:
- XAMPP (Local server)
- PHP v8.1
- MySQL Database
- HTML & CSS
- Bootstrap v5 Framework
- JavaScript (JS)
- jQuery & Ajax
- FontAwesome Icons
Features and Functionalities
Here are the main features of the Notes Application:
1. New Note Form Modal
- A pop-up form where users can add new notes.
2. Note List
- Displays all saved notes in chronological order (oldest to newest).
- Pinned notes appear at the top.
3. Edit Note Modal
- Allows users to edit and update note details.
4. View Note Modal
- A modal that displays detailed information about a note.
5. Pin/Unpin Note
- Users can pin important notes to keep them at the top of the list.
6. Delete Note
- Users can delete notes permanently.
- A confirmation message prevents accidental deletion.
How to Download and Run the Notes App
Requirements
To run this project, you need:
- A local web server like XAMPP.
- The source code (provided as a zip file).
Installation Steps
- Start XAMPP and enable Apache and MySQL.
- Extract the downloaded source code file.
- Move the extracted folder into the htdocs directory of XAMPP.
- Create a new database in phpMyAdmin (http://localhost/phpmyadmin).
- Name the database notes_db.
- Import the SQL file (found in the “database” folder).
- Open the Notes Application in a browser using http://localhost/php-notes/.
Conclusion
This PHP Notes App is a free and open-source project created for educational purposes. You can download, modify, and customize it as per your needs. Hope this project helps you in learning PHP and MySQL!
index PHP
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<?php session_start(); require_once("Master.php"); $master = new Master(); $page = isset($_GET['page']) ? $_GET['page'] : "home"; ?> <!DOCTYPE html> <html lang="en"> <?php include_once("inc/header.php") ?> <body> <main> <?php include_once("inc/topbar.php") ?> <div id="main-wrapper"> <div class="container px-5 my-3" > <script> start_loader() </script> <?php if(isset($_SESSION['message'])): ?> <?php if(isset($_SESSION['message']['success'])): ?> <div class="mb-3 alert alert-success rounded-0"> <?= $_SESSION['message']['success'] ?> </div> <?php endif; ?> <?php if(isset($_SESSION['message']['error'])): ?> <div class="mb-3 alert alert-danger rounded-0"> <?= $_SESSION['message']['error'] ?> </div> <?php endif; ?> <?php if(isset($_SESSION['message']['info'])): ?> <div class="mb-3 alert alert-info rounded-0"> <?= $_SESSION['message']['info'] ?> </div> <?php endif; ?> <?php if(isset($_SESSION['message']['warning'])): ?> <div class="mb-3 alert alert-warning rounded-0"> <?= $_SESSION['message']['warning'] ?> </div> <?php endif; ?> <?php unset($_SESSION['message']) ?> <?php endif; ?> <?php if(is_file("pages/{$page}.php")): ?> <?php include_once("pages/{$page}.php") ?> <?php else: ?> <?php include_once("pages/404.php") ?> <?php endif; ?> </div> </div> <?php include_once("inc/footer.php") ?> </main> <div class="modal fade rounded-0" id="FormModal" tabindex="-1" data-bs-backdrop='static'> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable rounded-0"> <div class="modal-content rounded-0"> <div class="modal-header rounded-0"> <h5 class="modal-title"></h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body rounded-0"> </div> <div class="modal-footer rounded-0"> <button type="submit" form="" class="btn btn-primary btn-sm submit-btn rounded-0">Save</button> <button type="button" class="btn btn-secondary btn-sm rounded-0" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade rounded-0" id="ViewModal" tabindex="-1" data-bs-backdrop='static'> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable rounded-0"> <div class="modal-content rounded-0"> <div class="modal-header rounded-0"> <h5 class="modal-title"></h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body rounded-0"> </div> <div class="modal-footer rounded-0"> <button type="button" class="btn btn-secondary btn-sm rounded-0" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> </body> </html> |
notes_db SQL
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
-- phpMyAdmin SQL Dump -- version 5.1.3 -- https://www.phpmyadmin.net/ -- -- Host: 127.0.0.1 -- Generation Time: Jan 23, 2023 at 09:03 AM -- Server version: 10.4.24-MariaDB -- PHP Version: 8.1.5 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; START TRANSACTION; SET time_zone = "+00:00"; -- -- Database: `notes_db` -- -- -------------------------------------------------------- -- -- Table structure for table `notes` -- CREATE TABLE `notes` ( `id` int(11) NOT NULL, `title` text NOT NULL, `description` text DEFAULT NULL, `pinned` tinyint(1) NOT NULL DEFAULT 0, `created_at` datetime NOT NULL DEFAULT current_timestamp(), `updated_at` datetime DEFAULT NULL ON UPDATE current_timestamp() ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- -- Dumping data for table `notes` -- INSERT INTO `notes` (`id`, `title`, `description`, `pinned`, `created_at`, `updated_at`) VALUES (1, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus egestas tortor non ultrices. Sed aliquam eleifend nisl vel gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.', 1, '2023-01-23 14:40:47', '2023-01-23 15:24:01'), (2, 'Nunc vitae tincidunt turpis', 'Nunc vitae tincidunt turpis, vitae ultrices nisl. Donec ullamcorper convallis consequat. Nam et dui imperdiet libero condimentum laoreet. Integer at dui elementum, congue nulla sollicitudin, bibendum nunc. Ut vehicula purus ut ante fermentum, ut euismod lectus ultricies. Vivamus tincidunt a elit ut dignissim.', 0, '2023-01-23 14:42:04', '2023-01-23 15:33:22'), (3, 'Sample 101', 'Aliquam id odio metus. Aliquam molestie pulvinar quam, et commodo arcu porta ut. Cras ultricies semper dolor sed pretium. Aliquam semper, quam quis tempus posuere, tellus leo interdum mi, eu varius lectus dui nec dui. Integer sit amet sem rhoncus risus elementum gravida. Curabitur varius erat non augue accumsan, et tincidunt diam dapibus.', 0, '2023-01-23 15:24:21', '2023-01-23 15:24:25'); -- -- Indexes for dumped tables -- -- -- Indexes for table `notes` -- ALTER TABLE `notes` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `notes` -- ALTER TABLE `notes` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6; COMMIT; |