[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, ការបង្កើតជាកម្មវិធីវេប។ល។

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

<html>
  <head>
    <title>My First Web</title>
  </head>
  <body>
    <p>អត្ថបទដំបូងរបស់ខ្ញុំ។</p>
    <p><b>អក្សរក្រាស់</b>របស់ខ្ញុំ។</p>
  </body>
</html>

<html>

<head>

<title>My First Web</title>

</head>

<body>

<p>អត្ថបទដំបូងរបស់ខ្ញុំ។</p>

</body>

</html>

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

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

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

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

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

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

<html>
  <head>
    <!-- Header Block -->
  </head>
  <body>
    <!-- Main Content -->
  </body>
</html>

<html>

<head>

</head>

<body>

</body>

</html>

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

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

ឧទាហរណ៍៖

This is my content
<b>My bold text</b>

1 2	This is my content <b>My bold text</b>

HTML Tags

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

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

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

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

HTML Attributes

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

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

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

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

.:: Headings ::.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr>

.:: Links ::.
<br><br/>
<a href="http://sovichet.info">Sovichet.info</a><br>
<a href="http://google.com">Google</a><br>
<hr>

.:: Paragraphs ::.
<p><u>This is the</u> <i>content</i> in <b>Paragraph</b>.</p>
<hr>

.:: Images ::.
<br>
<img width="120" src="http://vignette3.wikia.nocookie.net/cartoonnetwork/images/c/c8/Chowder.jpg">
<hr>

.:: Unordered List ::.
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
<hr>

.:: Ordered List ::.
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ol>
<hr>

.:: Table ::.
<br><br>
<table border="1" cellpadding="5">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>K12</td>
      <td>Sokha</td>
      <td>Phnom Penh</td>
    </tr>
    <tr>
      <td>K18</td>
      <td>Kanha</td>
      <td>Kampong Chhnang</td>
    </tr>
    <tr>
      <td>K20</td>
      <td>Bopha</td>
      <td>Kampong Cham</td>
    </tr>
  </tbody>
</table>

.:: Headings ::.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

<hr>

.:: Links ::.

<a href="http://sovichet.info">Sovichet.info</a><br>

<a href="http://google.com">Google</a><br>

<hr>

.:: Paragraphs ::.

<p><u>This is the</u> <i>content</i> in <b>Paragraph</b>.</p>

<hr>

.:: Images ::.

<br>

<hr>

.:: Unordered List ::.

<ul>

</ul>

<hr>

.:: Ordered List ::.

<ol>

</ol>

<hr>

.:: Table ::.

<thead>

<tr>

<th>Location</th>

</tr>

</thead>

<tbody>

<tr>

<td>Sokha</td>

<td>Phnom Penh</td>

</tr>

<tr>

<td>Kanha</td>

<td>Kampong Chhnang</td>

</tr>

<tr>

<td>Bopha</td>

<td>Kampong Cham</td>

</tr>

</tbody>

</table>

.:: 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 ::.

Item 1
Item 2
Item 3
Item 4
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 មួយត្រូវការមានរចនាសម្ព័ន្ធបែបនេះ៖

<form>
  <!-- Form Elements -->
</form>

<form>

</form>

ធាតុ input

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

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

ប្រភេទ text

<form>
  <b>ទីក្រុង:</b><br>
  <input type="text"><br>
  <b>ប្រទេស:</b><br>
  <input type="text">
</form>

<form>

</form>

ប្រភេទ password

<form>
  <b>ពាក្យសម្ងាត់:</b><br>
  <input type="password"><br>
</form>

<form>

</form>

ប្រភេទ checkbox

<form>
  <b>សៀវភៅដែលអ្នកចូលចិត្ត</b>
  <input type="checkbox" name="book" value="self-dev"> ការអភិវឌ្ឍខ្លួន<br>
  <input type="checkbox" name="book" value="history"> ប្រវត្តិសាស្ត្រ<br>
  <input type="checkbox" name="book" value="math"> គណិតវិទ្យា
</form>

<form>

<b>សៀវភៅដែលអ្នកចូលចិត្ត</b>

<input type="checkbox" name="book" value="self-dev"> ការអភិវឌ្ឍខ្លួន<br>

<input type="checkbox" name="book" value="history"> ប្រវត្តិសាស្ត្រ<br>

<input type="checkbox" name="book" value="math"> គណិតវិទ្យា

</form>

ប្រភេទ radio

<form>
  <b>ភេទ</b>
  <input type="radio" name="gender" value="male"> ប្រុស<br>
  <input type="radio" name="gender" value="female"> ស្រី
</form>

<form>

<input type="radio" name="gender" value="female"> ស្រី

</form>

ប្រភេទ submit

<form>
  <b>សៀវភៅដែលអ្នកចូលចិត្ត</b>
  <input type="checkbox" name="book" value="self-dev"> ការអភិវឌ្ឍខ្លួន<br>
  <input type="checkbox" name="book" value="history"> ប្រវត្តិសាស្ត្រ<br>
  <input type="checkbox" name="book" value="math"> គណិតវិទ្យា<br>
  <input type="submit" value="Submit">
</form>

<form>

<b>សៀវភៅដែលអ្នកចូលចិត្ត</b>

<input type="checkbox" name="book" value="self-dev"> ការអភិវឌ្ឍខ្លួន<br>

<input type="checkbox" name="book" value="history"> ប្រវត្តិសាស្ត្រ<br>

<input type="checkbox" name="book" value="math"> គណិតវិទ្យា<br>

</form>

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

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

ឧទាហរណ៍

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

<ul>
  <li><a href="http://google.com">Google</a></li>
  <li><a href="http://facebook.com">Facebook</a></li>
  <li><a href="http://github.com">Github</a></li>
  <li><a href="http://github.info">Sovichet.info</a></li>
  <li><a href="http://wordpress.org">WordPress</a></li>
</ul>

<ul>

<li><a href="http://google.com">Google</a></li>

<li><a href="http://facebook.com">Facebook</a></li>

<li><a href="http://github.com">Github</a></li>

<li><a href="http://github.info">Sovichet.info</a></li>

<li><a href="http://wordpress.org">WordPress</a></li>

</ul>

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

<form>
  <b>ឈ្មោះ:</b><br>
  <input type="text"><br>
  <b>ពាក្យសម្ងាត់:</b><br>
  <input type="password"><br>
  <button type="submit">ចូល</button>
</form>

<form>

</form>

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

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

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

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

May 25, 2016June 21, 2016

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

មាតិកាមេរៀន

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

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

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

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

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

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

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

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

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

ផ្នែកលើ (Header)

Header Highligh

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

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

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

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

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

មាតិកា (Main Content)

Content Highlight

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

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

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

ចំហៀង (Sidebar)

Sidebar Highlight

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

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

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

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

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

Footer Highlight

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

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

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

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

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

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

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

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

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

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

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

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

ការរចនាបែប Responsive

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

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

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

រូបភាព

រូបថតអគារប៊ូឌិញ៖ https://opendevelopmentmekong.net/topics/urban-administration-and-development
រូបថតសត្វ៖ https://www.pexels.com/photo/cows-dog-pet-animals-21123/
រូបថតកសិករ៖ https://www.pexels.com/photo/old-man-person-farmer-28900/

May 18, 2016June 21, 2016

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

មាតិកាមេរៀន

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

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

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

មូលដ្ឋានវេប
ការរចនាវេប (Web Design)
ការបង្កើតកម្មវិធីវេប (Web Application – client/server)
ប្រព័ន្ធគ្រប់គ្រងមាតិកា (Content Management System)
ម៉ាស៊ីនបម្រើវេប (Web 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, ជាអ្នករក្សាទុកទិន្នន័យទុកប្រើការពេលក្រោយ។ល។

សាកល្បងគិត

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

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

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

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

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

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

ឲ្យ 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

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

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

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

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

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

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

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

April 21, 2016May 18, 2016

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

April 18, 2016April 18, 2016

ការកាត់ពាក្យខ្មែរនៅក្នុង Excerpt របស់ WordPress

មានពេលខ្លះ អ្នកធ្វើវេបសាយតាម WordPress ត្រូវការប្រើប្រាស់ the_excerpt() ឬ get_the_excerpt() ជាមួយនឹងអត្ថបទខ្មែរ។ ប៉ុន្តែអ្វីៗវាមិនបានដូចការរំពឹងទុករបស់យើងទេ។ អនុគមន៍ទាំងពីរនេះវានឹងកាត់ឬតម្រឹមយកពាក្យដោយផ្អែកលើលក្ខខណ្ឌពីរ (មើលកូដដើម)៖

ប្រសិនបើមានការកំណត់នៅក្នុងឯកសារបកប្រែថារាប់ពាក្យដោយផ្អែកលើ characters (ចំពោះភាសាណាដែលមួយតួអក្សរស្មើមួយពាក្យ) នោះការកាត់ពាក្យក៏នឹងកាត់តាមតួអក្សរ។
ប្រសិនបើផ្អែកលើ words នោះវានឹងរាប់តាមពាក្យ ដោយមួយពាក្យៗញែកគ្នាដោយដំណកឃ្លា។ ហើយនេះជាលំនាំដើមនៅក្នុង WordPress។

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

/**
 * Custom trim excerpt with Khmer text support, using regular expression. Khmer
 * text must contain zero-width spaces (ZWSP); otherwise, this code can not
 * detect the word boundaries. There is another way to do it with ICU library,
 * but it needs some server configuartions which is not usually available in
 * most shared hosting.
 *
 * @author Tep Sovichet (http://sovichet.info)
 * @param  string $text
 * @return mixed
 */
function trim_excerpt_khmer($text)
{
    $raw_excerpt = $text;

    if ('' == $text) {
        $original_content = wp_strip_all_tags(get_the_content(''));
        $text = $original_content;
        $text = strip_shortcodes($text);
        $text = apply_filters( 'the_content', $text );
        $text = str_replace(']]>', ']]&gt;', $text);
        $excerpt_length = apply_filters( 'excerpt_length', 55 );
        $excerpt_more = apply_filters( 'excerpt_more', ' ' . '[&hellip;]' );
        $text = wp_trim_words( $text, $excerpt_length, '' );
        $regex = "/[$-\/:-?{-~!\"^_`[\]\w\d\xE1\x9E\x80-\xE1\x9F\xBF]+[\xE2\x80\x8B \xE1\x9F\x94\xE1\x9F\x95]?/u";

        preg_match_all($regex, $text, $matches);

        $sliced = array_slice($matches[0], 0, $excerpt_length);
        $text = implode('', $sliced);
        if (strlen($text) < strlen($original_content)) {
            $text .= $excerpt_more;
        }
    }

    return apply_filters( 'trim_excerpt_khmer', $text, $raw_excerpt );
}
remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'trim_excerpt_khmer');

/**

* Custom trim excerpt with Khmer text support, using regular expression. Khmer

* text must contain zero-width spaces (ZWSP); otherwise, this code can not

* detect the word boundaries. There is another way to do it with ICU library,

* but it needs some server configuartions which is not usually available in

* most shared hosting.

* @author Tep Sovichet (http://sovichet.info)

* @param string $text

* @return mixed

function trim_excerpt_khmer($text)

{

$raw_excerpt = $text;

if ('' == $text) {

$original_content = wp_strip_all_tags(get_the_content(''));

$text = $original_content;

$text = strip_shortcodes($text);

$text = apply_filters( 'the_content', $text );

$text = str_replace(']]>', ']]>', $text);

$excerpt_length = apply_filters( 'excerpt_length', 55 );

$excerpt_more = apply_filters( 'excerpt_more', ' ' . '[…]' );

$text = wp_trim_words( $text, $excerpt_length, '' );

$regex = "/[$-\/:-?{-~!\"^_`[\]\w\d\xE1\x9E\x80-\xE1\x9F\xBF]+[\xE2\x80\x8B \xE1\x9F\x94\xE1\x9F\x95]?/u";

preg_match_all($regex, $text, $matches);

$sliced = array_slice($matches[0], 0, $excerpt_length);

$text = implode('', $sliced);

if (strlen($text) < strlen($original_content)) {

$text .= $excerpt_more;

}

return apply_filters( 'trim_excerpt_khmer', $text, $raw_excerpt );

}

remove_filter('get_the_excerpt', 'wp_trim_excerpt');

add_filter('get_the_excerpt', 'trim_excerpt_khmer');

នៅក្នុងនេះ អ្វីដែលយើងចាំបាច់ត្រូវធ្វើនោះគឺលុបអនុគមន៍ callback wp_trim_excerpt ដើមរបស់ WordPress ចេញពីបញ្ជី។ រួចហើយយើងបង្កើតអនុគមន៍ callback ថ្មីមួយទៀតដោយផ្អែកលើអនុគមន៍ដើម ប៉ុន្តែផ្លាស់ប្ដូរវិធីកាត់ពាក្យ។ អ្នកអាចយកកូដនេះទៅប្រើផ្ទាល់នៅក្នុងឯកសារ functions.php នៅក្នុងពុម្ពរូបរាង។ នេះគ្រាន់តែជាកូដបឋមប៉ុណ្ណោះ ហើយប្រសិនបើអ្នកត្រូវការកែអ្វីទៀត ក៏អាចយកទៅធ្វើតាមសប្បាយ។

អ្នកត្រូវចាំថា អត្ថបទនោះត្រូវតែមានប្រើ “ចន្លោះមិនឃើញ”។

Pattern ដែលខ្ញុំប្រើនោះគឺដើម្បីចាប់គ្រប់សញ្ញានិងវណ្ណយុត្តិ, តួអក្សរអង់គ្លេស, លេខឡាតាំង, និងអក្សរខ្មែរចាប់ពីយូនីកូដ \u1780 ដល់ \u17FF រហូតដល់ត្រឹម ចន្លោះមិនឃើញ (\u200B), ដំណកឃ្លា, សញ្ញាខណ្ឌ (\u17D4), សញ្ញាខណ្ឌចប់ (\u17D5)។

វិធីមួយទៀតកំពុងពិចារណា

នៅមានវិធីសាស្ត្រមួយទៀតដែលខ្ញុំគិតឃើញ គឺត្រូវពឹងផ្អែកលើផ្នែកបន្ថែមរបស់ PHP គឺ php-intl ដែលជា wrapper លើបណ្ណាល័យ ICU។ ប៉ុន្តែអ្វីដែលខ្ញុំខ្វល់នោះគឺ មិនប្រាកដថារាល់អ្នកដំឡើង WordPress ប្រើផ្ទាល់ខ្លួននោះមាន VPS ផ្ទាល់ខ្លួនឫឥត? ពីព្រោះខ្ញុំមិនប្រាកដថាគ្រប់ Shared Hosting គេបានដំឡើងផ្នែកបន្ថែមនោះនិងបណ្ណាល័យ ICU ដែរឬអត់ទេ។

ការប្រើប្រាស់បណ្ណាល័យ ICU វាងាយស្រួលត្រង់ថាការកាត់ពាក្យអាចប្រព្រឹត្តិទៅបានដោយផ្អែកលើវចនានុក្រម ហើយវាមានមុខងារច្រើន ប៉ុន្តែយើងប្រើតែការចាប់ពាក្យប៉ុណ្ណោះ។

វាអាចនឹងមានល្បឿនយឺត ហើយការកាត់ពាក្យក៏អាចនឹងភាន់មិនស្គាល់ពាក្យ ប្រសិនបើអ្នកសរសេរពាក្យខុស ត្បិតអីវាផ្អែកលើវចនានុក្រមដែលខ្ញុំបានលើកឡើងពីខាងលើ។ តែយ៉ាងណា នឹងសាកល្បងលេងៗថាវាយ៉ាងម៉េចទៅវិញ។

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

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

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

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

HTML Tags

HTML Attributes

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

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

ការ​បង្កើត Form

ធាតុ input

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

ឧទាហរណ៍

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

ចែក​រំលែក៖

Like this:

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

ផ្នែក​លើ (Header)

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

មាតិកា (Main Content)

ចំហៀង (Sidebar)

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

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

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

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

ចែក​រំលែក៖

Like this:

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

Client-side & Server-side

Client-side

Server-side

សាកល្បង​គិត

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

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

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

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

គុណសម្បត្តិ

គុណវិបត្តិ

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

គុណសម្បត្តិ

គុណវិបត្តិ

How Internet Works

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

ចែក​រំលែក៖

Like this:

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

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

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

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

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

ចែក​រំលែក៖

Like this:

វិធី​មួយ​ទៀត​កំពុង​ពិចារណា

ចែក​រំលែក៖

Like this:

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

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

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

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

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

ការបង្កើត Form

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

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

ចែករំលែក៖

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

ផ្នែកលើ (Header)

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

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

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

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

ការរចនាបែប Responsive

ចែករំលែក៖

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

សាកល្បងគិត

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

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

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

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

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

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

ចែករំលែក៖

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

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

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

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

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

ចែករំលែក៖

វិធីមួយទៀតកំពុងពិចារណា

ចែករំលែក៖