PHP और MySQL डेटाबेस का उपयोग करके टू-डू सूची एप्लिकेशन

एक साधारण टूडू सूची एप्लिकेशन जो उपयोगकर्ता द्वारा सबमिट किए गए कार्यों को एक फॉर्म में लेता है और उन्हें एक MySQL डेटाबेस में सहेजता है। कार्यों को डेटाबेस से भी पुनर्प्राप्त किया जाता है और प्रत्येक कार्य के बगल में एक डिलीट बटन के साथ वेब पेज पर प्रदर्शित किया जाता है। जब डिलीट बटन पर क्लिक किया जाता है, तो कार्य डेटाबेस से हटा दिया जाता है।

इस ट्यूटोरियल में हम यही निर्माण करेंगे।

हमेशा की तरह, चलिए अपना डेटाबेस बनाते हैं। टूडू . नामक डेटाबेस बनाएं और इसमें, कार्य नामक तालिका बनाएं। कार्य तालिका में केवल दो फ़ील्ड हैं:

आईडी - इंट(10)
कार्य - वर्कर(255)

अब दो फ़ाइलें बनाएं:

index.php
style.css

उन्हें एक टेक्स्ट एडिटर में खोलें और निम्न कोड को index.php फ़ाइल के अंदर पेस्ट करें:

<!DOCTYPE html>
<html>
<head>
	<title>ToDo List Application PHP and MySQL</title>
</head>
<body>
	<div class="heading">
		<h2 style="font-style: 'Hervetica';">ToDo List Application PHP and MySQL database</h2>
	</div>
	<form method="post" action="index.php" class="input_form">
		<input type="text" name="task" class="task_input">
		<button type="submit" name="submit" id="add_btn" class="add_btn">Add Task</button>
	</form>
</body>
</html>

यदि आप अपना पृष्ठ अब ब्राउज़र में देखते हैं, तो यह कुछ इस तरह दिखता है:

आइए स्टाइल जोड़ें। सीधे <शीर्षक> टैग के तहत, स्टाइलशीट फ़ाइल लोड करने के लिए इस लाइन को जोड़ें:

<link rel="stylesheet" type="text/css" href="style.css">

हमारे द्वारा पहले बनाई गई style.css फ़ाइल खोलें और उसमें यह स्टाइलिंग कोड पेस्ट करें:

.heading{
	width: 50%;
	margin: 30px auto;
	text-align: center;
	color: 	#6B8E23;
	background: #FFF8DC;
	border: 2px solid #6B8E23;
	border-radius: 20px;
}
form {
	width: 50%; 
	margin: 30px auto; 
	border-radius: 5px; 
	padding: 10px;
	background: #FFF8DC;
	border: 1px solid #6B8E23;
}
form p {
	color: red;
	margin: 0px;
}
.task_input {
	width: 75%;
	height: 15px; 
	padding: 10px;
	border: 2px solid #6B8E23;
}
.add_btn {
	height: 39px;
	background: #FFF8DC;
	color: 	#6B8E23;
	border: 2px solid #6B8E23;
	border-radius: 5px; 
	padding: 5px 20px;
}

table {
    width: 50%;
    margin: 30px auto;
    border-collapse: collapse;
}

tr {
	border-bottom: 1px solid #cbcbcb;
}

th {
	font-size: 19px;
	color: #6B8E23;
}

th, td{
	border: none;
    height: 30px;
    padding: 2px;
}

tr:hover {
	background: #E9E9E9;
}

.task {
	text-align: left;
}

.delete{
	text-align: center;
}
.delete a{
	color: white;
	background: #a52a2a;
	padding: 1px 6px;
	border-radius: 3px;
	text-decoration: none;
}

अगर हम अपने ब्राउज़र को अभी रिफ्रेश करते हैं, तो हमें यह मिलता है:

अब हम सबमिट किए गए कार्य को डेटाबेस में सहेजने के लिए कोड लिखते हैं।

index.php फ़ाइल के शीर्ष पर, पहली पंक्ति से पहले, यह कोड जोड़ें:

<?php 
    // initialize errors variable
	$errors = "";

	// connect to database
	$db = mysqli_connect("localhost", "root", "", "todo");

	// insert a quote if submit button is clicked
	if (isset($_POST['submit'])) {
		if (empty($_POST['task'])) {
			$errors = "You must fill in the task";
		}else{
			$task = $_POST['task'];
			$sql = "INSERT INTO tasks (task) VALUES ('$task')";
			mysqli_query($db, $sql);
			header('location: index.php');
		}
	}	

	// ...

यह क्या करता है, यदि उपयोगकर्ता सबमिट बटन पर क्लिक करता है, तो कार्य डेटाबेस में सहेजा जाता है। हालांकि यदि फ़ॉर्म में कोई कार्य नहीं भरा गया था, तो $errors चर का मान 'आपको कार्य भरना होगा' पर सेट है। लेकिन यह प्रदर्शित नहीं होता है। आइए इसे प्रदर्शित करते हैं।

आइए इस कोड को फॉर्म के अंदर पेस्ट करें। सीधे

टैग के तहत। इस तरह:

<?php if (isset($errors)) { ?>
	<p><?php echo $errors; ?></p>
<?php } ?>

यदि हम फॉर्म को खाली मान के साथ जमा करने का प्रयास करते हैं, तो हमें यह मिलता है:

अब तक हमारा ऐप डेटाबेस में कार्यों को सहेजता है लेकिन उन्हें प्रदर्शित नहीं करता है।

हमें जो करना है वह उन्हें डेटाबेस से पुनर्प्राप्त करना है और फिर उन्हें प्रदर्शित करना है।

index.php फ़ाइल खोलें और फ़ॉर्म के बंद होने के तुरंत बाद इस कोड को पेस्ट करें

टैग:

//...
// </form>

<table>
	<thead>
		<tr>
			<th>N</th>
			<th>Tasks</th>
			<th style="width: 60px;">Action</th>
		</tr>
	</thead>

	<tbody>
		<?php 
		// select all tasks if page is visited or refreshed
		$tasks = mysqli_query($db, "SELECT * FROM tasks");

		$i = 1; while ($row = mysqli_fetch_array($tasks)) { ?>
			<tr>
				<td> <?php echo $i; ?> </td>
				<td class="task"> <?php echo $row['task']; ?> </td>
				<td class="delete"> 
					<a href="index.php?del_task=<?php echo $row['id'] ?>">x</a> 
				</td>
			</tr>
		<?php $i++; } ?>	
	</tbody>
</table>

यदि हम प्रपत्र में कोई कार्य दर्ज करते हैं और सबमिट बटन दबाते हैं, तो हमें यह मिलता है:

अच्छा!

आइए हमारे डिलीट बटन को काम करते हैं। पृष्ठ के शीर्ष पर, यदि डेटाबेस में कार्य को सहेजने वाले ब्लॉक के बाद, यह कोड जोड़ें:


// delete task
if (isset($_GET['del_task'])) {
	$id = $_GET['del_task'];

	mysqli_query($db, "DELETE FROM tasks WHERE id=".$id);
	header('location: index.php');
}

?>

बस इतना ही। यदि हम किसी कार्य के सामने अब छोटे 'x' बटन पर क्लिक करते हैं, तो वह कार्य डेटाबेस में हटा दिया जाता है।

निष्कर्ष

आशा है कि यह आपकी मदद करता है। अपने कौशल को और बढ़ाने के लिए मैं आपको इस ऐप में एक विशेषता जोड़ने की सलाह दूंगा, वह है एडिट फीचर को जोड़ना, जहां पोस्ट बनने के बाद भी अपडेट किया जा सकता है। संकेत:CRUD पर मेरे ट्यूटोरियल का अनुसरण करें: MySQL डेटाबेस के साथ पोस्ट बनाएं, संपादित करें, अपडेट करें और हटाएं

धन्यवाद :डी