Create Notes App using PHP (OOP) , Bootstrap and jQuery

0 8,684

A notes app using object-oriented programming (OOP) in PHP would be a web-based application that allows users to create, read, update, and delete notes through a web browser. The application would be built using the OOP features of the PHP programming language, such as classes, objects, and inheritance. The app would use classes to represent the different components of the application, such as the user, the notes, and the database. These classes would contain methods that perform the operations related to the notes, such as creating, reading, updating, and deleting notes.

The data validation, processing, and storage would be handled by methods in the classes which would encapsulate the data and methods together, this would make the code more organized, maintainable, and easy to understand. The app would use a database to store the notes, and a PHP Data Object (PDO) would be used to interact with the database. The user interface would be generated using HTML, Bootstrap, and jQuery, and the PHP code would handle the server-side logic, such as processing form submissions and rendering the pages.

Create Notes App using PHP (OOP) , Bootstrap and jQuery

Features of Notes APP

  • Create notes: Users can create new notes and add text them.
  • Note List: Listing all the notes created and stored on the database
  • Edit notes: Users can edit existing notes and make changes.
  • Delete notes: Users can delete notes that they no longer need.
  • View Note: User can shows the detailed information of the note in modal popup.
  • Pin/Unpin Note: User can pin the note to display it on the top of the list.

1-Creating Database

  • Open PHPMyAdmin in your Browser
  • Click on Database Tab Display on Topside
  • Give the Database name “note”.
  • After Creating the Database Open it.
  • Click on SQL Tab on Top area
  • Copy the Below Source Code and paste it.
  • Then Click on Go.
-- phpMyAdmin SQL Dump
-- version 4.9.1
-- https://www.phpmyadmin.net/
--
-- Host: localhost
-- Generation Time: Jan 24, 2023 at 01:22 PM
-- Server version: 8.0.18
-- PHP Version: 7.3.11
SET 
  SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET 
  AUTOCOMMIT = 0;
START TRANSACTION;
SET 
  time_zone = "+00:00";
--
-- Database: `note`
--
-- --------------------------------------------------------
--
-- Table structure for table `notes`
--
CREATE TABLE `notes` (
  `id` int(11) NOT NULL, 
  `title` text NOT NULL, 
  `description` text, 
  `color` text NOT 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 COLLATE = utf8mb4_0900_ai_ci;
--
-- Dumping data for table `notes`
--
INSERT INTO `notes` (
  `id`, `title`, `description`, `color`, 
  `pinned`, `created_at`, `updated_at`
) 
VALUES 
  (
    8, 'What is Lorem Ipsum ?', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.', 
    'primary', 0, '2023-01-24 00:33:30', 
    '2023-01-24 18:08:17'
  ), 
  (
    9, 'Why do we use it?', 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \\\\\\\\\\\\\\\'Content here, content here\\\\\\\\\\\\\\\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \\\\\\\\\\\\\\\'lorem ipsum\\\\\\\\\\\\\\\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).', 
    'warning', 0, '2023-01-24 00:35:06', 
    '2023-01-24 18:09:01'
  ), 
  (
    10, 'Where does it come from.', 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \\\\\\\"de Finibus Bonorum et Malorum\\\\\\\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \\\\\\\"Lorem ipsum dolor sit amet..\\\\\\\", comes from a line in section 1.10.32.', 
    'success', 0, '2023-01-24 00:35:18', 
    '2023-01-24 18:09:06'
  ), 
  (
    11, 'Where can I get some?', 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\\\\\\\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\\\\\\\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.', 
    'dark', 1, '2023-01-24 00:35:36', 
    '2023-01-24 18:22:45'
  ), 
  (
    12, 'Where does it come from?', 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\\\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\\\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.', 
    '', 0, '2023-01-24 00:35:36', '2023-01-24 00:36:39'
  ), 
  (
    13, 'Why do we use it?', 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\\\\\\\\\\\\\\\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\\\\\\\\\\\\\\\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.', 
    'dark', 0, '2023-01-24 00:35:36', 
    '2023-01-24 18:23:14'
  ), 
  (
    14, 'Where does it come from?', 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\\\\\\\\\\\\\\\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\\\\\\\\\\\\\\\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.', 
    'danger', 0, '2023-01-24 00:35:36', 
    '2023-01-24 18:22:52'
  ), 
  (
    15, 'Why do we use it?', 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\\\\\\\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\\\\\\\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.', 
    'info', 0, '2023-01-24 00:35:36', 
    '2023-01-24 18:22:59'
  ), 
  (
    28, 'Why do we use it?', 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.', 
    '', 0, '2023-01-24 00:35:36', '2023-01-24 18:19:52'
  );
--
-- 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 = 29;
COMMIT;

 

OR Import DB File

After Downloading the source code extract it in your root folder.

  • Open PHPMyAdmin in your Browser
  • Click on Database Tab Display on Topside
  • Give the Database name “note”.
  • After Creating the Database Open it.
  • Click on Import Tab on Top area
  • You can Find the Database folder in  Downloaded source code where find note.sql file then Select it.
  • Then Click on Go.

2- Creating Database Connection

A PHP MySQL database connection refers to the process of connecting to a MySQL database from a PHP script. This is typically done using the MySQLi or PDO extension in PHP. The MySQLi extension provides an object-oriented interface, while PDO (PHP Data Objects) provides a data-access abstraction layer.

Goto master.php file and see the database connection  code

$this->conn = new mysqli("localhost", "root", "mysql", "note");

Download Source Code

Running PHP code in a localhost environment allows you to test and debug your PHP scripts on your own computer before deploying them to a live web server. To run PHP code on a localhost, you will need to install a web server software, such as Apache or Nginx, and a PHP interpreter on your computer.

One of the most popular way to set up a localhost environment is to use XAMPP. XAMPP is a free, open-source package that includes Apache, MySQL, PHP and Perl. Once you have XAMPP installed, you can start the Apache and MySQL modules using the XAMPP Control Panel, and then you can put your PHP files in the “htdocs” folder located inside the XAMPP installation directory. Once you have done that, you can access your PHP files in a web browser by typing “http://localhost/note” in the URL bar.

Alternatively, you can use other software that includes a built-in web server, such as MAMP for Mac or WAMP for Windows, which can be used in a similar way as XAMPP.

It’s important to note that when running PHP code on a localhost, you will not have access to the same server-side resources as you would on a live web server, such as a mail server or a database server. You will need to configure those separately on your localhost environment.

Leave A Reply

Your email address will not be published.