Creating a Wishlist app in PHP and MySQL without the need for login and registration involves building a straightforward yet efficient platform for users to manage their desires seamlessly. Utilizing PHP for server-side scripting and MySQL for database management, the app allows users to instantly access and use the application without the complexities of account creation.
The app design encompasses wishlist creation, item addition, viewing, and deletion functionalities. Users can easily generate wishlists, adding items with names. A user-friendly interface facilitates smooth navigation. The MySQL database efficiently stores wishlist and item information, ensuring data integrity and retrieval speed.
Follow This Step to Create Wishlist App
1-Creating Database
- Open PHPMyAdmin in your Browser
- Click on Database Tab Display on Topside
- Give the Database name “wishlist”.
- After Creating 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 5.2.1 -- https://www.phpmyadmin.net/ -- -- Host: 127.0.0.1 -- Generation Time: Feb 04, 2024 at 05:25 PM -- Server version: 10.4.32-MariaDB -- PHP Version: 8.2.12 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `wishlist` -- -- -------------------------------------------------------- -- -- Table structure for table `tbl_wishlist` -- CREATE TABLE `tbl_wishlist` ( `tbl_wishlist_id` int(11) NOT NULL, `name` varchar(255) NOT NULL, `wish` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; -- -- Dumping data for table `tbl_wishlist` -- INSERT INTO `tbl_wishlist` (`tbl_wishlist_id`, `name`, `wish`) VALUES (49, 'Book List', 'English'), (50, 'Book List', 'Science '), (51, 'Book List', 'Geography '), (52, 'Book List', 'History'), (53, 'Grocery Item', 'Potato'), (54, 'Grocery Item', 'Peanuts'), (55, 'Grocery Item', 'Multi Grain '), (56, 'Grocery Item', 'Oil'), (57, 'Travel List', 'India'), (58, 'Travel List', 'Londan'), (59, 'Travel List', 'America'), (60, 'Travel List', 'Israil '), (61, 'Kitchen appliances', 'Refrigerator'), (62, 'Kitchen appliances', 'Oven'), (63, 'Kitchen appliances', 'Microwave Oven:'), (64, 'Kitchen appliances', 'Blender'), (69, 'Learning Process', 'HTML'), (70, 'Learning Process', 'CSS'), (71, 'Learning Process', 'Javascript'), (72, 'Learning Process', 'PHP'); -- -- Indexes for dumped tables -- -- -- Indexes for table `tbl_wishlist` -- ALTER TABLE `tbl_wishlist` ADD PRIMARY KEY (`tbl_wishlist_id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tbl_wishlist` -- ALTER TABLE `tbl_wishlist` MODIFY `tbl_wishlist_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=73; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
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 “wishlist”.
- After Creating Database Open it.
- Click on Import Tab on Top area
- You can Find db folder in the Downloaded source code where find wishlist.sql file then Select it.
- Then Click on Go.
2- Creating Database Connection
After import Database File then next step is creating a database connection using php copy the below code and save it is as “conn.php” under conn folder.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "wishlist";
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname;", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo "Error: " . $e->getMessage();
}
3 – Creating Index page
During this step, we’ll be developing index page that feature a user-friendly form for adding wishlists. This form allows users to seamlessly input their desired items. Simultaneously, the page will dynamically display the wishlists that have been added, providing users with instant visibility into their entries.create index page into your project folder then copy below code and paste into index page .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wishlist App</title>
<!-- Boostrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main">
<div class="wishlist-container">
<div class="card-wishlist">
<div class="container-header row">
<h3>List of Wishlist</h3>
<button type="button" class="btn btn-success ml-auto" data-toggle="modal" data-target="#addWishlistModal">Add Wishlist</button>
</div>
<!-- Modal -->
<div class="modal fade" id="addWishlistModal" tabindex="-1" aria-labelledby="addWishlist" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addWishlist">Add Wishlist</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="POST" action="includes/add-wish.php">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group wishlist-input">
<label for="wish">Wishlist:</label>
<input type="text" class="form-control" id="wish" name="wish[]">
</div>
<button type="button" class="btn btn-primary form-control" onclick="addWishlist()">+ Add Wishlist</button>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<hr>
<div class="cards">
<?php
include('./conn/conn.php');
$stmt = $conn->prepare("SELECT * FROM tbl_wishlist");
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Group the results by name
$groupedWishes = [];
foreach ($result as $row) {
$name = $row['name'];
$wishes = $row['wish'];
if (!isset($groupedWishes[$name])) {
$groupedWishes[$name] = [];
}
$groupedWishes[$name][] = $wishes;
}
// Display cards for each person
foreach ($groupedWishes as $name => $wishesList) {
?>
<div class="card" style="width: 18rem; margin-bottom: 20px;">
<div class="card-body">
<div class="buttons">
<button onclick="deleteWishlist('<?= $name ?>')">×</button>
</div>
<h5 class="card-title"><?php echo $name; ?></h5>
<p class="card-text">Here are the wishlist:</p>
</div>
<ul class="list-group list-group-flush">
<?php
foreach ($wishesList as $wish) {
echo "<li class='list-group-item'>$wish</li>";
}
?>
</ul>
</div>
<?php
}
?>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
4 – Styling index page content
Next, we’ll style the form and other elements using CSS for a polished appearance. you can create a css folder under project then create s style.css after that copy paste the below code
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif !important;
}
body {
/* background-image: url('https://img.freepik.com/free-photo/hand-writing-notebook-near-hot-beverage_23-2148318586.jpg?w=900&t=st=1704505944~exp=1704506544~hmac=509bd9db40e08225ffee4ab36b037a78aafbd55a7a388cebd97c13075570bc64'); */
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.main {
display: flex;
justify-content: center;
align-items: center;
height: 94vh;
}
.wishlist-container {
padding: 40px;
background-color: rgba(255, 255, 255, 0.6);
width: 70%;
height: 800px;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.container-header h3 {
font-weight: bold !important;
}
.cards {
display: flex;
justify-content: start;
flex-wrap: wrap;
}
.card {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-radius: 10px;
position: relative;
flex-direction: column;
margin: 5px;
}
.card-body {
flex: none !important ;
min-height: 1px;
padding: 1.25rem;
}
.card h5 {
font-weight: bold !important;
}
.modal-dialog {
display: flex;
justify-content: center;
align-items: center;
height: 94vh;
}
.buttons {
position: absolute;
right: 10px;
top: 10px;
}
.buttons button {
width: 20px;
font-size: 25px;
background-color: transparent;
border: none;
margin: 3px;
color: red;
}
5 – Validate Elements using Javascript
Now, we’ll validate the form and perform other tasks using JavaScript. Create a “js” folder in the project and add a “script.js” file. Copy and paste the provided code.
function addWishlist() {
const wishlistInput = document.querySelector('.wishlist-input input');
const wishlistInputClone = wishlistInput.cloneNode(true);
wishlistInputClone.value = '';
wishlistInputClone.style.marginTop = '10px';
document.querySelector('.wishlist-input').appendChild(wishlistInputClone);
}
function deleteWishlist(name) {
if (confirm('Do you want to delete this wishlist?')) {
window.location.href = "http://localhost/wishlist/includes/delete-wish.php?name=" + name;
}
}
6 – Add Data Into Database using PHP
In this step, we’ll use PHP to add data to the database. Create an “includes” folder in the project, and then add an “add-wish.php” file. Copy and paste the provided code.
<?php
include("../conn/conn.php");
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_POST['name'], $_POST['wish'])) {
$name = $_POST['name'];
$wishes = $_POST['wish'];
try {
$conn->beginTransaction();
foreach ($wishes as $wish) {
$stmt = $conn->prepare("INSERT INTO tbl_wishlist (name, wish) VALUES (:name, :wish)");
$stmt->bindParam(":name", $name, PDO::PARAM_STR);
$stmt->bindParam(":wish", $wish, PDO::PARAM_STR);
$stmt->execute();
}
$conn->commit();
echo "
<script>
alert('Wishlist added successfully!');
window.location.href = 'http://localhost/wishlist/index.php';
</script>
";
} catch (PDOException $e) {
$conn->rollBack();
echo "
<script>
alert('Error: " . $e->getMessage() . "');
window.location.href = 'http://localhost/wishlist/index.php';
</script>
";
}
} else {
echo "
<script>
alert('Please fill in all fields!');
window.location.href = 'http://localhost/wishlist/index.php';
</script>
";
}
}
?>
7 – Dalete Data using PHP
Now, we’ll delete data using PHP. under includes folder in the project add a “delete-wish.php” file. Copy and paste the provided code.
<?php
include ("../conn/conn.php");
if (isset($_GET['name'])) {
$name = $_GET['name'];
try {
$stmt = $conn->prepare("DELETE FROM tbl_wishlist WHERE name = :name");
$stmt->bindParam('name', $name, PDO::PARAM_STR);
$stmt->execute();
echo "
<script>
alert('Wishlist Deleted Sucessfully!');
window.location.href = 'http://localhost/wishlist/index.php';
</script>
";
exit();
} catch (PDOException $e) {
echo "Error: " . $e->getMessage();
}
}
?>
Now Run your project on browser . if any problem with this Download the Complete source code in zip Formate by clicking the below button Download Source Code otherwise you can send Comment.
Conclusion
In conclusion, creating a Wishlist app in PHP and MySQL involves developing a streamlined platform for users to effortlessly manage their desires. By prioritizing simplicity, immediate accessibility, and efficient wishlist management, this app provides a user-friendly experience. The integration of PHP for server-side scripting and MySQL for database management ensures data integrity and retrieval speed. With features like wishlist creation, item addition, dynamic display, and form validation using JavaScript, the app caters to users seeking a quick and intuitive solution. The elimination of login and registration further enhances simplicity, making it an ideal choice for those valuing efficiency in wishlist management. Through careful styling using CSS and organized PHP scripts for adding and deleting data, the Wishlist app delivers a concise yet robust solution for users to curate and monitor their desired items seamlessly.