PHP এবং MySql বেসিক [পর্ব-১৩] :: Bootstrap CSS ফ্রেমওয়ার্ক ব্যবহার করে PHP ও MySQL দিয়ে একটি অনলাইন ডিকশোনারী বা শব্দকোষ তৈরী – ৩

বিমমিল্লাহির রাহমানীর রাহীম

প্রথমে সবাইকে আমার সালাম এবং আন্তরিক শুভেচ্ছা জানিয়ে শুরু করছি আমার আজকের টিউন। আশা করছি আপনারা সবাই আল্লাহর রহমতে ভালোই আছেন।  এবার আপনাদের জন্য PHP এবং Mysql এর বেসিক শেখার জন্য আমি কয়েক পর্বের টিউন নিয়ে হাজির হয়েছি । আজকের ১৩ তম পর্বে আমি দেখাবো কিভাবে Bootstrap CSS ফ্রেমওয়ার্ক ব্যবহার করে PHP ও MySQL ব্যবহার করে আপনি সুন্দর একটি ডিকশোনারী ওয়েব অ্যাপ বানাবেন। আমি ৩ টি পর্বে আপনাদেরকে কোডগুলো বুঝিয়ে দিবো। আজকে এর শেষ পর্ব। আশা করি আপনারা আমার সকল টিউনেই সাথে থাকবেন। টিউনে যদি কোন প্রকার ভূল হয় বা বুঝতে অসুবিধা হয় তবে সরাসরি টিউমেন্টের মাধ্যমে আমাকে জানাবেন। সরাসরি টিউনে চলে যাচ্ছি :

 

১। add_success.php  :

এখানে আমাদের add.php থেকে আগত ডাটাগুলো ডাটাবেইজে ইনপুট হবে। add_success.php নামে একটি php ফাইল তৈরী করুন এবং নিচের কোডগুলো দিয়ে ফাইলটি সেভ করে নিন।

<!DOCTYPE html>
<html>
<head>
<title>Online Bangla Dictionary by Atikur Rahman SHOHEL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<body>
<table align="center">
<tr><td width="550">
<h2>Online Bangla Dictionary</h2>
<span class="label label-warning">v.1.0</span>
<p align="right">
<a href="index.php"><button class="btn btn-info" type="button">Main Page</button></a>
<a href="add.php"><button class="btn" type="button">Add New</button></a>
<a href="edit.php"><button class="btn btn-success" type="button" align="right">Delete</button></p></a>
<div class="alert alert-info">Any Coding Wrong ? <a href="http://facebook.com/atikurmsps"><b>Contact Me.</b></a></div>
<hr>
<?php
$con=mysqli_connect("localhost","root","","techtunes");
$eng=$_POST['eng'];
$bnl=$_POST['bnl'];
$pop=$_POST['pop'];
$sql="INSERT INTO dictionary VALUES ('','$eng','$bnl','$pop')";
if (!mysqli_query($con,$sql))
{
die('Error: ' . mysqli_error($con));
}
echo "<div class='alert alert-success'><i class='icon-ok'></i> $eng Added Successfully</div>";
?>
<td><tr>
</table>
</body>
</html>

এখানে আমাদের post মেথডে আগত ডাটাগুলো ইনপুট হবে। id সয়ংক্রিয় ভাবে বসে যাবে কারণ, আমরা ডাটাবেইজে id কলামে auto ব্যবহার করেছি। ডাটা ইনপুট নিয়ে আমি আগের টিউনেই আলোচনা করেছি।

 

Edit.php

আমরা এখানে টেবিল আকারে ৪ টি কলাম ব্যবহার করবো। এগুলো id, word, bangla, parts of speech এবং Edit। নিচের কোডগুলো প্রবেশ করিয়ে ফাইলটি সেভ করে নিন।

<!DOCTYPE html>
<html>
<head>
<title>Online Bangla Dictionary by Atikur Rahman SHOHEL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<body>
<table align="center">
<tr><td width="550">
<h2>Online Bangla Dictionary</h2>
<span class="label label-warning">v.1.0</span>
<p align="right">
<a href="index.php"><button class="btn btn-info" type="button">Main Page</button></a>
<a href="add.php"><button class="btn" type="button">Add New</button></a>
<a href="edit.php"><button class="btn btn-success" type="button" align="right">Delete</button></p></a>
<div class="alert alert-info">Any Coding Wrong ? <a href="http://facebook.com/atikurmsps"><b>Contact Me.</b></a></div>
<hr>
<?php
$con=mysqli_connect("localhost","root","","techtunes");
if (mysqli_connect_errno())
{ echo "Failed to connect to MySQL: " . mysqli_connect_error(); }
$result = mysqli_query($con,"SELECT * FROM dictionary");
echo "<table class='table table-bordered'>
<tr><td width='50'><b>Sl. No.</b></td><td width='110'><b>English Word</b></td>
<td width='120'><b>বাংলা অর্থ</b></td><td width='100'><b>Perts of Spech</b></td>
<td width='70'><b>Edit</b></td></tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['word'] . "</td>";
echo "<td>" . $row['bangla'] . "</td>";
echo "<td>" . $row['pop'] . "</td>";
echo "<td><a href='delete.php?id=" . $row['id'] . "'><i class='icon-remove'></i> Delete</a></td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</table>
<td><tr>
</table>
</body>
</html>

এটি পেইজে ডাটা দেখানোর মতোই। শুধু সর্বশেষ কলামে Edit যুক্ত করা হয়েছে। delete.php?id=" . $row['id'] . দ্বারা edit এ ক্লিক করলে লিংকে delete.php?id=ID হবে। যেমন ১ম শব্দ তে ক্লিক করলে delete.php?id=1 হবে। যেন আমরা GET মেথড ব্যবহার করতে পারি।

 

Delete.php

এখানে আমাদের লিংক আসবে delete.php?id=1 এর মতো করে। তাই আমরা এখানে GET মেথড ব্যবহার করবো। প্রথমেই নিচের কোডগুলো সেভ করে নিন।

 

<!DOCTYPE html>
<html>
<head>
<title>Online Bangla Dictionary by Atikur Rahman SHOHEL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<body>
<table align="center">
<tr><td width="550">
<h2>Online Bangla Dictionary</h2>
<span class="label label-warning">v.1.0</span>
<p align="right">
<a href="index.php"><button class="btn btn-info" type="button">Main Page</button></a>
<a href="add.php"><button class="btn" type="button">Add New</button></a>
<a href="edit.php"><button class="btn btn-success" type="button" align="right">Delete</button></p></a>
<div class="alert alert-info">Any Coding Wrong ? <a href="http://facebook.com/atikurmsps"><b>Contact Me.</b></a></div>
<hr>
<?php
$id=$_GET['id'];
$con=mysqli_connect("localhost","root","","techtunes");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
mysqli_query($con,"DELETE FROM dictionary WHERE id='$id'");
mysqli_close($con);
?>
<div class="alert alert-success"><i class="icon-remove"></i> Data Delete Successfully</div>
<td><tr>
</table>
</body>
</html>

এখানে আমি ডাটা ডিলিট করার ফাংশনটি ব্যবহার করেছি। আমাদের লিংকে delete.php?id=1 এভাবে আছে। তাই GET মেথডে ID ব্যবহার করলে আমাদের লিংক থেকে id= যা দেওয়া থাকবে তা কালেক্ট করবে। আবার আমরা আমাদের একটি ডাটা ডিলিট করার জন্য এই id value ব্যবহার করবো। যার ফলে আমারা যে শব্দে ডিলিট করার জন্য ক্লিক করবো সেই শব্দ এর আইডি দ্বারা শব্দটি ডিলিট হয়ে যাবে।

এখানে আমরা ডিলিট করার ক্ষেত্রে কোন লগিন সিস্টেম ব্যবহার করি নি। এটা কিছুটা জটিল থাকায় এ নিয়ে সামনের টিউনে আলোচনা করবো।  তবে এখানে আপনি Javascript এর লগিন সিস্টেম ব্যবহার করতে পারেন। এ  জন্য পেইজের Head ট্যাগের ভেতরে নিচের কোডগুলো দিয়ে সেভ করে নিন।

<SCRIPT language="JavaScript">
<!--
var password;
var pass1="123456789";
password=prompt('Please enter your password to view this page !','');
if (password==pass1){alert('Password Correct! Click OK to enter !');}
else{window.location="index.php";}
//-->
</SCRIPT>

এখানে 123456789 হচ্ছে আমাদের পাসওয়ার্ড। এখানে আপনি আপনার পাসওয়ার্ড দিয়ে ফাইলটি সেভ করে নিন। window.location=”” হচ্ছে লগিন করতে ব্যর্থ হলে যে পেইজে নিয়ে আসবে।

 

হয়ে গেলো আমাদের নিজেদের তৈরী সুন্দর একটি ডিকশোনারী ওয়েব অ্যাপলিকেশন। আগামী পর্ব থেকে হয়তো আপনাদের মাঝে আরোও সুন্দর কোন ওয়েব অ্যাপ্লিকেশন উপহার দিতে পারবো। এখানের বিষয়গুলো কিছুটা জটিল। তবে আপনি যদি আমার আগের টিউনগুলোর সাথে থাকেন তবে আপনি বুঝতে পারবেন। আমার আগের টিউনগুলোর ব্যবহারিক প্রয়োগ করা হয়েছে এখানে মাত্র। টিউমেন্ট যদি কোন সমস্যা নিয়ে করেন তবে আমার আগের টিউনগুলো অবশ্যই পড়বেন। আশা করি আপনি আপনার সমাধান পেয়ে যাবেন।

আশা করি সবাই আমার কথা বুঝতে পেরেছেন। আমার আজকের টিউনের সোর্স কোড ডাউনলোড করে নিন Data File Host থেকে  এবং এই পুরো ওয়েব অ্যাপ্লিকেশনের সোর্স কোড ডাউনলোড করে নিন মিডিয়া ফায়ার থেকে। সবাইকে ধন্যবাদ সাথে থাকার জন্য। আগামী কয়েকটি পর্বে আমি আপনাদের মাঝে অন্য আরেকটি ওয়েব অ্যাপ্লিকেশন নিয়ে আলোচনা করবো। আপনি যদি কোন ওয়েব অ্যাপ্লিকেশন শিখতে চান সেটিও টিউমেন্ট বা আমাকে প্রাইভেট মেসেজের মাধ্যমে জানাতে পারেন। যতটুকু সম্ভব আপনাদের মাঝে লিখার চেষ্ঠা করবো। আশা করি আমার সাথেই থাকবেন ।

 

শেষ কথা

লেখায় কোন প্রকার ভূল ত্রুটি থাকলে ক্ষমা সুন্দর দুষ্টিতে দেখবেন। আর টিউন সম্পর্কে যদি আপনাদের কিছু বুঝতে কোন অসুবিধা হয় তবে টিউমেন্টের মাধ্যমে জানাবেন। আপনাদের একটি মতামত আমাকে সামনে আরও সুন্দর টিউন উপহার দিতে উৎসাহ প্রদান করবে। আর যে কথা না বললেই নয়, তা হলো লেখা কপি পেস্ট বর্জন করা। ৩-৪ ঘন্টা একটানা লিখার পর কপি পেস্ট করলে যে কোন লেখকের পুরো পরিশ্রম এর কোন মূল্যই থাকে না। সবাই ভালো থাকবেন। সকলের শুভ কামনা করে আজকের মতো এখানেই শেষ করছি। আল্লাহ হাফেজ।

ফেসবুকে আমি

Level 2

আমি আতিকুর রহমান সোহেল। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 10 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 31 টি টিউন ও 289 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 4 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

খুব সাধারণ একজন । প্রযুক্তিকে ভালবাসি, এর জন্য সব কিছুই করতে পারি । জীবনের লক্ষ্য হিসেবে প্রযুক্তিকেই বেছে নিয়েছি । জানি না কতটুকু সফল হবো । তবুও সারা দিন রাত চলে আমার লক্ষ্য অর্জনের অবিরন্ত প্রচেষ্ঠা । হয়তো একদিন হবে সফল , নয়তো বিফল । তবুও যতদিন থাকবো, প্রযুক্তিকে ভালোবাসবো...


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

চালিয়ে যান 😀