অনেক Research করার পর Coding করতে বসলাম। আমাদের ওয়েবসাইট এর জন্য আমরা নিচের Programming language ব্যবহারের সিদ্ধান্ত নিয়েছি।
Front-End: HTML 5, CSS, Javascript
Back-End: MySQL, Ajax.
আমাদের ওয়েবসাইটের Primary Objective হল
যাদের রক্তের প্রয়োজন, তাদের কাছে Donor দের তথ্য পৌছে দেওয়া।
তাই সর্ব প্রথম কাজ আমাদের কে সারা দেশে কিভাবে এলাকা ভিত্তিক Donor দের আলাদা করা যাবে তা বের করা।
প্রথমে আমরা ভেবেছিলাম যে পুরো দেশকে আমরা ৬৪ জেলায় ভাগ করবো। এর পর আমরা প্রত্যেক জেলাকে থানাতে ভাগ করবো। ডিজাইন টা হবে এমন -
কিন্তু এতে আমরা বেশ কিছু সমস্যার সম্মুখীন হই। এগুলো যেমনঃ
১. বাংলাদেশের ৬৪ জেলা + ৬৩৯ টি ঠানা। এতে Data অনেক saturated হয়ে পরবে।
১. বাংলাদেশের ৬৪ জেলা + ৬৩৯ টি ঠানা। এতে Data অনেক saturated হয়ে পরবে।
২. থানা হিসেবে Donor এর সংখ্যা কমে যাবে। এতে আমাদের ওয়েবসাইট এর যে প্রাথমিক উদ্দেশ্য তা আর পূরণ হবে না।
৩. সব থেকে বড় সমস্যা হবে ঠিক এরকম - একজনের AB+ রক্ত লাগবে। উনি ঢাকার খিলগাঁও থানার আশে পাশের Donor খুজছেন। উনি থানা select করলেন খিলগাঁও। কিন্তু খিলগাঁও থানার ভেতরে তখন AB+ আছে মাত্র ২ জন। ঠিক খিলগাঁও থানার পাশেই মতিঝিলে আছে প্রায় ১৫ জন AB+। কিন্তু saturatuion এর জন্য তাদের তথ্য উনার কাছে যাবে না।
এই সমস্যাগুলোর কথা চিন্তা করে আমরা আমাদের Search Perimeter পালটে ফেলি। এটার সহজ সমাধান হল বিভাগ ও জেলায় ভাগ করা। যাতায়াতের ও শহরের বিস্তৃতি হিসেবে শুধু মাত্র ঢাকা বিভাগ কে ৩ ভাগে ভাগ করা হয়েছে।
প্রথমত ঢাকা বিভাগ কে ২ ভাগে ভাগ করেছি -
১. শুধুমাত্র ঢাকা জেলা ও
২. ঢাকা বিভাগের অন্যান্য জেলা
এই সমস্যাগুলোর কথা চিন্তা করে আমরা আমাদের Search Perimeter পালটে ফেলি। এটার সহজ সমাধান হল বিভাগ ও জেলায় ভাগ করা। যাতায়াতের ও শহরের বিস্তৃতি হিসেবে শুধু মাত্র ঢাকা বিভাগ কে ৩ ভাগে ভাগ করা হয়েছে।
প্রথমত ঢাকা বিভাগ কে ২ ভাগে ভাগ করেছি -
১. শুধুমাত্র ঢাকা জেলা ও
২. ঢাকা বিভাগের অন্যান্য জেলা
এরপর আমরা ঢাকা জেলাকে আবার ২ ভাগে ভাগ করেছি -
১. ঢাকা উত্তর
২. ঢাকা দক্ষিণ
২. ঢাকা দক্ষিণ
ঢাকাকে এভাবে ভাগ করার পিছে আমাদের যুক্তি ২ টা। প্রথমত, ঢাকা শহরটা অনেক বড় এবং যাতায়াতের সমস্যা অনেক। পল্টন থেকে গিয়ে কেউ উত্তরা তে রক্ত দিবে না। দ্বিতীয়ত, ঢাকার প্রত্যেক এলাকাতেই ঘনবসতি বেশি তাই আমাদের প্রাথমিক সমস্যার ৩ নম্বর ঘটনা এখানে ঘটবে না।
ঢাকার ভেতরের একালাও আমরা Zone হিসেবে ভাগ করে দিয়েছি। যেমনঃ
আপাতত এই ফিল্টার করার কোড এখানে দিয়ে রাখলাম -
HTML -
<div class="container">
<div class="search">
<h2 class="heading2">Search</h2>
<form>
<h4 class="division">Location Selector</h4>
<label for="dropdown1">Select Division:</label>
<select name="Select Division" id="dropdown1" onchange="updateDropdown2()">
<option value="">--Select Division--</option>
<option value="barisal">Barisal</option>
<option value="chittagong">Chittagong</option>
<option value="dhakanorth">Dhaka North (Inside Dhaka City)</option>
<option value="dhakasouth">Dhaka South (Inside Dhaka City)</option>
<option value="dhakaother">Dhaka Other (Outside Dhaka City)</option>
<option value="khulna">Khulna</option>
<option value="rajshahi">Rajshahi</option>
<option value="rangpur">Rangpur</option>
<option value="sylhet">Sylhet</option>
</select>
<br>
<label for="dropdown2">Select Area:</label>
<select id="dropdown2">
<option value="">-- Select Areas--</option>
</select>
<br>
<label for="bloodgrp">Select Blood Group:</label>
<select name="Select Blood Group" id="bloodgrp">
<option value="">--Select Blood Type--</option>
<option value="">A+</option>
<option value="">A-</option>
<option value="">B+</option>
<option value="">B-</option>
<option value="">AB+</option>
<option value="">AB-</option>
<option value="">O+</option>
<option value="">O-</option>
</select>
<br>
<button class="btn" type="submit">Search</button>
</form>
</div>
JavaScript -
/* drop Menu change*/
function updateDropdown2() {
const dropdown1 = document.getElementById("dropdown1").value;
const dropdown2 = document.getElementById("dropdown2");
// Clear existing options in dropdown2
dropdown2.innerHTML = "";
// Define options based on dropdown1 selection
const options = {
dhakanorth: ["--Select Area--", "Agargaon", "Badda", "Bashundhara", "Gulshan", "Kazipara", "Khilkhet", "Mirpur", "Mohammadpur", "Shewrapara", "Tejgaon", "Tongi", "Uttara"],
dhakasouth: ["--Select Area--", "Basabo", "Demra", "Dhanmondi", "Gendaria", "Hazaribagh", "Jatrabari", "Kamrangirchar", "Lalbagh", "Motijheel", "Mugda", "New Market", "Old Dhaka", "Shyampur", "Tikatuli", "Wari"],
dhakaother: ["--Select Area--", "Faridpur", "Gazipur", "Gopalganj", "Jamalpur", "Kishoreganj", "Madaripur", "Manikganj", "Munshiganj", "Mymensingh", "Narayanganj", "Narsingdi", "Netrakona", "Rajbari", "Shariatpur", "Sherpur", "Tangail"],
barisal: ["--Select Area--", "Barguna", "Barisal", "Bhola", "Jhalokati", "Patuakhali", "Pirojpur"],
chittagong: ["--Select Area--", "Bandarban", "Brahmanbaria", "Chandpur", "Chittagong", "Comilla", "Cox's Bazar", "Feni", "Khagrachhari", "Lakshmipur", "Noakhali", "Rangamati"],
khulna: ["--Select Area--", "Bagerhat", "Chuadanga", "Jessore", "Jhenaidah", "Khulna", "Kushtia", "Magura", "Meherpur", "Narail", "Satkhira"],
rajshahi: ["--Select Area--", "Bogra", "Joypurhat", "Naogaon", "Natore", "Nawabganj", "Pabna", "Rajshahi", "Sirajganj"],
rangpur: ["--Select Area--", "Dinajpur", "Gaibandha", "Kurigram", "Lalmonirhat", "Nilphamari", "Panchagarh", "Rangpur", "Thakurgaon"],
sylhet: ["--Select Area--", "Habiganj", "Moulvibazar", "Sunamganj", "Sylhet"]
};
// Populate dropdown2 with corresponding options
if (options[dropdown1]) {
options[dropdown1].forEach(location => {
const option = document.createElement("option");
option.value = location.toLowerCase();
option.textContent = location;
dropdown2.appendChild(option);
});
}
}
0 Comments