ویژول ویب ڈیولپر - قدم بہ قدم

ویژول ویب ڈیولپر میں سادہ ویب پیج بنانا
اس ٓرٹیکل میں ا ٓپ کو مائکرو سافٹ یژول ویب ڈیولپر کا تعارف دیا جائے گا۔ایک سادہ ویب پیج بنانا جس میں نیا پیج بنانے کی بنیادی تکنیک، پیج پر کنڑول لگانے اور کوڈ لکھنےکے بارے میں رہنمائی کی جائے گی۔

اس میں بتائے جانے والے کام یہ ہیں:
فائل سسٹم ویب سائیٹ بنانا
آپ کو ویژول ویب ڈیولپر سے روشناس کرانا
ایک فائل کا ASP.NET پیج بنانا
کنٹرول شامل کرنا
ایونٹ ہینڈلر Even t Handler شامل کرنا
ویژول ویب ڈیولپر کے ویب سرور پر پیج کو چلانا

پیشگی ضروریات
اس آرٹیکل میں دیے گئے کام کو کرنے کے لیے آپ کو ان چیزوں کی ضرورت ہو گی
ویژول ویب ڈیولپرVisual Web Developer
ڈاٹ نیٹ فریم ورک.NET Framework

ویب سائیٹ اور پیج بنانا
اس حصے میں آپ ویب سائیٹ بنائیں گے اور اس میں نیا پیج شامل کریں گے۔آپ اس میں HTML ٹیکسٹ شامل کر کے اپنے براوزر میں چلائیں گے۔
اس کے لیے آپ فائل سسٹم ویب سائیٹ بنائیں گے جس سے آپ کو انٹرنیٹ انفارمیشن سروس IIS میں کام نہیں کرنا پڑے گا اور آپ لوکل فائل سسٹم سے ہی اپنا پیج چلا سکیں گے۔

فائل سسٹم ویب سائیٹ وہ ہوتی ہے جس میں ویب پیج اور دیگر فائلیں آپ کی ہارڈ ڈسک میں کسی بھی جگہ رکھی جا سکتی ہیں۔ دیگر موجود طریقوں میں لوکل انٹرنیٹ انفارمیشن سروس ویب سائیٹ جس میں فائلیں local IIS root جوکہ عام طور پر (\Inetpub\Wwwroot\) ہوتی ہے میں رکھی جاتی ہیں یا ایف ٹی پی سائیٹ جوکہ کسی ریموٹ سرور پر انٹرنیٹ پر ہوتی ہے ، شامل ہیں۔

فائل سسٹم ویب سائیٹ بنانے کے لیے:
۱۔ویژول ویب ڈیولپر کھولیں۔
۲۔ فائل مینو میں New Web Site پر کلک کریں۔ نیچے دکھائی گئی تصویر جیسا ڈائیلاگ باکس کھلے گا۔

۳۔ Visual Studio installed templates کے نیچے ASP.NET Web Site پر کلک کریں۔جب بھی آپ ویب سائیٹ بناتے ہیں تو آپ ٹمپلیٹ کا انتخاب کرتے ہیں۔ ہر ٹمپلیٹ آپ کے لیے مختلف فائلیں اور فولڈر بناتا ہے۔اس آرٹیکل کے لیے ہم ASP.NET Web Site کا ٹمپلیٹ استعمال کریں گے جوکہ کچھ فائیلں اور فولڈر بنائے گا۔
۴۔لوکیشن کے باکس میں File System سلیکٹ کریں اور اس فولڈر کا نام دیں جہاں آپ اپنی ویب سائیٹ کے پیج رکھنا چاہتے ہیں۔
۵۔لینگویج کے باکس میں Visual Basic یا Visual C# سلیکٹ کریں۔ جو لینگویج آپ سلیکٹ کریں گے وہ آپ کی سائیٹ کی بنیادی لینگویج ہو گی مگر آپ ایک ہی سائیٹ میں مختلف لینگویج استعمال کر سکتے ہیں۔
۶۔ او کے پر کلک کریں۔
ویژول ویب ڈیولپر آپ کے لیے فولڈر اور ایک نیا پیج جس کا نام Default.aspx ہے بناتا ہے۔جب بھی نیا پیج بنایا جائے ویژول ویب ڈیولپر اس کو Source View میں دکھاتا ہے جہاں آپ پیج کے HTML اجزاء دیکھ سکتے ہیں۔ ذیل کی تصویر میں اس کو ملاحضہ کریں۔

ویژول ویب ڈیولپر کے ماحول سے شناسائی
اس سے پہلے کہ آپ پیج پر کام شروع کریں بہتر ہو گا کہ ہم ویژول ویب ڈیولپر سے کچھ شناسائی حاصل کر لیں۔ ذیل کی تصویر میں آپ کو نظر آنے والی ونڈوز اور ٹولز دکھائے گئے ہیں۔


تصویر کو ملاحضہ کریں اور نیچے دی گئی وضاحت سے ملائیں۔ آپ کو نظر آنے والی ہر چیز کی وضاحت نہیں کی گئی بلکہ اوپر کی تصویر میں جن چیزوں کو مارک کیا گیا ہے صرف ان کی وضاحت ہے۔
Tool Bars۔ یہ آپ کو ٹیکسٹ فارمیٹنگ ، ٹیکسٹ کی تلاش اور دیگر کمانڈز مہیا کرتی ہے۔ یہ صرف Design View میں نظر آتی ہیں۔
Solution Explorer۔ یہاں آپ کی ویب سائیٹ میں موجود فائلیں اور فولڈر نظر آتے ہیں۔
Document Window۔ اس میں وہ ڈاکیومنٹ نظر آتا ہے جس پر آپ کام کر رہے ہوں۔یہ Tabbed ونڈوز ہیں اور ٹیب پر کلک کر کے آپ ایک سے دوسرے ڈاکیومنٹ پر جا سکتے ہیں۔
Properties Window۔ یہاں آپ کسی بھی پیج، کنٹرول یا کسی بھی آبجیکٹ کی settings تبدیل کر سکتے ہیں۔
View Tabs۔ ایک ہی ڈاکیومنٹ کے views تبدیل کرنے کے لیے ہے۔آپ کسی بھی ڈاکیومنٹ کو Design یا Source ویو میں دیکھ سکتے ہیں۔
Tool Box۔ اس میں کنٹرول اور HTML اجزاء ہیں جوکہ آپ اپنے پیج پر استعمال کر سکتے ہیں۔ ان کو کام کی نوعیت کے لحاظ سے گروپ کیا گیا ہے۔

نیا ویب فارم پیج بنانا
جب آپ نئی ویب سائیٹ بناتے ہیں تو ویژول ویب ڈیولپر آپ کے لیے ایک پیج بنا دیتا ہے۔آپ اس کو اپنی ویب سائیٹ کے ہوم پیج کے طور پر استعمال کر سکتے ہیں مگر اس آرٹیکل کے لیے ہم نیا پیج بنائیں گے۔
ویب سائیٹ میں نیا پیج شامل کرنے کے لیے:
۱۔ Default.aspx پیج کو بند کر دیں۔ پیج بند کرنے کے لیے اس کے ٹیب پر رائیٹ کلک کریں اور Close منتخب کریں۔
۲۔Solution Explorer میں اپنی ویب سائیٹ پر رائیٹ کلک کریں اور Add New Item منتخب کریں۔
۳۔Visual Studio Installed Templates میں Web Form پر کلک کریں۔
۴۔نام والے باکس میں پیج کا نام لکھیں مثلاً MyFirstPage ۔
۵۔لینگویج میں اپنی پسند کی لینگویج منتخب کریں۔
۶۔Place code in separate file کو ان چیک کریں۔
ذیل میں Add New Item کا ڈائیلاگ باکس دکھایا گیا ہے۔


اس آرٹیکل میں ہم ایسا ویب پیج بنا رہے ہیں جس کا HTML اور کوڈ ایک ہی فائل میں ہے۔آپ ان دونوں کو الگ فائل میں بھی رکھ سکتے ہیں جس کا ذکر اگلے آرٹیکل میں آئے گا۔
۷۔ Add پر کلک کریں۔ آپ کا نیا پیج Source View میں کھل جائے گا۔

پیج میں HTML شامل کرنا
اس حصے میں ہم پیج پر کچھ ساکن ٹیکسٹ شامل کریں گے۔

پیج میں ٹیکسٹ شامل کرنا
۱۔Doucment Window کے نچلے حصے میں Design ٹیب پر کلک کریں۔
۲۔ پیج کے اوپر”Welcome to Visual Web Developer” ٹائیپ کریں۔ ذیل کی تصویر میں ٹائیپ کرنے کے بعد پیج جیسا نظر ٓئے گا دکھایا گیا ہے۔


۳۔ Source View پر واپس جائیں۔ اب آپ کو پیج ایسا نظر آئے گا۔


پیج کو چلانا
اس سے پہلے کہ پیج پر کنٹرول شامل کریں ہم اس کو چلانے کی کوشش کرتے ہیں۔پیج کو چلانےکے لیے ہمیں ویب سرور کی ضرورت ہے۔فائل سسٹم ویب سائیٹ کے لیے ہم ویژول ویب ڈیولپر کا لوکل سرور استعمال کرتے ہیں جوکہ ویژول ویب ڈیولپر کے ساتھ ہی انسٹال ہو جاتا ہے۔

پیج کو چلانے کے لیے
۱۔CTRL+F5 پریس کریں۔ ویژول ویب ڈیولپر لوکل سرور چلاتا ہے اور اس کا icon بھی نظر آنا شروع ہو جاتا ہے۔
آپ کا پیج براوزر میں کھل جائے گا۔اگرچہ آپ کا پیج .aspx ہے مگر یہ HTML کی طرح نظر آئے گا۔
۲۔براوزر کو بند کر دیں۔

کنٹرول شامل کرنا اور پروگرام کرنا
اس حصے میں ہم ایک بٹن، ایک ٹیکسٹ باکس اور ایک لیبل اپنے پیج میں شامل کریں گے اور بٹن کلک پر چلنے والا کوڈ لکھیں گے۔
اب آپ پیج پر سرور کنٹرول شامل کریں گے۔ سرور کنڑول جیسے کہ، بٹن، ٹیکسٹ باکس، لیبل اور دیگر ہمیں فارم تشکیل دینے میں مدد دیتے ہیں اور یہ صارف کے بجائے سرور پر چلتے ہیں۔

پیج پر کنٹرول شامل کر نے لیے
۱۔Design ٹیب کو کلک کر کے ڈیزائین ویو پر آ جائیں۔
۲۔SHIFT+Enter دبا کر پیج پر کچھ جگہ بنائیں۔
۳۔Tool Box کے Standard گروپ سے تین کنٹرول پیج پر drag کریں۔ایک ٹیکسٹ باکس، ایک بٹن اور ایک لیبل۔
۴۔Cursor کو ٹیکسٹ باکس کے اوپر لے جا کر “Enter Your Name” ٹائیپ کریں۔یہ آپ کے ٹیکسٹ باکس کی سرخی ہے۔آپ ایک ہی پیج پر HTML اور سرور کنٹرول ایک ساتھ شامل کر سکتے ہیں۔آپ کا پیج اپ ایسا نظر آئے گا۔


کنٹرول کی پراپرٹی سیٹ کرنا
ویژول ویب ڈیولپر آپ کو پراپرٹی سیٹ کرنے کے کئی طریقے فراہم کرتا ہے۔اس آرٹیکل میں ہم ڈیزائن اور سورس ویو دونوں میں پراپرٹی سیٹ کرنے کا طریقہ دیکھیں گے۔

کنٹرول کی پراپرٹی سیٹ کرنے کے لیے
۱۔بٹن کو سلیکٹ کریں اور پھر پراپرٹی ونڈو میں Text کو Display Name سے تبدیل کر دیں۔ تبدیلی کے بعد آپ کا بٹن ایسا نظر آئے گا۔


۲۔ Source View پر جائیں۔
سورس ویو پیج کا HTML دکھاتا ہے۔اس میں وہ چیزیں بھی شامل ہیں جوکہ سرور کنٹرول کے لیے شامل ہوئی ہیں۔کنٹرول بھی HTML جیسے ہی نظر آتے ہیں۔ فرق یہ ہے کہ ان کے ساتھ asp: شامل ہوتا ہے اور وہ runat=”server” ہوتے ہیں۔
کنٹرول پراپرٹی کو Attributes کے طور پر لکھا جاتا ہے۔مثلاً جب آپ نے بٹن کی ٹیکسٹ پراپرٹی تبدیل کی تھی تو دراصل آپ نے کنٹرول کا ٹیکسٹ ایٹریبوٹ سیٹ کیا تھا۔
غور کریں کہ تمام کنٹرول جزؤ <form> کے اندر ہیں جس کا ایٹریبوٹ runat=”server” ہے۔یہ اس لیے ہے کہ ASP جن کے ساتھ لگا ہو وہ سرور پر پراسس ہوتے ہیں۔اس جزؤ کے باہر والا مارک اپ Client کی طرف پراسس ہوتا ہے۔
۳۔Cursor کو <asp:label> ٹیگ کے بیچ لے جا کر SPACE BAR پریس کریں۔
ایک ڈراپ ڈاؤن لسٹ ظاہر ہو گی جوکہ وہ پراپرٹی دکھائے گی جو آپ سیٹ کر سکتے ہیں۔اس کو IntelliSense کہتے ہیں کہ یہ آپ کو کنٹرول کے حساب سے مدد دیتی ہے۔ ڈارپ ڈاؤن لسٹ اس تصویر میں دکھائی گئی ہے۔


۴۔ اس لسٹ میں سے ForeColor سلیکٹ کریں اور = کا نشان ٹائپ کریں۔انٹیلی سنس آپ کو رنگوں کی لسٹ دکھائے گا۔
۵۔ اپنا پسندیدہ رنگ منتخب کریں۔آپ کے لیبل کی رنگ کی پراپرٹی سیٹ ہو جائے گی۔

بٹن کنٹرول کو پروگرام کرنا
اس آرٹیکل کے لیے ہم کوڈ لکھیں گے ، جوکہ صارف کا نام جوکہ وہ ٹیکسٹ باکس میں لکھے گا لے کر لیبل کنٹرول میں ظاہر کرے گا۔

بٹن کا Event Handler بنانا
۱۔ڈیزائن ویو پر جائیں۔
۲۔بٹن کنٹرول کو ڈبل کلک کریں۔
آپ سورس ویو پر واپس پہنچ جائیں گے اور ایک خاکہ event handler آپ کے سامنے ہو گا۔
۳۔ Handler کے اندر یہ لکھیں
Label1.
آپ کے سامنے لیبل کنٹرول کے موجود ممبرز کی لسٹ آ جائے گی۔تصویر دیکھیں۔

مندرجہ ذیل کوڈ مکمل کر کے Finish پر کلک کریں۔
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
End Sub
۵۔اسکرول کر کے <asp:Button> کے جزؤ پر جائیں۔اب وہاں آپ کو ایک نیا attribute نظر آئے گا جوکہ OnClick=”Button1_Click” ہے۔یہ attribute آپ کے بٹن کو اس کوڈ سے منسک کرتا ہے جو آپ نے اوپر لکھا تھا۔

پیج کو چلانا
اب آپ اپنے پیج کو ٹسٹ کر سکتے ہیں۔
پیج چلانے کے لیے
۱۔CTRL+F5 پریس کریں۔آپ کا پیج لوکل اے ایس پی سرور کے ساتھ چلے گا۔اور براؤزر میں کھلے گا۔
۲۔ٹیکسٹ باکس میں نام لکھیں اور بٹن پر کلک کریں۔آپ کا لکھا ہوا نام لیبل کنٹرول میں نظر آئے گا۔
۳۔ براؤزر بند کر دیں۔

بشکریہ:ایم ایس ڈی این لائبریری
اصل ربط: http://msdn.microsoft.com/en-us/library/k4cbh4dh(v=vs.80).aspx#Y7333

 

جواب: ویژول ویب ڈیولپر - قدم بہ قدم

ویسے تو asp کے اسکریپٹ بھی مل جاتے ہین مگر میں php پر بھی کچھ نہ کچھ لکھنے کی کوشش کروں گا۔

 

جواب: ویژول ویب ڈیولپر - قدم بہ قدم

واصف بھائی بہت شکریہ، آپ نے بہت محنت سے بہت عمدہ ترجمہ کیا۔
ازراہ کرم
ویژول ویب ڈیولپرVisual Web Developer
ڈاٹ نیٹ فریم ورک.NET Framework
کے ڈاونلوڈ لنک بھی ارسال کر دیں تاکہ آپ کے پڑھائے ہوے سبق کا پریکٹیکل بھی کر سکیں۔ شکریہ

 

جواب: ویژول ویب ڈیولپر - قدم بہ قدم

بلال بھائی مزکورہ ربط پیش خدمت ہیں:
ویژول ویب ڈیولپرVisual Web Developer

ڈاٹ نیٹ فریم ورک.NET Framework

 

جواب: ویژول ویب ڈیولپر - قدم بہ قدم

ابھی تک نہیں آئے