រៀបចំ Layout និង Content ក្នុង ASP.NET

យើងបាននិយាយជា ​ច្រើន​ពី​លក្ខណៈ​ពិសេស​ក្នុង​ជំនាន់​នីមួយ​ៗ​របស់ ASP.NET ភាពខុសគ្នារវាង ASP.NET Website និង ASP.NET Web Application ការ​បង្កើត និងការ​ដំណើរ​ការ Web Application ។

ពេលនេះ ASP.NET របស់អាន យើងនឹង​ប្រើ Web Application សម្រាប់​គ្រប់ការ​បង្កើត​ទាំងអស់ ហើយ​ក្នុង​លេខនេះយើងនឹងនិយាយពីការ​រៀបចំ layout ASP.NET ដោយ​ប្រើ Visual Studio 2008 ។
​បញ្ជាក់​៖ លោកអ្នក​ក៏​អាច​ប្រើ Visual Studio 2005 ឬ 2010 សម្រាប់​ការអនុវត្តន៍នេះផងដែរ ។
យើងធ្លាប់បាន​បង្កើត Web Application ថ្មីមួយរួចហើយ ឥឡូវយើងនឹងបន្តទៅការ​បង្កើត layout ។

ការ​បង្កើត Layout

​លោកអ្នក​នឹង​បង្កើត និង រចនា layout គេហទំព័របាន​យ៉ាង​ងាយស្រួល​ជាមួយ Visual Studio ។
ដំបូងបើក ASP.NET page ដែល​អ្នកចង់រចនា (ឧទាហរណ៍ default.aspx)
រួចលប់ block <h1>…</h1> ដែល​បានសរសេរនៅលេខមុន រួចចុចលើ Design នោះវានឹងប្តូរពី​ផ្ទាំង​មានកូដ HTML ទៅ​ផ្ទាំង​សម្រាប់​រចនា ។ ឧទាហរណ៍ថាយើងចង់​បង្កើត layout ដូចរូប​ខាងក្រោម​
យើងនឹង ​បង្កើត​ដោយ​ប្រើ table layout តាមរយៈ​រូបខាងលើវាជា table ដែល​មាន ៤ rows និង ២ columns (យើងអាច merge rows ឬ columns បញ្ចូលគ្នាតាមក្រោយបាន) ។
ដើម្បី​បង្កើត table ចុចលើ menu Table  Insert Table នោះ​ផ្ទាំង​សម្រាប់​កំណត់​ពី table ដែល​ត្រូវ insert នឹងបើកឡើង ។
ដាក់ Rows : 4 និង Columns : 2 ហើយ Cell padding : 0 និង Cell spacing : 10 ដើម្បី​ឲ្យ​មានគំលាត រួចចុច OK button ។
ឥឡូវ merge cells បញ្ចូលគ្នាបាន​ទៅតាម layout ដែល​យើងចង់បាន ដោយ select លើ cells ដែល​យើងចង់ merge ហើយ right-click លើ cell ទាំងនោះ​រូចចុចលើ modify ហើយចុច Merge Cells
រួច merge cells តាមរួប​ខាងក្រោម​
ឥឡូវយើងបាន layout តាមយើងចង់បានហើយ
​បញ្ជាក់​៖ ពណ៌ខាងលើនេះខ្ញុំ​គ្រាន់តែ​ដាក់ ដើម្បី​ឲ្យ​លោកអ្នក​ងាយមើលតែប៉ុណ្ណោះ ។
​ចំណាំ​៖ ​ ប្រសិនបើ​អ្នកចេះ​បង្កើត និង រចនា layout ដោយ​ប្រើ CSS លោកអ្នក​គួរកុំធ្វើតាមវិធីខាងលើនេះ ព្រោះ​វាធ្វើ​ឲ្យ​គេហទំព័របើកយឺតជាង CSS ដោយសារ​តែ <table> និង CSS នៅ​ក្នុង page ។

ការដាក់ Content

ឥឡូវនេះយើងចាប់ផ្តើមដាក់ Logo អក្សរ និង រូបភាពផ្សេងៗ​ចូល page របស់យើង ។ ជា​ទូទៅ​យើង​បង្កើត folder មួយ​ឈ្មោះ images សម្រាប់​ដាក់រូបភាពដោយ right-click លើ web application  Add  New Folder
ហើយវាយពាក្យ images  copy logo និងរូបភាពផ្សេងៗ​ដែល​ត្រូវការ​សម្រាប់​គេហទំព័រនេះមក paste ក្នុង folder images នេះ ។ ឥឡូវអូស logo ពី folder images ទៅដាក់​ក្នុង block Header (​ប្រសិនបើ​ផ្ទាំង Accessibility Properties បើកឡើងចុចលើ button OK) ។
​ក្នុង block Footer វាយពាក្យ “​បង្កើត​ដោយ ឈ្មោះ​របស់អ្នក​” ហើយនៅ block ខាងស្ដាំខាងលើដាក់ “​ប្រភេទ​អត្ថបទ” ដែល​មាន​ដូចជា Windows, សុវត្ថិភាព​, Microsoft Office, Internet និង ផ្សេងទៀត ។ ហើយនៅខាងស្ដាំ​ខាងក្រោម​ដាក់ “គេហទំព័រ​សំខាន់​ៗ​” ដែល​មាន​ដូចជា IT Forums, វចនានុក្រម ខ្មែរ​អង់គ្លេស, Download Free Softwares និង ផ្សាលក់​កុំព្យូទ័រ ។ ហើយយើងនឹងបានដូច​ខាងក្រោម​
ដើម្បី ​បាន bold និង bullet list អ្នកអាចចុចប្តូរទៅ Source សរសេរ HTML ឬ​ប្រើ Formatting toolbar របស់ Visual Studio ក៏​បាន (​ដែល​ប្រើ​ដូចនឹង Microsoft Word ដែរ) ។
​ចំណាំ​៖ ប្រសិនបើ​អ្នកមិនឃើញ Formatting toolbar ក្នុង Visual Studio របស់អ្នក​ទេ អ្នកអាច right-click លើ toolbar ឬ menu ហើយចុចលើ Formatting ។
ប្រយ័ត្ន៖ លោកអ្នក​មិនគួរ copy អក្សរពី Microsoft Word ទៅ paste ក្នុង Design របស់ Visual Studio នោះទេ ព្រោះ​វានឹង​បង្កើត​កូដ style រញ៉េរញ៉ៃផ្សេងៗ ។ ឧទាហរណ៍​គ្រាន់តែ copy ពាក្យ “Windows” ពី Microsoft Word ទៅ paste ក្នុង design នោះវានឹង​បង្កើត​កូដ HTML ដូច​ខាងក្រោម​
<span>Windows</span>​បញ្ជាក់​៖ សម្រាប់​ការដាក់ពណ៌ ឬ​រចនាផ្សេងៗ ប្រសិនបើ​អ្នកចេះ CSS លោកអ្នក​គួរ​ប្រើ CSS វិញ​ព្រោះ​វានឹងធ្វើ​ឲ្យ page បើក​លឿន ។
យើងឃើញថា ​ផ្នែក​ខាងស្ដាំ​ដូចជា​ធំពេក ដូច្នេះយើងត្រូវការ​កំណត់​ទំហំ​ទទឹង​ឲ្យ​វា ដោយដាក់ cursor នៅ​ផ្នែក​ខាងស្ដាំនៃ <td> ដែល​យើងចង់បង្រួមរួចហើយអូសវាតាម​ទំហំ​ដែល​ត្រូវការ ។
នៅ​ផ្នែក​គេហទំព័រ​សំខាន់​ៗ​យើងដាក់ link ទៅគេហទំព័រ​ទាំងនោះ​ដោយ select លើអក្សរ​ដែល​យើងចង់ដាក់ link ហើយចុចលើ
​ ដែល​នៅលើ Formatting toolbar ហើយវាយ URL រួចចុច OK ។ ចំណែក​ឯ​ប្រភេទ​អត្ថបទវិញ​ក៏​ជា link ដែរ តែយើងមិន​ប្រើ link ដូចខាងលើនេះទេ ព្រោះ​វានឹងខុសពេល​ដែល​ប្រើ master page ហើយមាន link ទៅ web page ក្នុង folder ។ ដើម្បី​ដោះស្រាយបញ្ហានេះ និង​ឲ្យ​ងាយស្រួល​ក្នុង​ការ link យើង​ប្រើ HyperLink control ដោយអូសវាពី Toolbox មកដាក់នៅ bullet (<li>) នីមួយ​ៗ​ក្នុង “​ប្រភេទ​អត្ថបទ” ឧទាហរណ៍មកជំនួស Windows ។
​បញ្ជាក់​៖ ប្រសិនមិនឃើញសូមអ្នកចុច menu View  Toolbox ។
បន្ទាប់ពីអូស HyperLink control ដាក់​ក្នុង page រួចយើងត្រូវ select HyperLink control នោះហើយចុច F4 នោះ​ផ្ទាំង Properties នឹងលេចឡើង រួចយើងដាក់ Text = “Windows” និង NagivateUrl = “~/article.aspx?c=1” ។ c=1នៅខាងក្រោយ Url គឺ​សម្រាប់​បញ្ជាក់ id របស់ category=1​ដែល​តំណាង​ឲ្យ Windows (ទុក​សម្រាប់​ធ្វើនៅលេខក្រោយ) ។ ធ្វើដូចគ្នានេះដែរ​សម្រាប់ សុវត្ថិភាព​, Microsoft Office, Internet, និង ផ្សេងទៀត ដោយ​កំណត់ c=2, c=3, c=4 និង c=5 រៀងគ្នា ។
បន្ទាប់ពី​កំណត់​រួច​លោកអ្នក​អាចចុចលើ Ctrl + F5 ដើម្បី​ដំណើរ​ការ ហើយយើងនឹងបាន​លទ្ធផល​ដូចរូប​ខាងក្រោម​
​ ផ្នែក​ខាង​ឆ្វេង​យើងមិនទាន់បានដាក់អ្វីនៅឡើយទេ ដោយយើងទុកដាក់អត្ថបទផ្សេងៗ ដែល​អត្ថបទ​ទាំងនោះ​ទុក​ក្នុង database ដែល​យើងនឹងធ្វើនៅលេខក្រោយទៀត ។
អត្ថបទនេះដកស្រង់ចេញពីទស្សនាវដ្ដី អាន "ANT" ច្បាប់ទី ២២ ចេញផ្សាយខែ មករា ឆ្នាំ ២០១១ ។