ASP.NET টিউটোরিয়াল [পর্ব-০2] :: ওয়েবভিত্তিক এড্রেস বুক তৈরিকরন

ওয়েবভিত্তিক এড্রেস বুক তৈরিকরন

এ.এস.পি. ডট নেট (ASP.NET) টিউটোরিয়ালের দ্বিতীয় পর্বে এড্রেস বুক (CREATING WEBBASED ADDRESS BOOK) নামে একটি প্রকল্প নিয়ে আলোচনা শুরু করতে যাচ্ছি । এই প্রকল্পে একজন ব্যক্তির এড্রেস সংরক্ষণ, সম্পাদন এবং মুছে ফেলার সুবিধা থাকবে। যথারীতি এই প্রকল্পটি করা হয়েছে মাইক্রোসফট ভিসুয়াল স্টুডিও ২০০৮ অর্থাৎ এ.এস.পি. ডট নেট ৩.৫ ভার্সনে এবং ডাটার জন্য মাইক্রোসফট এক্সেস ২০১০ ব্যাবহার করা হয়েছে । যদিও আমরা অনেকে ডট নেট ৪.০ ভার্সন ব্যাবহার করছি এবং ৪.৫ বেটা ভার্সন বাজারে চলে এসেছে। তবে এ বাপারে আমার উপদেশ/মতামত হল এইযে, আপনি যেই ভার্সনেয় শিখেন না কেন স্পষ্ট ও পরিস্কার ধারনা নিয়ে শিখা উচিৎ এবং বাস্তবে কোন প্রকল্পে কাজ করলে সেটা যেন সর্বাধিক বাগমুক্ত হয়  সেই দিকে প্রাধান্য দেওয়া উচিৎ । নিচে ডট নেট ও সি শার্প এর ভার্সন সংক্রান্ত ছক দেওয়া হল।

এবার প্রকল্পের কথায় আসা যাক, এটি একটি ছোট প্রকল্প বা প্রকল্পটি সংক্ষেপে করা হয়েছে। এই প্রকল্পটি অনুশীলনের মাধ্যমে জানা যাবে যে, এ.এস.পি. ডট নেট থেকে কি ভাবে এক্সেস ডাটাবেসের সাথে কানেক্ট করা এবং নতুন ডাটা যোগ করা, ডাটা সম্পাদনা ও মুছে ফেলা যায়। এখানে ডাটা দেখানোর জন্য একটি ডিটেলভিউ (Details View) গ্রিড  ও ডাটা বেসের সাথে কানেক্টের জন্য সিকিউল ডাটাসোছ (sqlDataSource) ব্যাবহার করা হয়েছে। নিচের চিত্রে প্রকল্পটির সামগ্রিক অবস্থা দেখানো হয়েছে।

নতুন এড্রেস যোগ করার জন্য নিউ বাটনে ক্লিক করে সবগুলো ফিল্ডের মান টাইপ করতে হবে এবং ইনসার্ট বাটনে ক্লিক করে ডাটা সেভ করতে হবে। নিউ বাটনে ক্লিক করার পর অটোম্যাটিক ইনসার্ট ও কাঞ্চেল নামে দুটি বাটন দৃশ্যমান হবে। একই ভাবে এডিট বাটনে ক্লিক করলে আপডেট ও ক্যানসেল নামে দুটি বাটন দৃশ্যমান হবে। কমান্ড বাটনের নিচে দৃশ্যমান সংখ্যা গুলির উপর ক্লিক করার মাধ্যমে যেকোনো একটি এড্রেস নির্বাচিত করে এডিট বাটনে ক্লিক করতে হবে। তারপর প্রয়োজনীয় পরিবর্তন করার পর আপডেট বাটনে ক্লিক করে ডাটা সেভ করতে হবে।

এখন আমরা প্রকল্পটির ডিজাইন শুরু করব। প্রথমে মাইক্রোসফট ভিসুয়াল স্টুডিও ২০০৮ এ একটি নতুন প্রকল্প খুলে Address নামে যেকোনো একটি ফোল্ডারে সেভ করি। প্রয়োজনে আমরা এই টিউটোরিয়ালের আগের পর্ব দেখে নিতে পারি যেখানে বিস্তারিত বলা আছে। ভিসুয়াল স্টুডিওর বামপাশে দেখবো একটি টুলবক্স আছে। যদি না দেখা যায়, তবে মেনু বারের ভিউতে ক্লিক করুন তারপর টুলবক্সে। তাহলে টুলবক্স চলে আসবে । নিচের চিত্র দেখুন।

DetailsView ও sqlDataSource কন্ট্রোল দুটোকে ক্লিক করে ড্রাগ করে ফরমের উপর এক এক করে ছেড়ে দিন।

কন্ট্রোল দুটির বিভিন্ন প্রপার্টির মান পরিবর্তন করার আগে আমরা নিচের ধাপ গুলি ধারাবাহিক ভাবে অনুসরণ করে মাইক্রোসফট এক্সেসে একটি dbInfo.accdb নামে ডাটাবেস তৈরি করি।

১. মাইক্রোসফট এক্সেস খুলে যথাক্রমে File>New>Blank Database নির্বাচন করে File Name text box এ ডাটা বেসের নাম dbInfo লিখি।

২. টেক্সট বক্সের পাশের বাটনে ক্লিক করে ডাটা বেসটির সেভ করার লকেশন নির্ধারণ করি। আমি প্রকল্প ফোল্ডার নির্ধারণ করেছি।

৩. এখন create বাটনে ক্লিক করে ডাটা বেসটি তৈরি করে ফেলি।

৪. এই ডাটাবেস dbInfo এর Table1 দেখা যাবে। মেনুবারের File এর নিচে View বাটনে ক্লিক করে Design View এ ক্লিক করুন।

৫. Table1 কে rename করে Address করুন এবং Field Name যথাক্রমে ID, FirstName, LastName, Address, City, Country, Telephone, CellPhone & Email টাইপ করি। প্রথমটি ছাড়া সব কইটি ফিল্ডের ডাটা টাইপ Text বসাই।

৬. ID এর ডাটা টাইপ AutoNumber বসাই এবং Indexed property এর মান Yes (No Duplicates) করে দেই। আর অন্য প্রপার্টির মান পরিবর্তন করার দরকার নাই। নিচের চিত্রটি দেখে এখন মিলিয়ে নেই।

৭. টেবিল এর উপর ডান ক্লিক করে Open এ ক্লিক করলে টেবিলটি খুলে যাবে এবং চাইলে কিছু ডাটা এন্ট্রি করা যাবে।  ডাটাবেস ডিজাইনের কাজ শেষ।

কন্ট্রোল দুটির বিভিন্ন প্রপার্টির মান নিচের ছকের মত করে পরিবর্তন করি। ভিসুয়াল স্টুডিওর ডান পাশে Solution Explorer এর নিচে Properties Window থাকে। যদি না দেখা যায়, তবে মেনুবারের View>Properties Windows এ ক্লিক করলে দেখা যাবে। Details View control টি নির্বাচন করে একটা একটা করে প্রপার্টির মান গুলি পরিবর্তন করি।

একইভাবে sqlDataSource এর প্রপার্টির মান গুলি পরিবর্তন করি। অবশ্য property window থেকে কাজ না করে Default.aspx এর Source view তে কোড টাইপ করেও আমরা ডিজাইনটি করতে পারি। নিচে সোর্স কোড এবং সোর্স কোড ফাইলের স্নাপ শট দেওয়া হল যাতে দেখে টাইপ করে সহজে ডিজাইনটি করতে পারেন।

টেকটিউনস কোড হাইলাইটার - কোড কপি করতে কোডের উপর ডাবল ক্লিক করুন

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Address._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>ADDRESS BOOK</title> </head> <body> <form id="form1" runat="server"> <div></div> <asp:DetailsView ID="dtlAdd" runat="server" AllowPaging="True" AutoGenerateEditButton="True" AutoGenerateInsertButton="True" AutoGenerateRows="False" DataKeyNames="ID" DataSourceID="srcAdd" Height="50px" Width="400px" BackColor="#CCCCFF" BorderStyle="Solid" BorderWidth="3px" HeaderText="ADDRESS BOOK" onpageindexchanging="dtlAdd_PageIndexChanging"> <CommandRowStyle BackColor="#FFCC99" Font-Bold="True" Font-Names="Verdana" Font-Size="Large" Height="40px" HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" /> <RowStyle BackColor="#99FF99" BorderColor="Blue" /> <FieldHeaderStyle Font-Bold="True" /> <Fields> <asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" InsertVisible="False" ReadOnly="True" /> <asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" /> <asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" /> <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" /> <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" /> <asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" /> <asp:BoundField DataField="Telephone" HeaderText="Telephone" SortExpression="Telephone" /> <asp:BoundField DataField="CellPhone" HeaderText="Mobile" SortExpression="CellPhone" /> <asp:BoundField DataField="Email" HeaderText="E-mail" SortExpression="Email" /> </Fields> <HeaderStyle BackColor="#FF6600" Font-Bold="True" Font-Names="Tahoma" Font-Overline="False" Font-Size="Medium" ForeColor="#333300" Height="30px" HorizontalAlign="Center" VerticalAlign="Middle" /> <InsertRowStyle BackColor="#CCFFFF" /> <EditRowStyle BackColor="#FFFFCC" /> <AlternatingRowStyle BackColor="Yellow" /> </asp:DetailsView> <asp:SqlDataSource ID="srcAdd" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString2 %>" ProviderName="<%$ ConnectionStrings:ConnectionString2.ProviderName %>" SelectCommand="SELECT * FROM [Address]" UpdateCommand="UPDATE Address SET FirstName = @FirstName, LastName = @LastName, Address = @Address, City = @City, Country = @Country, Telephone = @Telephone, CellPhone = @CellPhone, Email = @Email WHERE (ID = @ID )" InsertCommand="INSERT INTO Address (FirstName, LastName, Address, City, Country, Telephone, CellPhone, Email) VALUES (@FirstName, @LastName, @Address, @City, @Country, @Telephone, @CellPhone, @Email)"> <UpdateParameters> <asp:Parameter Name="FirstName" Type="String" /> <asp:Parameter Name="LastName" Type="String" /> <asp:Parameter Name="Address" Type="String" /> <asp:Parameter Name="City" Type="String" /> <asp:Parameter Name="Country" Type="String" /> <asp:Parameter Name="Telephone" Type="String" /> <asp:Parameter Name="CellPhone" Type="String" /> <asp:Parameter Name="Email" Type="String" /> </UpdateParameters> <InsertParameters> <asp:Parameter Name="FirstName" Type="String" /> <asp:Parameter Name="LastName" Type="String" /> <asp:Parameter Name="Address" Type="String" /> <asp:Parameter Name="City" Type="String" /> <asp:Parameter Name="Country" Type="String" /> <asp:Parameter Name="Telephone" Type="String" /> <asp:Parameter Name="CellPhone" Type="String" /> <asp:Parameter Name="Email" Type="String" /> </InsertParameters> </asp:SqlDataSource> </form> </body> </html>

Snap shot of Design view

এই প্রকল্পটি সম্পূর্ণ করার পর আমি আশা করি নিচের বিষয় গুলি সম্পর্কে একটা ধারনা পাওয়া যাবেঃ 

১. এক্সেস ডাটা বেসের সাথে connectivity system. 

২. sqlDataSource control এর ব্যবহার ।

৩. Details View Control  এর ব্যাবহার ।

কোন সমস্যা হলে যোগাযোগ করার অনুরধ রইলো