Open Data Kit ជួយ​សម្រួល​ដល់​ការងារ​ប្រមូល​ទិន្នន័យ​របស់​ស្ថាប័ន

odk_logo

ការ​ប្រមូល​ទិន្នន័យ​គឺ​ជា​កិច្ចការ​មួយ​ដែល​មាន​សារសំខាន់​បំផុត​នៅ​ក្នុង​ស្ថាប័ន ឬ​ក៏​ក្រុមហ៊ុន​នានា។ វា​អាច​ឲ្យ​គេ​ដឹង​អំពី​ព័ត៌មាន ស្ថានភាព ស្ថិតិ នៅ​ពេល​បច្ចុប្បន្ន ឬ​ក៏​ប្រមើមើល​ទៅ​ពេល​អនាគត​បាន​ថែម​ទៀត​ផង ដែល​អាច​ឲ្យ​គេ​ធ្វើ​ការងារ​បាន​ងាយ​ស្រួល​និង​ចំ​គោលដៅ។

ជា​ទម្លាប់​ចាស់ ការ​ប្រមូល​ទិន្នន័យ​ត្រូវ​បាន​ធ្វើ​ឡើង​តាម​រយៈ​ក្រដាស​និង​ប៊ិក។ បន្ទាប់​មក គេ​ប្រមូល​ទិន្នន័យ​ពី​ក្រដាស​ទាំង​អស់​នោះ​ទៅ​បញ្ចូល​ក្នុង​កុំព្យូទ័រ ឬ​ក៏​វិធីសាស្ត្រ​គណនា​ដទៃ​ទៀត។ ប៉ុន្តែ​ការ​ប្រមូល​ទិន្នន័យ​បែប​នេះ វា​អាច​នឹង​ផ្ដល់​ផល​លំបាក ប្រសិន​បើ​ស្ថាប័ន​នោះ​ត្រូវ​ប្រមូល​នៅ​ច្រើន​កន្លែង (ឧ. មួយ​ពាន់​កន្លែង) ។ ការ​វាយ​បញ្ចូល​ទិន្នន័យ​ទៅ​ក្នុង​កុំព្យូទ័រ ឬ​ក៏​ការ​គណនា​តាម​វិធីសាស្ត្រ​នានា​ដោយ​ដៃ​នឹង​លែង​ជា​មធ្យោបាយ​ប្រសើរ​ទៀត​ហើយ។ ដូច្នេះ​អ្វី​ទៅ​ដែល​ជា​មធ្យោបាយ​ដ៏​ប្រសើរ​ជាង​នេះ​នោះ? គឺ​ប្រើប្រាស់​បច្ចេកវិទ្យា

បច្ចុប្បន្ន​នេះ ទូរសព្ទ ឬ​ថាប្លិត (Tablet) ក្លាយ​ជា​របស់​ប្រើប្រាស់​ប្រចាំ​ថ្ងៃ និង​ជួយ​សម្រួល​ដល់​មនុស្ស​ជា​ច្រើន។ មាន​កម្មវិធី​រាប់​លាន​ត្រូវ​បាន​បង្កើត​ឡើង​សម្រាប់​ឧបករណ៍​អស់​ទាំងនោះ។ ត្រឡប់​មក​និយាយ​អំពី​ការ​ប្រមូល​ទិន្នន័យ​វិញ ក៏​មាន​កម្មវិធី​សម្រាប់​ការងារ​នេះ​ដែរ ប៉ុន្តែ​វា​មាន​ច្រើន​ជម្រើស និង​បម្រើ​ទៅ​តាម​តម្រូវ​ការ។ នៅ​ក្នុង​នោះ​មាន​កម្មវិធី Open Data Kit (ពាក្យ​កាត់៖ ODK) គឺ​ជា​មធ្យោបាយ​ដ៏​ប្រសើរ​មួយ។ វា​ត្រូវ​បាន​បង្កើត​ឡើង​នៅ សាកលវិទ្យាល័យ​វ៉ាស៊ីនតោន (University of Washington) ហើយ​ក៏​ជា​កម្មវិធី​កូដ​បើក​ចំហ (Open Source) ដែល​អាច​ឲ្យ​អ្នក​យក​ទៅ​ប្រើ (តាម​ស្ថាប័ន) កែតម្រូវ​កម្មវិធី​នោះ​ទៅ​តាម​ការងារ​ជាក់ស្ដែង​របស់​ពួកគេ។

មាន​អង្គការ​ជាច្រើន (រួមទាំង​ក្នុង​ប្រទេស​កម្ពុជា​ដែរ) កំពុង​ប្រើប្រាស់ ODK សម្រាប់​ចុះ​ស្ទាបស្ទង់​មតិ ប្រមូល​ទិន្នន័យ បង្កើត​ជា​របាយការណ៍​ប្រកប​ទៅ​ដោយ​ភាព​ងាយស្រួល​ជាងមុន លឿន​រហ័ស និង​មាន​ភាព​ជាក់លាក់​ល្អ។

កម្មវិធី​មួយ​ចំនួន​របស់ ODK

ODK បាន​បង្កើត​កម្មវិធី​ច្រើន​ដែរ ហើយ​នៅ​ក្នុង​មាន​កម្មវិធី​ឬ​សមាសភាគ​បី​សំខាន់​ជាងគេ​សម្រាប់​ការងារ​គឺ៖ XLS Form, ODK Collect, Aggregate Server។

XLSForm (ឯកសារ​កម្រង​សំណួរ)

XLSForm គឺជា​ទម្រង់​ស្តង់ដារ​មួយ​សម្រាប់​បង្កើត Form នៅ​ក្នុង Excel, ដូច្នេះ​កម្រង​សំណួរ​នៅ​ក្នុង ODK ត្រូវ​ធ្វើ​ជា​ទម្រង់ XLS តាមរយៈ​កម្មវិធី Microsoft Excel ឬ​កម្មវិធី Spreadsheet ផ្សេងៗ​ដែល​អ្នក​អាច​បង្កើត​ឯកសារ​ជា​ទម្រង់ XLS បាន។ រាល់​សំណួរ ជម្រើស អត្ថបទ​បង្ហាញ លក្ខខណ្ឌ ក្បួន​គណនា និង​ការ​កំណត់​នានា​ត្រូវតែ​រៀបចំ​ឡើង​នៅ​ក្នុង​ឯកសារ XLS នោះ​ឲ្យ​រួច​ជា​ស្រេច។ ចំពោះ​ប្រភេទ​សំណួរ​វិញ សូម​មើល​ទីនេះ

នៅ​ពេល​រៀបចំ​កម្រង​សំណួរ​ទៅ​តាម​រចនាសម្ព័ន្ធ​រួច​អស់​ហើយ ក៏​អ្នក​មិន​ទាន់​អាច​យក​វា​ទៅ​ប្រើ​បាន​ដែរ លុះត្រា​តែ​បាន​បំប្លែង​ឯកសារ XLS នោះ​ឲ្យ​ទៅ​ជា​ទម្រង់ XML សិន នោះ​ទើប​អាច​យក​ទៅ​ប្រើ​នៅ​ក្នុង​កម្មវិធី ODK Collect បាន។

ឯកសារ​ជា​ទម្រង់ XML ត្រូវយក​ទៅ​ទុក​នៅ​ក្នុង​ម៉ាស៊ីន​បម្រើ​រួម (Aggregate Server) ដើម្បី​ឲ្យ​កម្មវិធី ODK Collect អាច​ទាញយក​កម្រង​សំណួរ​នោះ​មក​ប្រើ​បាន។ សូម​រក្សា​ឯកសារ XLS ឲ្យ​បាន​ត្រឹមត្រូវ ប្រសិនបើ​អ្នក​មិនចង់​អង្គុយ​រាប់​សិប​ម៉ោង​រៀបចំ​កម្រង​សំណួរ​ម្ដង​ទៀត​នៅ​ពេល​ត្រូវការ។

ODK Collect

ODK Collect ជា​កម្មវិធី​ដើរ​នៅ​លើ Android ហើយ​វា​មាន​តួនាទី​សម្រាប់​ទាញយក​និង​បំពេញ​កម្រង​សំណួរ, រក្សាទុក​កម្រង​សំណួរ​ដែល​បាន​បំពេញ​ហើយ, និង​បញ្ជូន​ទិន្នន័យ​ទៅ​កាន់​ម៉ាស៊ីមបម្រើ​រួម​មួយ (Aggregate Server)។ រាល់​លក្ខខណ្ឌ ក្បួន​គណនា សំណួរ និង​អ្វីៗ​ផ្សេង​ទៀត​ដែល​អ្នក​បាន​បញ្ចូល​ទៅ​ក្នុង​ឯកសារ XLS និង​បាន​បំប្លែង​ទៅ XML នឹង​ត្រូវ​កម្មវិធី ODK Collect យក​មក​រៀបចំ​បង្ហាញ​នៅ​លើ​អេក្រង់​ទៅ​តាម​ប្រភេទ​នៃ​ធាតុ​នីមួយៗ។

ផ្នែក​បច្ចេកទេស៖ វា​មាន​ភាព​លំបាក​ក្នុង​ការ​រៀបចំ​ប្លង់​កម្រង​សំណួរ​ទៅ​តាម​ចិត្ត ព្រោះ​វា​មិន​មែន​រៀបចំ​ប្លង់​ឡើង​តាមរយៈ HTML, CSS និង JavaScript ទេ។ ដូច្នេះ​ចាំបាច់​ត្រូវ​កែ​កូដ​ដើម (source code) របស់​កម្មវិធី។

Play Store | GitHub

Aggregate Server

Aggregate Server គឺ​ជា​សមាសភាគ​ដ៏​សំខាន់​មួយ គេ​អាច​ហៅ​វា​ថា​ជា​មជ្ឈមណ្ឌល ឬ​ហៅ​ថា​ម៉ាស៊ីនបម្រើ​រួម ពីព្រោះ​មុខងារ​ចម្បង​របស់​វា​គឺ​រក្សាទុក​កម្រង​សំណួរ​សម្រាប់​ប្រើប្រាស់, ផ្ដល់​ឯកសារ​កម្រង​សំណួរ​ទៅ​ឲ្យ​កម្មវិធី ODK Collect, រក្សាទុក​ព័ត៌មាន​ដែល​ទទួល​បាន​ពី ODK Collect, និង​បង្កើត​ទម្រង់​ទិន្នន័យ (data format) សម្រាប់​យក​ទៅ​ប្រើប្រាស់​ក្នុង​កម្មវិធី​គណនា​ស្ថិតិ​ដូចជា SPSS ជាដើម។

នៅ​ពេល​ដំឡើង Aggregate Server អ្នក​ចាំបាច់​ត្រូវ​បង្កើន​សុវត្ថិភាព​របស់​វា ប្រសិនបើ​អ្នក​មិនចង់​ឲ្យ​ទិន្នន័យ​ដ៏​មាន​តម្លៃ​របស់​អ្នក​ត្រូវ​ជន​អាក្រក់​លួច​យក​បាន។

 

ខ្ញុំ​គាំទ្រ​និង​ជម្រុញ​ឲ្យ​មាន​ការ​បញ្ជ្រាប​បច្ចេកវិទ្យា​ឲ្យ​បាន​កាន់តែ​ច្រើន​ចូល​ទៅ​ក្នុង​ដំណើរ​ការងារ​របស់​ស្ថាប័ន​នីមួយៗ ពីព្រោះ​វា​មិនមែន​ត្រឹមតែ​ផ្ដល់​ភាព​លឿន​នោះ​ទេ តែ​ក៏​មាន​សុវត្ថិភាព (ប្រសិនបើ​មាន​អ្នក​ជំនាញ​រៀបចំ​ត្រឹមត្រូវ) និង​ភាព​ជាក់ច្បាស់​ចំពោះ​ព័ត៌មាន​របស់​អ្នក​ដែរ។ ការ​ចំណាយ​ថ្លៃ​ឈ្នួល​លើ​បច្ចេកវិទ្យា​អស់​ទាំងនោះ​នឹង​ផ្ដល់​លទ្ធផល​យ៉ាង​ធំ​សម្រាប់​ការងារ​របស់​ស្ថាប័ន​ទាំងមូល តួយ៉ាង​ដូចជា​ការ​ចុះ​ប្រមូល​ព័ត៌មាន​ដោយ​ប្រើប្រាស់​កម្មវិធី ODK ដូច្នេះ​ដែរ។

 

[WDC101] មេរៀន​ទី៣៖ មូលដ្ឋាន​នៃ HTML

មាតិកា​មេរៀន

 

ពី​សប្ដាហ៍​មុន​នោះ ខ្ញុំ​បាន​សរសេរ​អត្ថបទ​ចំនួន​ពីរ​មក​ហើយ​ដែល​និយាយ​អំពី​មូលដ្ឋាន​នៃ​ការ​អភិវឌ្ឍ​វេប​និង​លក្ខណៈ​ទូទៅ​នៃ​វេបសាយ​មួយ។ ប៉ុន្តែ​សំណួរ​សួរ​ថា តើ​យើង​ត្រូវ​បង្កើត​វា​យ៉ាង​ដូចម្ដេច? ខ្ញុំ​ជឿជាក់​ថា​អត្ថបទ​ពីរ​ដំបូង​នោះ បាន​ផ្ដល់​ជា​គំនិត​មូលដ្ឋាន​នានា​ដល់​អ្នក​ក្នុង​ការ​ចាប់ផ្ដើម​ការ​ធ្វើ​វេបសាយ​មួយ។ បើ​មិនទាន់​បាន​អាន​ទេ សូម​មើល​តំណ​ក្នុង​ផ្នែក​មាតិកា​ខាង​លើ។

ចម្លើយ​នៃ​សំណួរ​ខាង​លើ​អាច​យក​ទៅ​បកស្រាយ​បាន​ច្រើន​បែប​ណាស់ ប៉ុន្តែ​ដោយ​ឈរ​នៅ​លើ​ទស្សនៈ “មូលដ្ឋាន” ដូច្នេះ​ហើយ​ខ្ញុំ​នឹង​បកស្រាយ​ទៅ​តាម​បែប​មូលដ្ឋាន​ដែល​អ្នក​ចាប់ផ្ដើម​ធ្វើ​វេប​គួរតែ​បាន​ដឹង​ជា​ចាំបាច់ រួម​ទាំង​វេបសាយ​ផ្សេងៗ​ទៀត​ដែល​អ្នក​ត្រូវ​រៀន​ដោយ​ខ្លួនឯង។

សេចក្ដី​ផ្ដើម

នៅ​ក្នុង​មូលដ្ឋាន​នៃ​ការ​ធ្វើ​វេបសាយ​មួយ គេ​តែងតែ​បង្កើត​វា​ដោយ​មាន​សមាសភាគ​សំខាន់ៗ​យ៉ាង​ហោច​ណាស់​ចំនួន​២​គឺ៖ HTML និង CSS។ ហើយ​មាន​សមាសភាគ​ទី៣​ទៀត​គឺ JavaScript។ CSS និង JavaScript នឹង​ត្រូវ​យក​មក​បង្ហាញ​ច្រើន​នៅ​មេរៀន​បន្តបន្ទាប់​ខាង​មុខ។ នៅ​ពេល​នេះ​យើង​នឹង​ជជែក​ត្រួសៗ​អំពី​ពួកវា​សិន។

HTML ជា​ពាក្យ​កាត់​មក​ពី Hyper-text Markup Language។ យើង​អាច​ហៅ​វា​ថា​ជា​ភាសា​មួយ​ដែល​គេ​ប្រើ​សម្រាប់​រៀបចំ​ធាតុ​ផ្សេងៗ​នៅ​ក្នុង​ទំព័រ​វេប ហើយ​វា​ក៏​ជា​ភាសា​សម្រាប់​បរិយាយ​អំពី​រចនាសម្ព័ន្ធ​នៃ​ទំព័រ​វេប​ដែរ។ សូម​សាកល្បង​ចុច Ctrl + U (Mac: Command + U) នោះ​អ្នក​នឹង​ឃើញ​ផ្ទាំង​ថ្មី​មួយ​លេច​ឡើង។ អក្សរ​ដែល​អ្នក​ឃើញ​នោះ​អាច​មាន HTML, CSS, និង JavaScript។ ដើម្បី​ឲ្យ​ស្គាល់​សញ្ញាណ​វា​បន្តិច សូម​មើល​ត្រង់​កន្លែង​ណា​ដែល​មាន​ប្រើ​សញ្ញា < និង > ។ ខ្ញុំ​ដឹង​ថា​វា​មាន​ច្រើន​កន្លែង។ នោះ​ហើយ​ជា​រូបរាង​នៃ​ធាតុ​នៅ​ក្នុង HTML។

CSS ពាក្យ​ពេញ​របស់​វា​គឺ Cascading Stylesheet។ គេ​ប្រើ​វា​សម្រាប់​រៀបចំ​ស្ទីល​ទៅ​ឲ្យ HTML ពីព្រោះ​ដូច​បាន​បញ្ជាក់​ពី​ខាង​លើ​ហើយ​ថា HTML គ្រាន់តែ​សម្រាប់​បរិយាយ​អំពី​រចនាសម្ព័ន្ធ​នៃ​ទំព័រវេប​ប៉ុណ្ណោះ ឯ​រឿង​ស្ទីល (ពណ៌, ទីតាំង, ទំហំ, …) ផ្សេងៗ​ ត្រូវ​អាស្រ័យ​លើ CSS  ។

JavaScript គេ​អាច​ហៅ​វា​ថា​ជា​ភាសា​កម្មវិធី​នៅ client-side។ ជាទូទៅ​គេ​ប្រើ​វា​សម្រាប់​បង្កើត​ចលនា (animation), បន្ថែម​មុខងារ​ទៅ​ឲ្យ​ធាតុ​ណាមួយ​ក្នុង HTML, ការ​បង្កើត​ជា​កម្មវិធី​វេប។ល។

ទំព័រ​វេប​សាមញ្ញ​មួយ

អត្ថបទ​ដំបូង​របស់​ខ្ញុំ។

អក្សរ​ក្រាស់​របស់​ខ្ញុំ។

កម្មវិធី​សរសេរ​កូដ

អ្នក​ប្រាកដ​ជា​ឆ្ងល់​ហើយ​ថា​តើ​ត្រូវ​ប្រើ​កម្មវិធី​អ្វី​ដើម្បី​សរសេរ​កូដ? ខ្ញុំ​សុំ​ណែនាំ​ឲ្យ​ប្រើ Atom Github សម្រាប់​ការ​សរសេរ​កូដ។

រចនាសម្ព័ន្ធ​ទូទៅ​នៃ HTML

ដើម្បី​បង្កើត​ទំព័រ​វេប HTML មួយ យើង​ចាំបាច់​ត្រូវ​ស្គាល់​រចនាសម្ព័ន្ធ​ទូទៅ​ឬ​រចនាសម្ព័ន្ធ​មូលដ្ឋាន​របស់​វា នោះ​ទើប​យើង​អាច​យល់​អំពី​វា​បាន​ច្បាស់។

នៅ​ក្នុង​រចនាសម្ព័ន្ធ​នេះ​មាន​ចំណុច​បី​ជា​មូលដ្ឋាន​គឺ៖

  1. html – ជា​ធាតុ​ប្រាប់​ឲ្យ​ដឹង​ថា​ជា​ឯកសារ HTML ហើយ​វា​គឺ​ជា​ធាតុ​មេ​គេ​បង្អស់​(root)​ដែល​ក្ដោប​ធាតុ​ដទៃ​ទៀត។ https://dev.w3.org/html5/html-author/#the-html-element
  2. head – ជា​ធាតុ​មួយ​ដែល​ស្ថិត​នៅ​ក្នុង​ធាតុ html ហើយ​ជា​អ្នក​ផ្ទុក​រាល់​ទិន្នន័យមេតា​(metadata)​របស់​ឯកសារ HTML នោះ។ វា​គឺ​ធាតុ​ដំបូង​គេ​នៅ​ក្នុង​ធាតុ html។ https://dev.w3.org/html5/html-author/#the-head-element
  3. title – ជា​ធាតុ​សម្រាប់​កំណត់​ចំណងជើង​បង្ហាញ​នៅ​ក្នុង​ផ្ទាំង​ប្រោវស័រ
  4. body – ជា​ធាតុ​ប្រើ​សម្រាប់​ផ្ទុក​មាតិកា​ចម្បង​របស់​ឯកសារ HTML។ និយាយ​ឲ្យ​ចំ​ទៅ​គឺ​អ្វីៗ​ដែល​ត្រូវ​បង្ហាញ​នៅ​លើ​អេក្រង់​គឺ​ត្រូវ​ទុក​នៅ​ក្នុង​ធាតុ body នេះ។ https://dev.w3.org/html5/html-author/#the-body-element

ធាតុ​នៅ​ក្នុង HTML

នៅ​ក្នុង HTML មាន​ធាតុ​ជាច្រើន ហើយ​ពួកវា​នីមួយៗ​ធ្វើ​កិច្ចការ​ឬ​តំណាង​មុខងារ​ខុសៗ​គ្នា។ ធាតុ​នីមួយៗ​សុទ្ធតែ​មាន​ឈ្មោះ​សម្គាល់​ដូច​ដែល​យើង​ឃើញ​ពី​លើ​ស្រាប់ មាន​ដូចជា​ធាតុ html, head, body ជាដើម។ មាន​ធាតុ​ផ្សេងៗ​ទៀត​ដូចជា​ធាតុ p តំណាង​ឲ្យ paragraph, b គឺ bold, img គឺ image។ល។ ធាតុ​នីមួយៗ​ត្រូវបាន​តំណាង​ដោយ​ស្លាក ហើយ​រចនាសម្ព័ន្ធ​នៃ​ធាតុ​មួយ​ជាទូទៅ​តែង​មាន​ស្លាក​បើក​(start tag), មាតិកា​(content), និង​ស្លាក​បិទ​(end tag)។

ឧទាហរណ៍៖

HTML Tags

គេ​អាច​សម្គាល់​ធាតុ​នីមួយៗ​បាន​ដោយ​ប្រើប្រាស់​ស្លាក​(tag) ហើយ​ស្លាក​នេះ​មាន​បី​ប្រភេទ​គឺ៖

  1. ស្លាក​បើក – ឧ. <p> ជា​ស្លាក​បើក​តំណាង​ឲ្យ​ធាតុ p។ ស្លាក​បើក​មាន​ទ្រង់ទ្រាយ <tag_name>
  2. ស្លាក​បិទ – ឧ. </p> ជា​ស្លាក​បិទ​តំណាង​ឲ្យ​ធាតុ p។ កាល​ណា​មាន​ស្លាក​បើក​នោះ​ក៏​ត្រូវ​មាន​កន្លែង​បិទ។ ស្លាក​បិទ​មាន​ទ្រង់ទ្រាយ​ស្រដៀង​ស្លាក​បើក ដោយ​គ្រាន់​បន្ថែម​សញ្ញា “/” នៅ​ពី​មុខ​ឈ្មោះ​ស្លាក </tag_name>
  3. ស្លាក​បិទ​ខ្លួនឯង – មាន​ធាតុ​មួយ​ចំនួន​ទៀត​មិន​ប្រើ​ស្លាក​បិទ​នោះ​ទេ ពីព្រោះ​វា​មិនមាន​ផ្ទុក​មាតិកា​(content)។ ឧ. <img src="example.png"> ដែល​ស្លាក​នេះ​តំណាង​ឲ្យ​ការ​បង្ហាញ​រូបភាព ដោយ​ផ្ដល់​ទីតាំង​រូបភាព​នៅ​ក្នុង​លក្ខណៈ​កំណត់(attribute)។

 

សរសេរ​កូដ​ឲ្យ​ស្រួល​មើល

ដើម្បី ​សរសេរ​កូដ​ឲ្យ​ងាយស្រួល​មើល ឲ្យ​ដឹង​ថា​ធាតុ​ណា​នៅ​ក្នុង​ណា គឺ​ចាំបាច់​ត្រូវ​ខិត​ធាតុ​ចូល​បន្ទាត់ (Indentation)។ សូម​មើល​កូដ​ដែល​ខ្ញុំ​សរសេរ​ពី​ខាងលើ​មក ខ្ញុំ​តែងតែ​ចូល​បន្ទាត់។ ឧ. <html> ជា​ស្លាក​នៅ​ក្រៅ​គេ មិន​ត្រូវការ​ចូល​បន្ទាត់​ទេ ប៉ុន្តែ <head> និង <body> វា​ជា​ស្លាក​នៅ​ក្នុង <html> ដូច្នេះ​ត្រូវ​ចូល​បន្ទាត់។ ធ្វើ​បែបនេះ​យើង​អាច​ដឹង​ថា​វា​ស្ថិតនៅ​ក្នុង <html>។ អ្នក​អាច​ខិត​ចូល​បន្ទាត់​ដោយ​ចុច Tab។

HTML Attributes

អ្នក​ប្រាកដ​ជា​បាន​ឃើញ​ខ្ញុំ​បញ្ជាក់​អំពី​លក្ខណៈ​កំណត់​ស្លាក​(attribute)​នៅ​ចំណុច​ខាង​លើ។ ខ្ញុំ​គិត​ថា​ពាក្យ​លក្ខណៈ​នេះ វា​ជា​ន័យ​ត្រង់​រួច​ស្រេច​ទៅ​ហើយ គឺ​វា​ជា​ការ​កំណត់​ព័ត៌មាន​បន្ថែម​ទៅ​ឲ្យ​ស្លាក​មួយ​ថា​ត្រូវ​អនុវត្ត​មុខងារ​យ៉ាង​ដូចម្ដេច។

ដូច​យើង​ឃើញ​ខាង​លើ​នោះ ខ្ញុំ​បាន​លើក​ឡើង​អំពី​ធាតុ img ដែល​មាន​លក្ខណៈ​មួយ​ឈ្មោះ​ថា src ប្រើ​សម្រាប់​កំណត់​ទីតាំង​រូបភាព​ដែល​ត្រូវ​បង្ហាញ ហើយ​មាន​តម្លៃ "example.png"

មាន​លក្ខណៈ​មួយ​ចំនួន​ជា​លក្ខណៈ​កំណត់​សកល ហើយ​លក្ខណៈ​ខ្លះ​ទៀត​មាន​តែ​ចំពោះ​ស្លាក​ជាក់លាក់​ណា​មួយ​នោះ​ទេ។ មើល​ទីនេះ​សម្រាប់​លក្ខណៈ​កំណត់​សកល។

ស្លាក​មួយ​ចំនួន

.:: Headings ::.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

.:: Links ::.

Sovichet.info
Google


.:: Paragraphs ::.

This is the content in Paragraph.


.:: Images ::.


.:: Unordered List ::.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

.:: Ordered List ::.

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

.:: Table ::.

ID Name Location
K12 Sokha Phnom Penh
K18 Kanha Kampong Chhnang
K20 Bopha Kampong Cham

អ្នក​ប្រាកដ​ជា​ឃើញ​មាន​ស្លាក​ខ្លះ​វា​ចូល​គ្នា​បីបួន​ជាន់ នេះ​ក៏​ព្រោះតែ​ជា​ករណី​ដែល​គេ​បាន​កំណត់​មក​យ៉ាង​ដូច្នេះឯង។ ខ្ញុំ​សុំ​លើក​យក​ឧទាហរណ៍​ស្លាក ul និង ol មក​និយាយ។ ul គឺ​ជា​ស្លាក​សម្រាប់ Unordered List (បញ្ជី​គ្មាន​លំដាប់) ចំណែក​ឯ ol គឺ​សម្រាប់ Ordered List (បញ្ជី​មាន​លេខ​រៀង)។ នៅ​ក្នុង​ពួក​វា​សុទ្ធតែ​មាន​ស្លាក​កូន li។ ស្លាក li (List Item) នេះ​ប្រើ​សម្រាប់​បញ្ជាក់​ថា​ជា​ធាតុ​របស់​បញ្ជី ពីព្រោះ​បើ​គ្មាន​ស្លាក li ទេ នោះ​បញ្ជី​ទាំងពីរ​ប្រភេទ​នេះ​វា​មិន​ដឹង​ថា​តើ​វា​មាន​ធាតុ​អ្វី​ខ្លះ​ទេ។ ក៏​ដូចគ្នា​ទៅ​នឹង table ដែល​វា​មាន​ការ​កំណត់​ស្មុគស្មាញ​បន្តិច ដោយ​សារ​វា​ត្រូវ​ចែក​ចេញ​ជា​ក្បាល​តារាង តួ​តារាង ហើយ​វា​ក៏​មាន​បាត​តារាង (tfoot) ដែរ។

ការ​បង្កើត Form

ក្រៅ​អំពី​ធាតុ​ទាំងប៉ុន្មាន​ដែល​មាន​បង្ហាញ​នៅ​ខាង​លើ (ទាំង​ស្លាក​និង​លទ្ធផល) នៅ​មាន​សមាសភាគ​មួយ​សំខាន់​ទៀត​គឺ Form។ វា​ជា​សមាសភាគ​ដែល​ស្ទើរតែ​មិន​អាច​ខ្វះបាន​នៅ​ក្នុង​វេបសាយ​មួយ។ អ្នក​ប្រាកដ​ជា​ធ្លាប់​បាន​ឃើញ Form ពីមុន​មក​ហើយ​ដូចជា​នៅ៖ ទំព័រ​ចុះឈ្មោះ, ទំព័រ​ចូល​គណនី, ទំព័រ​បំពេញ​ព័ត៌មាន​ទិញ​ទំនិញ, ប្រអប់​ស្វែងរក។ល។ ទាំងអស់​ហ្នឹង​កើត​ចេញ​មក​ដោយ​សមាសភាគ Form។

នៅ​ក្នុង​ការ​បង្កើត Form មួយ​ត្រូវ​ការ​មាន​រចនាសម្ព័ន្ធ​បែបនេះ៖

ធាតុ input

ធាតុ​ដែល​សំខាន់​បំផុត​នៅ​ក្នុង​ការ​បង្កើត Form គឺ​ធាតុ input។ ធាតុ​នេះ​វា​មាន​តួនាទី​បង្ហាញ​វាល​សម្រាប់​បំពេញ​ព័ត៌មាន ហើយ​វា​ចាំបាច់​ត្រូវ​ស្ថិត​នៅ​ខាង​ក្នុង​ធាតុ form។ ប្រភេទ input មាន​ច្រើន ដែល​កំណត់​ដោយ​លក្ខណៈ​កំណត់ (attribute) type។ ប្រភេទ input ចំនួន​៥​ដែល​ឧស្សាហ៍​ប្រើ​គឺ៖

  1. text – ជា​ប្រភេទ input សម្រាប់​បញ្ចូល​តួ​អក្សរ
  2. password – ជា​ប្រភេទ input សម្រាប់​បញ្ចូល​ពាក្យ​សម្ងាត់ (ដោយ​មាន​បាំង)
  3. checkbox – ជា​ប្រភេទ input សម្រាប់​បង្កើត​ប្រអប់​ធីក
  4. ­radio – ជា​ប្រភេទ input សម្រាប់​បង្កើត​ជម្រើស​ដែល​ជ្រើស​បានតែ​មួយ
  5. submit – កំណត់​ប៊ូតុង​សម្រាប់​ដាក់ស្នើ

ប្រភេទ text

ទីក្រុង:

ប្រទេស:

ប្រភេទ password

ពាក្យ​សម្ងាត់:

ប្រភេទ checkbox

សៀវភៅ​ដែល​អ្នក​ចូលចិត្ត
ការ​អភិវឌ្ឍ​ខ្លួន
ប្រវត្តិសាស្ត្រ
គណិតវិទ្យា

ប្រភេទ radio

ភេទ
ប្រុស
ស្រី

ប្រភេទ submit

សៀវភៅ​ដែល​អ្នក​ចូលចិត្ត
ការ​អភិវឌ្ឍ​ខ្លួន
ប្រវត្តិសាស្ត្រ
គណិតវិទ្យា

ឯកសារ​ត្រូវ​មើល​បន្ថែម

ដូច​ដែល​ខ្ញុំ​បាន​ប្រាប់​ពី​ខាង​លើ​មក​ថា រាល់​អត្ថបទ​ដែល​ខ្ញុំ​សរសេរ​គឺ​គ្រាន់តែ​ជា​ការ​ពន្យល់​ទៅ​លើ​គោលគំនិត​សំខាន់​ជាមូលដ្ឋាន​ប៉ុណ្ណោះ មិនមាន​ចេតនា​ពន្យល់​លម្អិត​ទាំងអស់​នោះ​ទេ ដូច្នេះ​ហើយ​វា​តោង​អាស្រ័យ​ឲ្យ​អ្នក​ទាំងអស់​គ្នា​ត្រូវ​ចូល​ទៅ​អាន​បន្ថែម​ដោយ​ខ្លួនឯង​នៅ​ក្នុង​វេបសាយ​ផ្សេងៗ​ទៀត ដែល​គេ​បាន​រៀបចំ​មាតិកា​មេរៀន​បាន​យ៉ាង​ល្អ។

  1. w3schools.com
  2. tutorialspoint.com

ឧទាហរណ៍

បញ្ជី​ម៉ឺនុយ (មាន​តំណ​ភ្ជាប់)

បង្កើត​ប្រអប់​ចូល​គណនី

ឈ្មោះ:

ពាក្យ​សម្ងាត់:

សេចក្ដី​បញ្ចប់

ទាំងអស់​នេះ​គ្រាន់តែ​ជា​ការ​រៀបរាប់​យ៉ាង​ត្រួសៗ​អំពី HTML ប៉ុណ្ណោះ ដូច្នេះ​ហើយ​ខ្ញុំ​សង្ឃឹម​ថា​អ្នក​នឹង​ស្វះស្វែង​រៀន​បន្ថែម​តាម​វេបសាយ​ពីរ​ដែល​ខ្ញុំ​ឲ្យ​ពី​ខាងលើ ឬ​រៀន​ពី​វេបសាយ​ផ្សេងៗ​ទៀត​ដែល​អ្នក​ស្គាល់។ នៅ​ពេល​បន្ទាប់ យើង​នឹង​ជជែក​អំពី CSS ម្ដង គឺ​យើង​នឹង​យក​ថ្នាំ​មក​លាប​ផ្ទះ HTML របស់​យើង។

សាកល្បងល្បង​ធ្វើ​ទំព័រ៖

  1. ទំព័រ​ផ្ទាល់​ខ្លួន (ប្រវត្តិរូប​ផ្ទាល់ខ្លួន)
  2. តារាង​ឈ្មោះ​និស្សិត (មាន​ដាក់​ប្រអប់​ធីក​នៅ​ជួរដេក)
  3. ទំព័រ​បំពេញ​ព័ត៌មាន​ការ​ដឹកជញ្ជូន​ទំនិញ​ណាមួយ

[WDC101] មេរៀន​ទី២៖ លក្ខណៈ​ទូទៅ​នៃ​វេបសាយ​មួយ

មាតិកា​មេរៀន

 

កាលពី​សប្ដាហ៍​មុន យើង​បាន​ជជែក​អំពី​ទំព័រ​ឥត​ប្រែប្រួល, ទំព័រ​ឌីណាមិក, server-side, client-side។ល។ នៅ​មេរៀន​ក្នុង​សប្ដាហ៍​នេះ យើង​នឹង​និយាយ​អំពី​លក្ខណៈ​ទូទៅ​នៃ​វេបសាយ​មួយ។

ហេតុ​អ្វី​បាន​ជា​យើង​ត្រូវ​ដឹង​អំពី​វា? ឲ្យ​ខ្ញុំ​សាកល្បង​ពន្យល់​បែប​នេះ។ ទោះបីជា​យើង​ធ្វើ​វេបសាយ​បែប​ណា​ក្ដី ក៏​វា​ត្រូវ​មាន​លក្ខណៈ​រួម​មួយ​ដែល​មិន​អាច​ចៀស​បាន ទោះបី​លក្ខណៈ​នោះ​ត្រូវបាន​លើក​យក​មក​រៀបចំ​ទៅ​តាម​សណ្ឋាន​ខុសៗ​គ្នា​ម្ដេច​ក្ដី។ វា​ក៏​មិន​ខុស​អី​ពី​មនុស្ស​យើង​ដែរ។ បើ​គេ​សួរ​យើង​ថា ចូរ​រក​លក្ខណៈ​រួម​របស់​មនុស្ស? នោះ​យើង​នឹង​ឆ្លើយ​ថា មាន​ក្បាល ដៃ ជើង ដងខ្លួន និង​អវៈយវៈ​លម្អិត​ដទៃ​ទៀត​ដូចជា​ច្រមុះ ភ្នែក សក់ អណ្ដាត។ល។ ប៉ុន្តែ​ការ​បង្ហាញ​នៃ​អវៈយវៈ​ទាំងអស់​នោះ វា​អាច​មាន​សណ្ឋាន​ខុសៗ​គ្នា។ មាន​អ្នក​ខ្លះ​ក្បាល​ស្រួច ដៃ​ខ្លី ជើងធំៗ មាឌ​ធាត់ ច្រមុះ​ស្រួច សក់​ពណ៌​ត្នោត អណ្ដាត​ទាល។ល។ គឺ​វា​យ៉ាង​ដូច្នេះ​ឯង។

ឥឡូវ​យើង​ត្រឡប់​មក​និយាយ​អំពី​មេរៀន​វិញ ដូច​ខ្ញុំ​បាន​ពន្យល់​ពី​ខាង​លើ​មក​ហើយ​ថា ការ​រចនា​វេបសាយ​វា​នៅ​តែ​មាន​លក្ខណៈ​ទូទៅ (ឬ​លក្ខណៈ​រួម) ដែល​មិន​អាច​ចៀស​បាន ប៉ុន្តែ​ការ​លើក​យក​មក​បង្ហាញ​អាច​មាន​សណ្ឋាន​ខុសៗ​គ្នា ហើយ​វា​ខុស​បន្តិច​ពី​ឧទាហរណ៍​អំពី​អវៈយវៈ​ត្រង់​ថា​វា​អាច​មាន​ការ​ថែម​ថយ​ទៅ​តាម​តម្រូវការ ឬ​ទៅ​តាម​ការ​ពេញ​ចិត្ត​របស់​អតិថិជន។

និយាយ​យ៉ាង​ខ្លី​ទៅ​ចុះ លក្ខណៈ​ទូទៅ (ឬ​លក្ខណៈ​រួម) នៃ​វេបសាយ​មួយ​មាន៖

  • ក្បាល (ផ្នែក​លើ)
  • ខ្លួន (ផ្នែក​មាតិកា ឬ ផ្នែក​កណ្ដាល)
  • ចំហៀង (ផ្នែក​ដែល​ស្ថិត​នៅ​ឆ្វេង​ឬ​ស្ដាំ, ជា​ដៃ?)
  • ជើង (ផ្នែក​ក្រោម)

ការ​បែងចែក​ផ្នែក​ទំព័រ

ពី​ត្រង់​នេះ​ទៅ យើង​នឹង​ជជែក​អំពី​ការ​បែងចែក​ផ្នែក​នៃ​ទំព័រ​ដោយ​ផ្អែក​លើ​លក្ខណៈ​រួម​ដែល​ខ្ញុំ​បាន​និយាយ​ពី​ខាង​លើ។

ចំណាំ៖ អ្វី​ដែល​ខ្ញុំ​និយាយ​នៅ​ក្នុង​មេរៀន​នេះ គឺ​ផ្អែក​ទៅ​លើ​បទពិសោធន៍​ផ្ទាល់​ខ្លួន លក្ខណៈ​ទូទៅ​ដែល​គេ​រៀបរាប់​ក្នុង​ឯកសារ​កន្លង​មក​ដែល​ខ្ញុំ​បាន​អាន និង​ផ្អែក​លើ​ការ​វិភាគ​ដោយ​ខ្លួនឯង​ទៅ​លើ​វេបសាយ​មួយ​ចំនួន​ដែល​ខ្ញុំ​បាន​ចូល​មើល។ ចាំ​ក្នុង​ចិត្ត​ថា សមាសភាគ​ដែល​ស្ថិត​នៅ​ក្នុង​ផ្នែក​នីមួយៗ វា​អាច​ខុសៗ​គ្នា​ពី​ប្រភេទ​វេបសាយ​មួយ​ទៅ​មួយ​ទៀត។

ប្លង់​គោល
យើង​នឹង​យក​ប្លង់​មួយ​នេះ​ជា​គម្រូ​ក្នុង​ការ​ជជែក​អំពី​ផ្នែក​នីមួយៗ។

ផ្នែក​លើ (Header)

Header Highligh

នៅ​ត្រង់​ផ្នែក​ក្បាល​នេះ ជា​កន្លែង​សម្រាប់​បង្ហាញ​ឲ្យ​ឃើញ​អំពី​រឿង​សំខាន់​ពីរ៖

  • អត្តសញ្ញាណ​នៃ​វេបសាយ (ឡូហ្គោ, ឈ្មោះ, …)
  • ការ​នាំទិស (ម៉ឺនុយ, ការស្វែងរក, …)

ហើយ​ជាទូទៅ​គឺ​វា​ត្រូវ​មាន​របស់​ពីរ​ហ្នឹង​ស្ទើរ​តែ​មិនដែល​បាត់​ម្ដង​ណា​សោះ។ គេ​អាច​បន្ថែម​សមាសភាគ​ផ្សេង​ទៀត​ដូចជា៖ ការ​ផ្សាយ​ពាណិជ្ជកម្ម, រូបភាព​ផ្សេងៗ, ប៊ូតុង​បណ្ដាញ​សង្គម។ល។ ចំណែក​ម៉ឺនុយ​ដែល​ស្ថិត​នៅ​ក្នុង “ការ​នាំទិស” វា​អាច​មាន​ច្រើន​ប្រភេទ​ទៅ​តាម​ការ​កំណត់ ដូចជា​ម៉ឺនុយ​សម្រាប់​ទំព័រ​ទូទៅ, ម៉ឺនុយ​អត្តសញ្ញាណ (អំពី​យើង, ទាក់ទង​យើង, …), ម៉ឺនុយ​សម្រាប់​ចូល​គណនី​និង​ចុះឈ្មោះ។ល។

ទម្រង់​នៃ​ការ​រចនា​ផ្នែក​ក្បាល

ការ​រៀបចំ​ផ្នែក​ក្បាល​នេះ ក៏​វា​អាស្រ័យ​ទៅ​តាម​អ្នក​ធ្វើ​នីមួយៗ ដូច​ដែល​ខ្ញុំ​បាន​និយាយ​សង្កត់​ពី​ខាង​លើ​មក។ ទម្រង់​នៅ​ខាង​ក្រោម​ទាំង​អម្បាល​គឺ​ជា​សណ្ឋាន​ទូទៅ​ដែល​គេ​តែងតែ​ប្រើប្រាស់​ជា​គោល ដើម្បី​ទៅ​រក​ការ​រៀបចំ​ដែល​ពោរពេញ​ទៅ​ដោយ​ការ​ច្នៃប្រឌិត​ដទៃ​ទៀត។

Header 1

Header 2

Header 3

Header 4

មាតិកា (Main Content)

Content Highlight

ផ្នែក​មាតិកា ឬ Main Content ផ្ដោត​ជា​សំខាន់​លើ​ព័ត៌មាន​ចម្បង​ដែល​អ្នក​ចង់​បង្ហាញ​ទៅ​ឲ្យ​អ្នក​អាន អាច​មាន៖

  • រូបភាព​ស្លាយ
  • បញ្ជី​អត្ថបទ​ថ្មីៗ
  • ខ្លឹមសារ​ឬ​អត្ថបទ​លេចធ្លោ (អត្ថបទ​ដែល​គេ​ចូល​មើល​ច្រើន, ការ​ផ្សាយ​ពាណិជ្ជកម្ម, ព័ត៌មាន​សំខាន់ៗ)
  • ការ​ទាញ​អារម្មណ៍​អ្នក​អាន (ការ​ចុះឈ្មោះ​តាមដាន​ព័ត៌មាន​ថ្មីៗ, សំណូមពរ​ធ្វើ​វិភាគទាន, សម្រង់​សម្ដី​របស់​អតិថិជន​ចំពោះ​សេវាកម្ម, សេវាកម្ម​ថ្មីៗ, …)
  • និង​ចំណុច​ផ្សេងៗ​ជាច្រើន​ទៀត តម្រូវ​ទៅ​តាម​គោលដៅ​របស់​វេបសាយ​ឬ​ស្ថាប័ន។

ការ​រចនា​ដ៏​សាមញ្ញ​មួយ​ចំពោះ​ផ្នែក​មាតិកា៖

Content Sample

ចំហៀង (Sidebar)

Sidebar Highlight

ផ្នែក​ចំហៀង​ប្រើ​សម្រាប់​បង្ហាញ​ព័ត៌មាន​មួយ​ចំនួន​ដែល​គួរតែ​មាន​វត្តមាន​នៅ​តាម​បណ្ដា​ទំព័រ​នានា៖

  • បញ្ជី​អត្ថបទ​ឬ​ព័ត៌មាន​ថ្មីៗ
  • ការ​ផ្សាយ​ពាណិជ្ជកម្ម
  • រូបភាព​ស្លាយ​មួយ​ចំនួន
  • ព័ត៌មាន​លេចធ្លោ​ដែល​គួរ​ឃើញ​នៅ​គ្រប់​ទំព័រ

វា​អាច​មាន​អ្វី​ប្លែក​ផ្សេង​ពី​នេះ​ទៀត​ទៅ​តាម​ការ​ចូលចិត្ត​និង​តម្រូវការ​របស់​អ្នក។

ឧទាហរណ៍​នៃ​ផ្នែក​ចំហៀង៖

Sidebar Sample

ផ្នែក​ក្រោម (Footer)

Footer Highlight

សម្រាប់​ផ្នែក​ក្រោម​នេះ​វិញ ជាទូទៅ​យើង​អាច​ឃើញ​គេ​ប្រើ​ព័ត៌មាន​ខុសៗ​គ្នា ហើយ​ក្នុង​នោះ​មាន​ដូចជា៖

  • បញ្ជី​ម៉ឺនុយ​នាំទិស៖ ប្រសិនបើ​ម៉ឺនុយ​នៅ​ខាង​លើ​មាន​បញ្ជី​ធ្លាក់ (dropdown) គេ​នឹង​បង្ហាញ​ក្នុង​ភាព​ស្មើ​តែ​ម្ដង គឺ​រាយ​បង្ហាញ​ទាំងអស់ ដោយ​គ្មាន​បាច់​ត្រូវ​ប្រើ​បញ្ជី​ធ្លាក់​ទៀត​នោះ​ទេ។
  • ព័ត៌មាន​អំពី​សិទ្ធិ​ប្រើប្រាស់​មាតិកា និង​ការ​រក្សាសិទ្ធិ​មាតិកា។
  • ព័ត៌មាន​ទាក់ទង, អាសយដ្ឋាន, ផែនទី។ល។

 

ខ្ញុំ​នឹង​រៀបចំ​ផ្នែក​ក្រោម​នេះ​យ៉ាង​សាមញ្ញ​ដូច្នេះ៖

Footer Sample

ផ្គុំ​ចូលគ្នា

ឥឡូវ​យើង​សាក​ផ្គុំ​ផ្នែក​ទាំង​បួន​នេះ​ចូល​គ្នា តើ​យើង​នឹង​បាន​លទ្ធផល​យ៉ាង​ដូចម្ដេច​ដែរ?

Fullsite

ទែនៗ តែ​ប៉ុណ្ណេះ​យើង​បាន​រូបរាង​វេបសាយ​យ៉ាង​ធម្មតា​មួយ​ស្រេច!

នេះ​គ្រាន់តែ​ជា​ការ​បង្ហាញ​ដ៏​ត្រួសៗ​អំពី​ផ្នែក​នីមួយៗ ឬ​អាច​ថា​ជា​ការណ៍​ដែល​ខ្ញុំ​ផ្ដល់​គំនិត​គោលៗ​សម្រាប់​អ្នក​ទាំងអស់​គ្នា ទុក​ធ្វើ​ជា​ទុន​ពង្រីក​ទៅ​ថ្ងៃ​ក្រោយ​ទៀត។ ចងចាំ​ថា ការ​រចនា​វេបសាយ តែងតែ​មាន​ភាព​ខុស​ប្លែក​គ្នា​ពី​មួយៗ​ទៅ ទោះបី​មាន​ការ​ប្រើប្រាស់​ផ្នែក​ទាំង​បួន​ដូច​គ្នា​មែន ក៏​សមាសភាគ​នៅ​ក្នុង​នោះ​មាន​លក្ខណៈ​ខុស​គ្នា​ដែរ ពីព្រោះ​ថា​យើង​ត្រូវ​ធ្វើ​ឲ្យ​ស្រប​ទៅ​តាម​កាលៈទេសៈ ប្រភេទ និង​ការ​ពេញចិត្ត​ឬ​គំនិត​របស់​ភ្ញៀវ។

ការ​ជ្រើសរើស​ទំហំ​សមស្រប

មុន​ពេល​កម្រើក​ចុង​ម្រាម​ចុច​សរសេរ​កូដ​ឬ​រចនា​រូបរាង​វេបសា​មួយ ចំណុច​មួយ​ក្នុង​ចំណោម​ចំណុច​ដំបូងៗ​ដែល​យើង​ត្រូវ​គិត​នោះ​គឺ «ការ​ជ្រើសរើស​ទំហំ​សមស្រប» មួយ។ ហេតុអ្វី? បើ​ប្រើ​ឧទាហរណ៍​ថា មុន​ពេល​យើង​កាត់​ខោអាវ យើង​ត្រូវតែ​វាស់​រាងរៅ​របស់​ភ្ញៀវ សួរ​ចិត្ត​ភ្ញៀវ ប្រើ​គំនិត​ច្នៃប្រឌិត​ដើម្បី​បំប្លែង​គំនិត​របស់​ភ្ញៀវ​ឲ្យ​ទៅ​ម៉ូត​ខោអាវ​ដែល​គេ​ពេញចិត្ត និង​ផ្ដល់​សេចក្ដី​ណែនាំ​ទៅ​ឲ្យ​ភ្ញៀវ​វិញ​ប្រសិនបើ​អ្នក​គិត​ថា​វិធី​ណាមួយ​ល្អ​សម្រាប់​ពួកគេ។ ទំហំ​វេបសាយ​នេះ​ក៏​អ៊ីចឹង​ដែរ។

ការ​ជ្រើសរើស​ទំហំ​របស់​វេបសាយ (ផ្ដោត​សំខាន់​លើ​ប្រវែង​កាត់​ទទឹង – width) ហើយ​ការ​សម្រេច​ចិត្ត ត្រូវ​ជាប់​ទាក់ទង​នឹង​អត្តសញ្ញាណ​ឬ​ប្រភេទ​នៃ​វេបសាយ​មួយ​នោះ។ ពោល​គឺ​មិនមែន​គ្រប់​វេបសាយ​សុទ្ធ​តែត្រូវ​មាន​ទំហំ​ដូចៗ​គ្នា​នោះ​ទេ ហើយ​ទំហំ​នោះ​ទៀត​សោត​ក៏​ត្រូវតែ​សមស្រប​ទៅ​កាលៈទេសៈ។

នៅ​ត្រង់​នេះ ខ្ញុំ​នឹង​និយាយ​ដោយ​ខ្លី​អំពី​ទំហំ​មួយ​ចំនួន​ដែល​គេ​តែងតែ​និយម​ប្រើ៖

  • 960px – 980px៖ ជា​ទំហំ​មួយ​ដែល​សមល្មម (បំផុត) សម្រាប់​អេក្រង់​ដែល​មាន​គុណភាព​បង្ហាញ (screen resolution) ចាប់ពី​ប្រវែង​កាត់​ទទឹង 1024px ឡើង​ទៅ។
  • 1024px – 1200px៖ ប្រសិនបើ​យើង​និយាយ​អំពី​បរិបទ​បច្ចុប្បន្ន ដោយ​ផ្អែក​លើ​​ស្ថិតិ​ពី​វេបសាយ​មួយ​ចំនួន (ដូចជា៖ http://www.w3schools.com/browsers/browsers_display.asp) យើង​នឹង​ឃើញ​ថា​អេក្រង់​ដែល​មាន​គុណភាព​បង្ហាញ 1366px × 768px ត្រូវ​គេ​ប្រើ​ច្រើន​ជាង​គេ។ ដូច្នេះ​ហើយ ទំហំ​ពី 1024px – 1200px ជា​ទំហំ​សមស្រប​សម្រាប់​អេក្រង់​ទំហំ​នេះ​ឬ​ធំ​ជាង​នេះ។
  • លើស​ពី​នេះ? វា​ជា​ការ​សម្រេច​របស់​អ្នក តែ​បើ​ផ្អែក​លើ​បទពិសោធន៍​អ្នក​ប្រើប្រាស់ គេ​កម្រ​នឹង​ធ្វើ​វេបសាយ​ណា​ដែល​មាន​ទំហំ​ធំ​ពេក​ណាស់ ពីព្រោះ​វា​ធ្វើ​ឲ្យ​ភ្នែក​របស់​អ្នក​មើល​វេបសាយ​នោះ​ឆាប់មាន​ភាព​ហត់នឿយ ហើយ​អាច​ធ្វើ​ឲ្យ​មាន​ការ​ភ័ន្ត​ច្រឡំ​នៅ​ត្រង់​ចំណុច​មួយ​ចំនួន។

ការ​រចនា​បែប Responsive

តើ​រចនា​តែ​មួយ​បែប​ហើយ ពិត​ជា​អាច​ប្រើ​បាន​មែន​ទេ? តើ​ទ្រង់ទ្រាយ​វេបសាយ​នោះ​បង្ហាញ​យ៉ាង​ដូចម្ដេច​ចំពោះ​អេក្រង់​ឧបករណ៍​ផ្សេងៗ​ទៀត (ទូរស័ព្ទ, ថាប្លិត, …)? សាក​បង្រួម​ទំហំ​វីនដូ​របស់​ប្រោវស័រ ចំពោះ​វេបសាយ​មួយ​ចំនួន​វា​នឹង​មាន​ការ​បង្ហាញ​សណ្ឋាន​ផ្សេង​ក្នុង​ពេល​ផ្ទៃ​បង្ហាញ​មាន​ទំហំ​តូច។

មិនបាច់​សាក​នឹង​វេបសាយ​ខ្ញុំ​ទេ ពីព្រោះ​វេបសាយ​ខ្ញុំ​ស្ទើរតែ​គ្មាន​ត្រង់ណា​ដែល​ត្រូវ​ប្ដូរ​សណ្ឋាន​ពេល​អេក្រង់​រួមតូច។ ប្រសិនបើ​មិន​ចង់​បង្រួម​ទំហំ​វីនដូ​របស់​ប្រោវស័រ​ទេ អ្នក​អាច​សាកល្បង​នៅ​ក្នុង​វេបសាយ​នេះ​បាន៖ http://responsivetest.net

សង្ឃឹម​ថា​អ្នក​ទទួល​បាន​គំនិត​ខ្លះៗ​អំពី​គោលការណ៍​រចនា​មួយ​នេះ។


រូបភាព

[WDC101] មេរៀន​ទី១៖ ការ​ណែនាំ​អំពី​ការ​អភិវឌ្ឍ​វេប

មាតិកា​មេរៀន

 

វា​ជា​ការ​ចាំបាច់​ដែល​យើង​ត្រូវ​ដឹង​អំពី​និយមន័យ​និង​កម្មវត្ថុ​នៃ​ការ​សិក្សា​និង​មេរៀន​នីមួយៗ។ នៅ​ក្នុង​មេរៀន​ទី១ យើង​នឹង​ជជែក​ទៅ​លើ​រឿងរ៉ាវ​ទូទៅ​ដែល​កើត​មាន​នៅ​ក្នុង​ជំនាញ​មួយ​នេះ។

ការ​អភិវឌ្ឍ​វេប ឬ Web Development វា​ជា​ពាក្យ​មួយ​ដ៏​ទូលាយ​សំដៅយក​ការងារ​ទាំងឡាយ​ណា​ដែល​រួម​មាន​ការ​អភិវឌ្ឍ​វេបសាយ​សម្រាប់​អ៊ីនធឺណិត មាន​ទំហំ​ចាប់​ពី​ត្រឹម​ទំព័រ​ធម្មតា​ដល់​កម្មវិធី​ដែល​មាន​ភាព​ស្មុគស្មាញ។ ពាក្យ​នេះ​អាច​មាន​ន័យ​ផ្សេងៗ​ទៀត​ទៅ​តាម​បរិបទ​និង​ស្ថានភាព​ប្រើប្រាស់។ នៅ​ក្នុង​ការ​អភិវឌ្ឍ​វេប​មាន​ដូចជា៖ វិស្វកម្ម​វេប, ការ​រចនា​វេប, ការ​អភិវឌ្ឍ​មាតិកា​វេប, ការ​បង្កើត​កម្មវិធី client/server, ម៉ាស៊ីន​បម្រើ​វេប, e-Commerce។ល។ បច្ចុប្បន្ន​នេះ ការ​អភិវឌ្ឍ​វេប​ក៏​អាច​សំដៅ​យក​ការ​បង្កើត​ប្រព័ន្ធ​គ្រប់គ្រង​មាតិកា​ដែរ។ [Wikipedia: Web Development]

ដោយសារតែ​ទំហំ​នៃ​ការ​អភិវឌ្ឍ​វេប វា​ធំ​ទូលំទូលាយ​ពេក ខ្ញុំ​ក៏​យក​តែ​ប៉ុន្មាន​ចំណុច​នៅ​ក្នុង​ផ្នែក​នោះ មក​បកស្រាយ​នៅ​ក្នុង​ស៊េរី​មេរៀន​មួយ​នេះ​សម្រាប់​អ្នក​ចាប់ផ្ដើម​ដំបូង៖

  • មូលដ្ឋាន​វេប
  • ការ​រចនា​វេប (Web Design)
  • ការ​បង្កើត​កម្មវិធី​វេប (Web Application – client/server)
  • ប្រព័ន្ធ​គ្រប់គ្រង​មាតិកា (Content Management System)
  • ម៉ាស៊ីន​បម្រើ​វេប (Web Server)

ទិដ្ឋភាព​ទូទៅ

សំណួរ​សួរ​ថា តើ​ទំព័រ​វេប​ដែល​អ្នក​ឃើញ​នៅ​លើ​អេក្រង់​នេះ វា​បាន​មក​ដោយ​វិធី​ណា?

client-server

 

រូបភាព​ខាងលើ​នេះ​គឺ​ជា​សេចក្ដី​សង្ខេប​មួយ​អំពី​ដំណើរការ​មួយ​នេះ ប៉ុន្តែ​តាម​ការណ៍​ពិត​គឺ​វា​មាន​ច្រើន​លើស​ពី​នេះ។ តួអង្គ​និង​សកម្មភាព​នៅ​ក្នុង​រូប​ខាងលើ​រួម​មាន៖

  • Client – តំណាង​ឲ្យ​អ្នក​ប្រើប្រាស់ ឬ​ក៏ Web Browser
  • Page request – ជា​សកម្មភាព​ស្នើ​រក​ទំព័រ​ដោយ​អាស្រ័យ​ទៅ​លើ​អាសយដ្ឋាន
  • Internet – ជា​កន្លែង​ធ្វើការ​ច្រើន​ផ្សេង​ទៀត ដើម្បី​នាំ​ទិស​ទៅ​ដល់​អាសយដ្ឋាន​មួយ​នោះ
  • Server – ជា​កន្លែង​ទុកដាក់​ឯកសារ ដែល​មាន​អាសយដ្ឋាន​ដូច​ក្នុង​សំណើ​ខាង​លើ
  • Page response – ជា​ការ​ឆ្លើយតប​ដោយ​ភ្ជាប់​មក​នូវ​ទំព័រ​ដែល​សមស្រប​ទៅ​តាម​សំណើ​ខាង​លើ ជា​ទម្រង់ HTML មក​ឲ្យ​ខាង​អ្នក​ប្រើប្រាស់​វិញ។

Client-side & Server-side

នៅ​ក្នុង​ការងារ​នេះ អ្នក​អាច​នឹង​ឧស្សាហ៍​ឮ​គេ​និយាយ​ពាក្យ client និង server។ គេ​ហៅ​វា​កាត់ៗ​ដោយ​បំបាត់​ពាក្យ side។ បើ​យើង​ប្រៀបធៀប​ឲ្យ​ងាយ​ទៅ វា​ដូចជា​អ្នក​ចូល​ហាង​លក់​សាច់​មាន់​បំពង ហើយ​កុម្មង់​ភ្លៅមាន់​បួន​ដុំ។

ក្នុង​ការ​ប្រៀបធៀប​នេះ យើង​ដែល​ជា​អ្នក​កុម្មង់​គឺ​ជា​ភ្ញៀវ (client) ហើយ​អ្នក​ទទួល​ការ​កុម្មង់​ឬ​បុគ្គលិក គឺ​ជា​អ្នក​បម្រើ​ភ្ញៀវ (server)។ អ៊ីចឹង តើ​អ្នក​គិត​ថា​អ្នក​នឹង​ទទួល​បាន​អ្វី? ប្រាកដ​ណាស់! គឺ​អ្នក​នឹង​ទទួល​បាន​ភ្លៅ​មាន់​បួន​ដុំ​ទៅ​តាម​ការ​កុម្មង់ ក្រោយ​ពេល​ពួកគេ​បំពង​និង​ខ្ចប់​ឲ្យ​អ្នក​រួច។ អូ៎! កុំ​ភ្លេច​យក​ទឹក​ម្ទេស​ថែម​ផង។

Client-side

Client-side សំដៅ​យក​ការងារ​ទាំងឡាយ​ណា​ដែល​ត្រូវបាន​ធ្វើ​នៅ​ខាង client ឬ​លើ​កុំព្យូទ័រ​របស់​អ្នក​ប្រើប្រាស់។ មាន​ន័យ​ថា ការងារ​មួយ​ចំនួន​មិន​ត្រូវ​បាន​ធ្វើ​នៅ​ឯ​ខាង server ទេ តែ​ផ្ដល់​ការងារ​នោះ​មក​ឲ្យ​ខាង client ជា​អ្នក​អនុវត្ត​វិញ។ ឧទាហរណ៍​ដូចជា​ការ​ប្រើប្រាស់ JavaScript ដើម្បី​បង្កើត​កម្មវិធី​លើ​ទំព័រ​តែ​មួយ (single-page application), ឬ​ក៏​ការ​ធីក​យក​អ៊ីមែល (Select all) ដែល​អ្នក​តែង​ឃើញ​នៅ​ក្នុង Gmail និង Yahoo។ល។

Server-side

តាម​អ្វី​ដែល​បាន​រៀបរាប់​ពី​ខាងលើ យើង​អាច​និយាយ​បាន​ថា server-side ជា​ការងារ​ទាំងឡាយ​ណា​ដែល​ត្រូវបាន​ធ្វើ​នៅ​ខាង server។ តើ server វា​ស្ថិត​នៅ​ឯណា? ជាទូទៅ វា​ស្ថិត​នៅ​កន្លែង​មួយ​ឆ្ងាយ​ពី​យើង ហើយ​វា​មាន​អាសយដ្ឋាន​ជាក់​លាក់​ណា​មួយ​ដែល​យើង​អាច​រក​វា​ឃើញ​បាន។ ការងារ​ចម្បង​របស់ server គឺ​ចាំ​ទទួល​សំណើ​ពី​ខាង client ហើយ​អនុវត្ត​ទៅ​តាម​សំណើ​នោះ។ វា​អាច​ជា​ការ​គណនា​ដ៏​ស្មុគស្មាញ, ការ​ផ្ដល់​ព័ត៌មាន​ដែល​ចាំបាច់​មក​ខាង client, ជា​អ្នក​រក្សាទុក​ទិន្នន័យ​ទុក​ប្រើការ​ពេល​ក្រោយ។ល។

សាកល្បង​គិត

នៅ​ត្រង់​នេះ​ខ្ញុំ​លើក​យក​សេណារីយ៉ូ​ពីរ​មក​និយាយ។

សេណារីយ៉ូ​ទី១៖ សាច់គោ​អាំង​រួច​ស្រាប់

  1. យើង​ចូល​ទៅ​ហាង​លក់​សាច់គោ​អាំង​មួយ​កន្លែង នៅ​ម្ដុំ​ផ្សារ​បឹងកេងកង
  2. យើង​ហៅ​អ្នករត់តុ
  3. យើង​កុម្មង់​សាច់គោ​អាំង​ទៅ​តាម​តម្រូវការ
  4. យើង​អង្គុយ​ចាំ​សាច់គោ
  5. សាច់គោ​ក៏​មក​ដល់ យើង​ហូប​បាន​ភ្លាម!

សេណារីយ៉ូ​ទី២៖ សាច់គោ​អាំង​ដោយ​ភ្ញៀវ

  1. យើង​ចូល​ទៅ​ហាង​លក់​សាច់គោ​អាំង​មួយ​កន្លែង នៅ​ម្ដុំ​ផ្សារ​ទួលគោក
  2. យើង​ហៅ​អ្នករត់តុ
  3. យើង​កុម្មង់​សាច់គោ​ទៅតាម​តម្រូវការ
  4. យើង​អង្គុយ​ចាំ​សាច់គោ
  5. សាច់​គោ​ក៏​មកដល់ ប៉ុន្តែ​យើង​ត្រូវ​អាំង​ដោយ​ខ្លួន​ឯង
  6. អាំង​ខ្លួន​ឯង​ហើយ ទើប​យើង​ហូប​បាន!

នៅ​ក្នុង​សេណារីយ៉ូ​ទាំង​ពីរ​នេះ យើង​អាច​មើល​ឃើញ​ដំណើរការ​ចំនួន​ពីរ​ខុស​គ្នា​គឺ៖ ឲ្យ​ភ្ញៀវ​ធ្វើការ​តិច និង ឲ្យ​ភ្ញៀវ​ធ្វើការ​ច្រើន។ បើ​ត្រឡប់​មក​មេរៀន​យើង​វិញ វា​ប្រៀប​បាន​ដូចជា​បែបផែន​អនុវត្ត​ការងារ​ចំនួន​ពីរ​យ៉ាង៖

  • ឲ្យ client ធ្វើការ​តិច​ជាង server
  • ឲ្យ client ធ្វើការ​ច្រើន​ជាង server

សំណួរ៖ តើ​បែបផែន​មួយ​ណា​ដែល​ល្អ​ប្រសើរ​ជាង? ហេតុ​អ្វី?

សូម​សាកល្បង​ឆ្លើយ​សំណួរ​ដ៏​ខ្លី​នេះ។ អ្នក​អាច​ឆ្លើយ​ទុក​ក្នុង​ចិត្ត ឬ​ក៏​សរសេរ​ជា​មតិ​នៅ​ខាងក្រោម​មេរៀន​នេះ។ ខ្ញុំ​នឹង​ជួយ​បន្ថែម​ទៅ​លើ​ការ​យល់ឃើញ​របស់​អ្នក។ ខ្ញុំ​ឲ្យ​គន្លឹះ​បន្តិច​ថា​ការ​លើក​យក​ករណី (សើៗ) មួយ​នេះ​មក​បង្ហាញ វា​ជា​ការ​ចាប់ផ្ដើម​បណ្ដុះ​ចិត្ត​គំនិត​ឲ្យ​យក​ចិត្ត​ទុកដាក់​នៅ​ពេល​អ្នក​ចាប់ផ្ដើម​ធ្វើ​វេបសាយ​មួយ។ ត្រឹមតែ​ការ​ថែម​ថយ​មួយ​ចំណុច​នេះ ក្នុង​ករណី​ជាក់ស្ដែង វា​អាច​ជះ​ឥទ្ធិពល​យ៉ាង​ខ្លាំង​ទៅ​ដល់​ល្បឿន​ដំណើរការ​របស់​វេបសាយ​នោះ។ តែ​វា​មាន​មូលហេតុ​ផ្សេង​ទៀត ដែល​អ្នក​គួរ​តែ​សាកល្បង​ឆ្លើយ ដើម្បី​បណ្ដុះ​គំនិត​បន្ថែម។

ទំព័រ​ឥត​ប្រែប្រួល & ទំព័រ​ឌីណាមិក

ក្រៅ​អំពី​រឿងរ៉ាវ​របស់ server-side និង client-side, ចំណុច​មួយ​នេះ​គឺ​ជា​រឿង​ដែល​យើង​គួរ​ដឹង​ជា​ចាំបាច់​ដែរ ពីព្រោះ​ថា​វា​ជា​រឿង​បឋម ហើយ​ក៏​ជា​រឿង​ស្នូល​នៅ​ក្នុង​ការ​សិក្សា​អំពី​ការ​អភិវឌ្ឍ​វេប។

ទំព័រ​ឥត​ប្រែប្រួល – Static Web Page

ទំព័រ​ឥត​ប្រែប្រួល គឺជា​ទំព័រ​វេប​ដែល​គេ​សរសេរ​រួច​ហើយ​ស្រាប់ មាន​រក្សាទុក​នៅ​ឯ​ម៉ាស៊ីន​បម្រើ (server) ហើយ​បង្ហាញ​ទៅ​ឲ្យ​អ្នក​ប្រើ​តាម​អ្វី​ដែល​វា​មាន។ និយាយ​ឲ្យ​ខ្លី​គឺ សរសេរ​ទុក​យ៉ាង​ម៉េច បង្ហាញ​មក​យ៉ាង​ហ្នឹង។ ទោះបីជា​នរណា​ម្នាក់​បើក​ទំព័រ​នោះ ក៏​ពួកគេ​ឃើញ​មាតិកា​ដូចៗ​គ្នា គ្មាន​អ្វី​ប្រែប្រួល​ដូច​ទំព័រ​ឌីណាមិក​នោះ​ទេ។

បើ​យើង​និយាយ​ម្យ៉ាង​ទៀត វា​មិន​ខុស​អី​ពី​ឯកសារ txt ដែល​យើង​សរសេរ​ទុក​នៅ​លើ​ហាតឌីស ហើយ​បើក​មើល​ម្ដង​ណា ក៏​វា​នៅ​តែ​ប៉ុណ្ណឹង​ដដែល។ ទោះ​ឲ្យ​នរណា​បើក​មើល ក៏​នៅ​តែ​ប៉ុណ្ណឹង គឺ​វា​គ្មាន​ការ​ប្រែប្រួល​ទៅ​តាម​បរិបទ​នោះ​ទេ។

ទំព័រ​ឥត​ប្រែប្រួល​នេះ ច្រើនតែ​ជា​ប្រភេទ .html ពីព្រោះ​ថា HTML គឺ​ជា​[ទម្រង់]​ឯកសារ​ចម្បង​បំផុត​នៅ​ក្នុង​ការ​បង្កើត​វេប ហើយ​វា​ជា​អ្វី​ដែល browser អាច​អាន​និង​ប្រែ​ឲ្យ​យើង​អាច​ឃើញ​បាន។ យើង​នឹង​ជជែក​បន្ថែម​អំពី HTML នៅ​មេរៀន​ខាង​មុខ​ទៀត។ ប្រសិនបើ​គេ​ចង់​កែសម្រួល​មាតិកា​នៅ​ក្នុង​នោះ គេ​ចាំបាច់​ត្រូវ​កែ​កូដ​របស់​វា រួច​ទើប​អាប់ឡូត​ចូល​ទៅ​ក្នុង​ម៉ាស៊ីនបម្រើ​ម្ដង​ទៀត។

គុណសម្បត្តិ

  • ងាយស្រួល​បង្កើត
  • មិន​ត្រូវការ​ម៉ាស៊ីនបម្រើ​ធំ
  • ត្រូវការ​កន្លែង​ទុក​តូច​ល្មម
  • មាន​ល្បឿន​លឿន
  • ចំណាយ​ថវិកា​មិន​ច្រើន
  • មិន​សូវ​ខ្វាយខ្វល់​ច្រើន​អំពី​សុវត្ថិភាព
  • មិន​ត្រូវការ​មូលដ្ឋាន​ទិន្នន័យ

គុណវិបត្តិ

  • គ្មាន​ភាព​បត់បែន
  • ទំព័រ​នៅ​តែ​មួយ​បែប
  • ពិបាក​ក្នុង​ការ​ផ្លាស់ប្ដូរ​មាតិកា​នៅ​ថ្ងៃ​ក្រោយ
  • បាន​ត្រឹមតែ​បង្ហាញ​ព័ត៌មាន​ធម្មតា​និង​មាន​កំណត់​រួច​ស្រាប់

ទំព័រ​ឌីណាមិក – Dynamic Web Page

កូដ​ក្នុង​ការ​បកស្រាយ​ផ្នែក​នេះ​គឺ !static_web_page ។ និយាយ​លេង​ទេ, អ្នក​ប្រហែល​ត្រូវការ​ការ​បកស្រាយ​លើស​ពី​នេះ។ និយាយ​យ៉ាង​ខ្លី​ទៅ​ចុះ ទំព័រ​ឌីណាមិក គឺ​ជា​ទំព័រ​ដែល​ផ្ទុយ​ពី​ទំព័រ​ឥត​ប្រែប្រួល។ តើ​វា​ខុស​គ្នា​យ៉ាង​ដូចម្ដេច​ទៅ?

ទំព័រ​ឌីណាមិក វា​ជា​ទំព័រ​ដែល​ត្រូវ​បាន​បង្កើត​ឡើង​ដោយ​ម៉ាស៊ីន​បម្រើ​ដែល​ស្ថិត​នៅ​ម្ខាង​ទៀត​នៃ​ទំនាក់ទំនង។ មាតិកា​ដែល​មាន​នៅ​លើ​ទំព័រ​ឌីណាមិក គឺ​វា​មាន​លទ្ធភាព​ប្រែប្រួល​គ្រប់​ពេល​វេលា ឬ​ក៏​អាស្រ័យ​ទៅ​លើ​សំណើ​និង​បរិបទ​របស់​អ្នក​ប្រើប្រាស់។ វា​មិនមែន​នៅ​នឹង​ថ្កល់​មួយ​កន្លែង​ដូច​ទំព័រ​ឥត​ប្រែប្រួល​នោះ​ទេ។

ឧទាហរណ៍​ងាយៗ​ដែល​យើង​ធ្លាប់​ឃើញ​នោះ​គឺ Facebook។ យើង​តែងតែ​ឃើញ​វា​ផ្លាស់ប្ដូរ​ទំព័រ​ស្ទើរ​តែ​គ្រប់​ពេល​វេលា ឬ​រាល់​ពេល​ដែល​មាន​បច្ចុប្បន្នភាព​ថ្មីៗ​ពី​មិត្តភក្ដិ​របស់​យើង។ យើង​មើល Google វា​ផ្លាស់ប្ដូរ​មាតិកា​ក្នុង​ទំព័រ​ស្វែងរក រាល់​ពេល​យើង​ផ្លាស់ប្ដូរ​ពាក្យ​គន្លឹះ។ វា​មិន​បាន​បង្កើត​ទំព័រ​លទ្ធផល​សម្រាប់​ពាក្យ​គន្លឹះ​រួច​ជាមុន​ទេ តែ​វា​បង្កើត​ទំព័រ​ទាំង​នោះ​ដោយ​ផ្អែក​លើ​សំណើ​ដែល​វា​ទទួល​បាន​ម្ដងៗ។

គុណសម្បត្តិ

  • មាន​ភាព​បត់បែន
  • អាច​បង្កើត​កម្មវិធី​វេប​ស្មុគស្មាញ
  • បម្រើ​ដល់​ធុរកិច្ច​និង​ប្រព័ន្ធ​ដំណើរការ​គ្រប់គ្រង​របស់​ស្ថាប័ន
  • ងាយស្រួល​ក្នុង​ការ​គ្រប់គ្រង​មាតិកា
  • ផ្លាស់ប្ដូរ​មាតិកា​ដោយ​មិន​ចំណាយ​ពេល​យូរ
  • ផ្ដល់​ទំព័រ​ទៅ​តាម​តម្រូវការ​របស់​អ្នក​ប្រើប្រាស់

គុណវិបត្តិ

  • ចំណាយ​ថវិកា​ច្រើន​គួរសម (ឬ​លើសលប់)
  • ត្រូវការ​ម៉ាស៊ីនបម្រើ​ដែល​មាន​ល្បឿន​លឿន (អាស្រ័យ​ទៅ​តាម​ប្រភេទ​កម្មវិធី​វេប)
  • អាច​មាន​ល្បឿន​យឺត ប្រសិន​បើ​មាន​ការ​រៀបចំ​ស្មុគស្មាញ
  • ត្រូវ​គិតគូរ​ឲ្យ​បាន​ម៉ត់ចត់​អំពី​សុវត្ថិភាព ជា​ពិសេស​ប្រសិន​បើ​កម្មវិធី​វេប​នោះ​បម្រើ​ការ​គ្រប់គ្រង​ព័ត៌មាន​សំខាន់ៗ

ចុះ​តើ​ត្រូវ​ប្រើ​មួយណា? មែន​ទែន​ទៅ បើ​និយាយ​ឲ្យ​ងាយ​បំផុត​នោះ ក្នុង​ការងារ​ជាក់ស្ដែង គេ​ប្រើ​វា​ទាំង​ពីរ​បូក​បញ្ចូល​គ្នា។

How Internet Works

បន្ថែម​នៅ​លើ​ផ្នែក «ទិដ្ឋភាពទូទៅ» នេះ​ជា​ការ​ពន្យល់​តាម​រូប​មួយ​ទៀត​ជា​គំនូរ​ត្លុក។ មើល​រូប​នេះ​ហើយ សាកល្បង​បកស្រាយ​វា​ទៅ​មើល៍!

How Internet Works, Vladstudio, 2009
How Internet Works, Vladstudio, 2009, http://www.vladstudio.com/wallpaper/?how_internet_works

ផ្អាក​បន្តិច – សាកល្បង​គិត​និង​រំឭក​អំពី​ចំណុច​គោលៗ​នៅ​ក្នុង​មេរៀន​មួយ​នេះ ហើយ​សាកល្បង​បកស្រាយ​វា​ទៅ​តាម​ការ​នឹក​ឃើញ​និង​ការ​ចងចាំ។ ធ្វើ​បែប​នេះ អ្នក​អាច​ជួយ​អភិវឌ្ឍ​ការ​ចងចាំ​និង​ការ​យល់​អំពី​មេរៀន​នីមួយៗ។

សេចក្ដី​សន្និដ្ឋាន

ទាំងអស់​នេះ​គឺ​ជា​ការ​ណែនាំ​ខ្លះៗ​អំពី​ការ​អភិវឌ្ឍ​វេប។ វា​មិន​ទាន់​គ្រប់គ្រាន់​នៅ​ឡើយ​ទេ ពីព្រោះ​បើ​សរសេរ​ទាំងអស់ វា​ត្រូវការ​ពេល​វេលា​ច្រើន ហើយ​អាច​នឹង​ហួស​ពី​ទំហំ​មេរៀន។ ខ្ញុំ​បាន​ព្យាយាម​តម្រឹម​យក​ត្រឹម​មួយ​សមល្មម ឲ្យ​អ្នក​អាច​ដឹង​ត្រួសៗ​អំពី​និយមន័យ​និង​រឿងរ៉ាវ​មួយ​ចំនួន​នៅ​ក្នុង​ផ្នែក​នេះ ហើយ​ប្រាប់​គោលៗ​ដើម្បី​ឲ្យ​អ្នក​អាច​សិក្សា​ស្រាវជ្រាវ​បន្ថែម​ទៀត។

មុន​បញ្ចប់​ការ​អាន​មេរៀន​នេះ និង​ដើម្បី​បន្ថែម​ចំណេះ​ដឹង​ទៅ​លើ​ផ្នែក​នេះ ខ្ញុំ​ចង់​ឲ្យ​អ្នក​សាកល្បង​សិក្សា​ខ្លួនឯង​បន្ថែម​ទៀត​ទៅ​លើ​ចំណុច​មួយ​ចំនួន​ទៀត​ដូចជា (អាច​មាន​ចំណុច​ខ្លះ វា​ជ្រៅ)៖

  • Hosting server
  • DNS server
  • Domain name
  • TCP/IP
  • Hypertext Transfer Protocol (HTTP)
  • HTTP Secure
  • File Transfer Protocol (FTP)

បើ​មាន​ចម្ងល់​ឬ​យោបល់​ផ្សងៗ​នៅ​ក្នុង​មេរៀន​នេះ សូម​សរសេរ​នៅ​ខាង​ក្រោម។ ខ្ញុំ​នឹង​ព្យាយាម​ឆ្លើយតប​តាម​តែ​អាច​ធ្វើ​ទៅ​បាន។ ជួប​គ្នា​នៅ​សប្ដាហ៍​ក្រោយ!

គម្រោង​ស៊េរី​មេរៀន​អំពី​ការ​អភិវឌ្ឍ​វេប

វេប (Web) បច្ចុប្បន្ន​ជា​ទីកន្លែង​មួយ​សម្រាប់​តភ្ជាប់​មនុស្ស​ពី​គ្រប់​មជ្ឈដ្ឋាន ឲ្យ​អាច​ទាក់ទង​គ្នា​បាន​យ៉ាង​ងាយស្រួល ដោយ​អភិវឌ្ឍ​កម្មវិធី​វេប​តែ​មួយ​លើក​ប៉ុណ្ណោះ។ ប៉ុន្មាន​ឆ្នាំ​ចុងក្រោយ​នេះ​នៅ​កម្ពុជា វេប​ក៏​បាន​ក្លាយ​ជា​ទី​ចាប់អារម្មណ៍​របស់​និស្សិត​ព័ត៌មានវិទ្យា​ស្ទើរតែ​គ្រប់ៗ​គ្នា។ មាន​សៀវភៅ​មួយ​ចំនួន​​បាន​បោះពុម្ព​ជា​ភាសាខ្មែរ​និយាយ​អំពី​ការ​អភិវឌ្ឍ​វេប ប៉ុន្តែ​ក៏​មិន​ទាន់​អាច​ថា​សម្បូរ​និង​គ្រប់គ្រាន់​នោះ​ទៅ បើ​តាម​ការ​គិត​របស់​ខ្ញុំ។ ដូច្នេះ​ហើយ ដើម្បី​រួម​ចំណែក និង​ដោយ​ក្ដី​ពេញ​ចិត្ត​ក្នុង​ការ​ចែករំលែក​ចំណេះ​ដឹង ខ្ញុំ​ក៏​រៀបចំ​គម្រោង​មួយ​នេះ​ឡើង។

បញ្ហា & ការ​យល់ឃើញ

ការ​រៀន​ធ្វើ​វេប​ជា​លើក​ដំបូង (កាលបើ​មិន​ចេះ​សោះ) បើ​មើល​តែ​សៀវភៅ វា​ហាក់​មាន​ការ​លំបាក ពីព្រោះ​វា​ត្រូវការ​មាន​ឧទាហរណ៍​ជាកូដ​ផង និង​ជា​ឧទាហរណ៍​ជា​រូបរាប​ជាក់ស្ដែង​ផង ដែល​វា​ប្រសើរ​ជាង​ឃើញ​ត្រឹម​រូបភាព​ផ្ដិត​នៅ​លើ​ក្រដាស​សៀវភៅ។ ដោយ​មើល​ឃើញ​បញ្ហា​មួយ​នេះ​ហើយ ទើប​ខ្ញុំ​សម្រេច​ចិត្ត​រៀបចំ​ជា​ស៊េរី​មេរៀន​ជា​មូលដ្ឋាន​សម្រាប់​អ្នក​ចង់​រៀន​ធ្វើ​វេប ឲ្យ​បាន​យល់​ច្បាស់​អំពី​រឿង​សំខាន់​នានា ដើម្បី​ជា​ទុន​សម្រាប់​ការ​រៀន​ទៅ​កម្រិត​ខ្ពស់ៗ​បន្ត​ទៀត។

ក្រៅពី​ចំណុច​មួយ​នេះ ខ្ញុំ​ធ្លាប់​ត្រូវ​សិស្ស​ប្អូន​និង​មិត្តភក្ដិ​មួយ​ចំនួន​សួរ​យោបល់​អំពី​ការ​អភិវឌ្ឍ​វេប។ ដោយ​ខ្ញុំ​មិនមាន​ឯកសារ​ជា​ភាសាខ្មែរ​សម្រាប់​ពួកគេ ខ្ញុំ​មានតែ​ដាច់​ចិត្ត​រក​ជា​ភាសាអង់គ្លេស។ ក៏ប៉ុន្តែ​អ្នក​អាច​នឹង​ដឹង​ថា ភាសា​នៅ​ក្នុង​មុខ​ជំនាញ​នីមួយៗ វា​តែងតែ​ខុស​គ្នា ហើយ​កម្រិត​នៃ​ការ​ចេះ​ភាសាអង់គ្លេស ក៏​មិនមែន​គ្រប់គ្នា​សុទ្ធតែ​ចេះ​ខ្លាំង​ដែរ។ អ៊ីចឹង​ហើយ ទើប​ខ្ញុំ​សន្សំ​ចិត្ត​ថា​នឹង​រៀបចំ​ឯកសារ​ជា​ភាសាខ្មែរ​នេះ​ឡើង ជាពិសេស​នោះ​គឺ​ការ​ពង្រឹង​មូលដ្ឋានគ្រឹះ​ឲ្យ​បាន​រឹងមាំ។

តាមរយៈ​បទពិសោធ​បីបួន​ឆ្នាំ​នៅ​ក្នុង​ជំនាញ​អភិវឌ្ឍ​វេប ខ្ញុំ​គិត​ថា​ខ្ញុំ​គួរ​តែ​ចែករំលែក​វា​នៅ​លើ​អ៊ីនធឺណិត (ជា​ភាសាខ្មែរ) ព្រោះ​វា​ងាយ​ចូល​មើល និង​ទុក​ជា​ឯកសារ​ទៅ​ថ្ងៃ​ក្រោយ​សម្រាប់​អ្នក​ដែល​ចង់​សិក្សា​អំពី​ការ​អភិវឌ្ឍ​វេប។ ហេតុ​ដូច្នេះ​ហើយ​ទើប​ខ្ញុំ​រៀបចំ​គម្រោង​ស៊េរី​មេរៀន​នេះ​ឡើង។ គោលបំណង​ធំ​នៅ​ក្នុង​ស៊េរី​មេរៀន​នេះ មិនមែន​ត្រឹមតែ​ឲ្យ​អ្នក​ចេះ​ធ្វើ​វេបសាយ​ប៉ុណ្ណោះ​ទេ ប៉ុន្តែ​ខ្ញុំ​ក៏​នឹង​បង្ហាញ​គន្លឹះ និង​តិកណិក​ផ្សេងៗ​ទៀត ឲ្យ​អ្នក​ក្លាយ​ទៅ​ជា​អ្នក​អភិវឌ្ឍ​វេប​ម្នាក់​ដែល​លម្អិត​ទៅ​លើ​ចំណុច​សំខាន់ៗ ដើម្បី​អាច​អភិវឌ្ឍ​វេបសាយ​ទៅ​ក្នុង​កម្រិត​មួយ​ដែល​គេ​អាច​ទទួល​ស្គាល់​បាន។ អូ៎! ខ្ញុំ​ក៏​មិនមែន​ជា​អ្នក​ជំនាញ​អី​ដែរ។ 😉

ការ​រៀន & មាតិកា

ស៊េរី​មេរៀន​នេះ​ត្រូវ​រៀបចំ​ឡើង​សម្រាប់​អ្នក​មិន​ចេះ​សោះ ឬ​ក៏​ចេះ​ខ្លះៗ​ពី​មុន​ហើយ។ មេរៀន​នីមួយៗ​នឹង​មាន​ឧទាហរណ៍​ជាក់ស្ដែង​ជា​កូដ​និង​ជា​លទ្ធផល​ផ្ទាល់ ដែល​អ្នក​រៀន​អាច​យក​ទុក​ជា​ឯកសារ​ទៅ​ពេល​ក្រោយ និង​សម្រាប់​មើល​ជា​សេចក្ដី​យោង។

សរុប​មេរៀន​អាច​មាន​លើស​ពី​៩​មេរៀន (មិន​អាច​ប្រាប់​ប្រាកដ​បាន ព្រោះ​ខ្ញុំ​ធ្វើ​បណ្ដើរ និង​គិត​រក​អ្វី​ថ្មីៗ​បណ្ដើរៗ)។ មេរៀន​ទាំងនេះ​នឹង​ពិភាក្សា​លើ​ចំណុច​សំខាន់ៗ រួម​ទាំង​រឿង​តូចៗ​ដទៃ​ទៀត​ដែល​អ្នក​មិន​គួរ​មើល​រំលង។

  1. ការ​ណែនាំ​អំពី​ការ​អភិវឌ្ឍ​វេប (Web Development)
  2. ចំណុច​មួយ​ចំនួន​ដែល​គួរ​យក​ចិត្ត​ទុកដាក់
  3. លក្ខណៈ​ទូទៅ​នៃ​វេបសាយ​មួយ
  4. ការណែនាំ HTML
  5. ការណែនាំ CSS
  6. ការណែនាំ JavaScript
  7. ត្រួសៗ​អំពី Server-side Scripting Language
  8. ឯកសារ​ពិគ្រោះ​ដទៃ​ទៀត
  9. អនុវត្តន៍៖ បង្កើត​វេបសាយ​អង្គការ​ការពារ​ធម្មជាតិ

ស៊េរី​មេរៀន​នេះ​ផ្ដោត​សំខាន់​លើ​មូលដ្ឋានគ្រឹះ លើ​ផ្នែក​ដំបូង​របស់​វេប (HTML, CSS, JavaScript)។

កាលបរិច្ឆេទ​ផ្សាយ

ដោយ​សារ​តែ​ខ្ញុំ​មមាញឹក​នឹង​កិច្ចការ​សាលា​ផង​និង​ការងារ​ផង ខ្ញុំ​នឹង​មិន​អាច​ចេញ​ផ្សាយ​អត្ថបទ​បាន​ជាប់ៗ​គ្នា​នោះ​ទេ។ ដូច្នេះ​ហើយ ខ្ញុំ​នឹង​ផ្សាយ​មេរៀន​ថ្មីៗ​នៅ​រៀងរាល់​មួយ​សប្ដាហ៍​ម្ដង។ ហើយ​មេរៀន​ខ្លះ​ក៏​នឹង​ត្រូវ​បំបែក​ចេញ​ជា​ភាគៗ។ ខ្ញុំ​នឹង​ចាប់ផ្ដើម​ផ្សាយ​អត្ថបទ​ចាប់​ពី​ពាក់​កណ្ដាល​ខែ​ឧសភា។

តម្រូវការ​ជាមុន

  • មិន​ទាន់​ចេះ​វេប តែ​ចេះ​សរសេរ​កូដ​ខ្លះ​ហើយ
  • ធ្លាប់​បាន​ដឹង​ខ្លះៗ​អំពី​ការ​អភិវឌ្ឍ​វេប
  • មាន​ចិត្ត​ចង់ចេះ​ចង់​ដឹង 🙂

សេចក្ដី​បញ្ចប់

ខ្ញុំ​រំពឹង​ថា​គម្រោង​ស៊េរី​មេរៀន​នេះ នឹង​ក្លាយ​ទៅ​ជា​ឯកសារ​តូច​មួយ​សម្រាប់​អ្នក​ដែល​ចង់​អភិវឌ្ឍ​ខ្លួន​នៅ​ក្នុង​ជំនាញ​វេប ហើយ​ខ្ញុំ​ក៏​រំពឹង​ថា​មេរៀន​អស់​ទាំងនេះ​នឹង​ជួយ​អ្នក​ទាំងអស់​គ្នា​លើស​ពី​ត្រឹមតែ​ចេះ​សរសេរ​កូដ

ប្រសិនបើ​ខ្ញុំ​សរសេរ​ទៅ​មាន​កំហុស​ត្រង់ណា​មួយ​នោះ សូម​អ្នក​ទាំងអស់គ្នា​បញ្ចេញ​មតិ​យោបល់​នៅ​ក្នុង​មេរៀន​នោះ។ ខ្ញុំ​ទទួល​យក​គ្រប់​មតិ​កែលម្អ​ទាំងអស់។ 🙂