PHP-Based Notes App | Free Source Code using OOP, jQuery, and Bootstrap

Projects Inventory

6 months ago

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

<?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>

<?php

session_start();

require_once("Master.php");

$master = new Master();

$page = isset($_GET['page']) ? $_GET['page'] : "home";

<!DOCTYPE html>

<?php include_once("inc/header.php") ?>

<body>

<main>

<?php include_once("inc/topbar.php") ?>

start_loader()

</script>

<?php if(isset($_SESSION['message'])): ?>

<?php if(isset($_SESSION['message']['success'])): ?>

<?= $_SESSION['message']['success'] ?>

</div>

<?php endif; ?>

<?php if(isset($_SESSION['message']['error'])): ?>

<?= $_SESSION['message']['error'] ?>

</div>

<?php endif; ?>

<?php if(isset($_SESSION['message']['info'])): ?>

<?= $_SESSION['message']['info'] ?>

</div>

<?php endif; ?>

<?php if(isset($_SESSION['message']['warning'])): ?>

<?= $_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>

<?php include_once("inc/footer.php") ?>

</main>

</div>

</div>

<button type="button" class="btn btn-secondary btn-sm rounded-0" data-bs-dismiss="modal">Close</button>

</div>

</div>

</div>

<button type="button" class="btn btn-secondary btn-sm rounded-0" data-bs-dismiss="modal">Close</button>

</div>

</body>

</html>

notes_db SQL

-- 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;

-- 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;

Download Code – PHP-Based Notes App Free Source Code using OOP, jQuery, and Bootstrap

PHP-Based Notes Application Source Code

Introduction

What is a Notes App?

Technologies Used

Features and Functionalities

1. New Note Form Modal

2. Note List

3. Edit Note Modal

4. View Note Modal

5. Pin/Unpin Note

6. Delete Note

How to Download and Run the Notes App

Requirements

Installation Steps

Conclusion

index PHP

notes_db SQL

Related Posts: