บทท 2ทฤษฎ หลกการและงานวจยทเกยวของ

2.1) ทฤษฎและหลกการทเกยวของ 2.1.1 ภาษา PHP 2.1.2 ภาษา (Javascript) 2.1.3 ความหมายของ (CSS) 2.1.4 โปรแกรม Xampp 2.1.5 Localhost 2.1.6 ฐานขอมล (Database Syetem) 2.1.7 Framework Bootstrap 2.1.8 ภาษา (HTML)2.2) งานวจยทเกยวของ        2.1.1 ภาษา (PHP)                พเอชพ (PHP) คอ ภาษาคอมพวเตอรในลกษณะเซรฟเวอร-ไซด สครปต โดยลขสทธอยในลกษณะโอเพนซอรส ภาษาพเอชพใชสำาหรบจดทำาเวบไซต และแสดงผลออกมาในรปแบบ HTML โดยมรากฐานโครงสรางคำาสงมาจากภาษา ภาษาซ ภาษาจาวา และ ภาษาเพรล ซง ภาษาพเอชพ นนงายตอการเรยนร ซงเปาหมายหลกของภาษาน คอใหนกพฒนาเวบไซตสามารถเขยน เวบเพจ ทมการตอบโตไดอยางรวดเรว                คณสมบตของ(PHP)คอการแสดงผลของพเอชพ จะปรากฏในลกษณะ HTML ซงจะไมแสดงคำาสงทผใชเขยน ซงเปนลกษณะเดนทพเอชพแตกตางจากภาษาในลกษณะไคลเอนต-ไซด สครปต เชน ภาษาจาวาสครปต ทผชมเวบไซตสามารถอาน ดและคดลอกคำาสงไปใชเองได นอกจากนพเอชพยงเปนภาษาทเรยนรและเรมตนไดไมยาก โดยมเครองมอชวยเหลอและคมอทสามารถหาอานไดฟรบนอนเทอรเนต ความสามารถการประมวลผลหลกของพเอชพ ไดแก การสรางเนอหาอตโนมตจดการคำาสง การอานขอมลจากผใชและประมวลผล การอานขอมลจากดาตาเบส ความ

สามารถจดการกบคกก ซงทำางานเชนเดยวกบโปรแกรมในลกษณะ CGI คณสมบตอนเชน การประมวลผลตามบรรทดคำาสง (command line scripting) ทำาใหผเขยนโปรแกรมสรางสครปตพเอชพ ทำางานผานพเอชพ พารเซอร (PHP parser) โดยไมตองผานเซรฟเวอรหรอเบราวเซอร ซงมลกษณะเหมอนกบ Cron (ใน ยนกซหรอลนกซ) หรอ Task Scheduler (ในวนโดวส) สครปตเหลานสามารถนำาไปใชในแบบ Simple text processing tasks ได                การแสดงผลของพเอชพ ถงแมวาจดประสงคหลกใชในการแสดงผล HTML แตยงสามารถสราง XHTML หรอ XML ได นอกจากนสามารถทำางานรวมกบคำาสงเสรมตางๆ ซงสามารถแสดงผลขอมลหลก PDF แฟลช (โดยใช libswf และ Ming) พเอชพมความสามารถอยางมากในการทำางานเปนประมวลผลขอความ จาก POSIX Extended หรอ รปแบบ Perl ทวไป เพอแปลงเปนเอกสาร XML ในการแปลงและเขาสเอกสาร XML เรารองรบมาตรฐาน SAX และ DOM สามารถใชรปแบบ XSLT ของเราเพอแปลงเอกสาร XML                เมอใชพเอชพในการทำาอคอมเมรซ สามารถทำางานรวมกบโปรแกรมอน เชน Cybercash payment, CyberMUT, VeriSign Payflow Pro และ CCVS functions เพอใชในการสรางโปรแกรมทำาธรกรรมทางการเงน                การรองรบพนทของคำาสงของพเอชพ สามารถสรางผานทางโปรแกรมแกไขขอความทวไป เชน โนตแพด หรอ vi ซงทำาใหการทำางานพเอชพ สามารถทำางานไดในระบบปฏบตการหลกเกอบทงหมด โดยเมอเขยนคำาสงแลวนำามาประมวลผล Apache, Microsoft Internet Information Services (IIS) , Personal Web Server, Netscape และ iPlanet servers, Oreilly Website Pro server, Caudium, Xitami, OmniHTTPd, และอนๆ อกมากมาย. สำาหรบสวนหลกของ PHP ยงม Module ในการรองรบ CGI มาตรฐาน ซง PHP สามารถทำางานเปนตวประมวลผล CGI ดวย และดวย PHP, คณมอสรภาพในการเลอก ระบบปฏบตการ และ เวบเซรฟเวอร นอกจากนคณยง

สามารถใชสรางโปรแกรมโครงสราง สรางโปรแกรมเชงวตถ (OOP) หรอสรางโปรแกรมทรวมทงสองอยางเขาดวยกน แมวาความสามารถของคำาสง OOP มาตรฐานในเวอรชนนยงไมสมบรณ แตตวไลบรารทงหลายของโปรแกรม และตวโปรแกรมประยกต (รวมถง PEAR library) ไดถกเขยนขนโดยใชรปแบบการเขยนแบบ OOP เทานน ซงฐานขอมลสวนหนงทรองรบไดแก ออราเคล dBase PostgreSQL IBM DB2 MySQL Informix ODBC โครงสรางของฐานขอมลแบบ DBX ซงทำาใหพเอชพใชกบฐานขอมลอะไรกไดทรองรบรปแบบน และ PHP ยงรองรบ ODBC (Open Database Connection) ซงเปนมาตรฐานการเชอมตอฐานขอมลทใชกนแพรหลายอกดวย คณสามารถเชอมตอกบฐานขอมลตางๆ ทรองรบมาตรฐานโลกนได                พเอชพยงสามารถรองรบการสอสารกบการบรการในโพรโทคอลตางๆ เชน LDAP IMAP SNMP NNTP POP3 HTTP COM (บนวนโดวส) และอนๆ อกมากมาย คณสามารถเปด Socket บนเครอขายโดยตรง และ ตอบโตโดยใช โพรโทคอลใดๆ กได PHP มการรองรบสำาหรบการแลกเปลยนขอมลแบบ WDDX Complex กบ Web Programming อนๆ ทวไปได พดถงในสวน Interconnection, พเอชพมการรองรบสำาหรบ Java objects ใหเปลยนมนเปน PHP Object แลวใชงาน คณยงสามารถใชรปแบบ CORBA เพอเขาส Remote Object ไดเชนกนภาษา SQL                SQL ยอมาจาก structured query language คอภาษาทใชในการเขยนโปรแกรม เพอจดการกบฐานขอมลโดยเฉพาะ เปนภาษามาตรฐานบนระบบฐานขอมลเชงสมพนธและเปนระบบเปด (open system) หมายถงเราสามารถใชคำาสง sql กบฐานขอมลชนดใดกได และ คำาสงงานเดยวกนเมอสงงานผาน  ระบบฐานขอมลทแตกตางกนจะได ผลลพธเหมอนกน ทำาใหเราสามารถเลอกใชฐานขอมล ชนดใดกไดโดยไมตดยดกบฐานขอมลใดฐานขอมลหนง นอกจากนแลว SQL ยงเปนชอ

โปรแกรมฐานขอมล ซงโปรแกรม SQL เปนโปรแกรมฐานขอมลทมโครงสรางของภาษาทเขาใจงาย ไมซบซอน มประสทธภาพการทำางานสง สามารถทำางานทซบซอนไดโดยใชคำาสงเพยงไมกคำาสง โปรแกรม SQL จงเหมาะทจะใชกบระบบฐานขอมลเชงสมพนธ และเปนภาษาหนง ซงแบงการทำางานไดเปน 4 ประเภท ดงน                1) Select query ใชสำาหรบดงขอมลทตองการ                2) Update query ใชสำาหรบแกไขขอมล                3) Insert query ใชสำาหรบการเพมขอมล                4) Delete query ใชสำาหรบลบขอมลออกไปตวอยาง SQL query                1) Select query ใชดงขอมลในรป table คอเปน row และ column                  SELECT column1, column2, ...                    FROM table_name;               2) Update query ใชแกไขขอมลทมอยแลวใน table                    UPDATE table_name                    SET column1 = value1, column2 = value2, ...                    WHERE condition;                3) Insert query ใชเพมขอมลใน table                   INSERT INTO table_name (column1, column2, column3, ...)                    VALUES (value1, value2, value3, ...);                4) Delete query ใชลบขอมลใน table                  DELETE FROM table_name                    WHERE condition;                ปจจบนมซอฟตแวรระบบจดการฐานขอมล (DBMS) ทสนบสนนการใชคำาสง SQL เชน  Oracle , DB2, MS-SQL, MS-Access นอกจากนภาษา SQL ถกนำามาใชเขยนรวมกบโปรแกรมภาษาตางๆ เชน ภาษา c/C++ , VisualBasic และ Java ประโยชนของภาษา SQL

                1) สรางฐานขอมลและ ตาราง                    2) สนบสนนการจดการฐานขอมล ซงประกอบดวย การเพม การปรบปรง และการลบขอมล                3) สนบสนนการเรยกใชหรอ คนหาขอมล  

ประเภทของคำาสงภาษา SQL                1) ภาษานยามขอมล(Data Definition Language : DDL) เปนคำาสงทใชในการสรางฐานขอมล กำาหนดโครงสรางขอมลวาม  Attribute ใด ชนดของขอมล รวมทงการเปลยนแปลงตาราง และการสรางดชน คำาสง : CREATE,DROP,ALTER                2) ภาษาจดการขอมล (Data Manipulation Language :DML) เปนคำาสงทใชในการเรยกใช เพม ลบ และเปลยนแปลงขอมลในตาราง    คำาสง : SELECT,INSERT,UPDATE,DELETE                3) ภาษาควบคมขอมล (Data Control Language : DCL) เปนคำาสงทใชในการกำาหนดสทธการอนญาต หรอ ยกเลก การเขาถงฐานขอมล เพอปองกนความปลอดภยของฐานขอมล คำาสง : GRANT,REVOKESQL Syntax                ภาษา SQL ถกแบงออกมาเปนสวนประกอบตางๆ เราเรยกสวนเหลานตามรปแบบเชน                1) Clauses  คอองคประกอบหนงของ statement และ query  (สวนนเปน Optional)                2) Expressions  คอการสรางผลลพธออกมาในรป table ทประกอบดวย column และ row จากขอมล                3) Predicates  คอรปแบบเงอนไขทมผลลพธเปน true/false/unknown หรอกคอ Boolean นนเอง

                4) Queries  คอการดงขอมลตามเงอนไข (clause) เปนสวนสำาคญใน SQL               5) Statements  คอสามารถมผลตอโครงสรางขอมล, จดการขอมล trasactions, program flow, session หรอแมกระทง วเคราะหปญหา โดยจำาเปนตองจบดวย semicolon (;) ซงเปนสงจำาเปนทตองมทกครงสำาหรบ SQL                6) Insignificant whitespace หรอชองวาง สำาหรบใน SQL statement และ query จะไมสนใจ ทำาให SQL สามารถเขยนในรปแบบทหลากหลายสวยงาม 

       2.1.2 ภาษา (Javascript)                JavaScript คอ ภาษาคอมพวเตอรสำาหรบการเขยนโปรแกรมบนระบบอนเทอรเนต ทกำาลงไดรบความนยมอยางสง Java JavaScript เปน ภาษาสครปตเชงวตถ (ทเรยกกนวา "สครปต" (script) ซงในการสรางและพฒนาเวบไซต (ใชรวมกบ HTML) เพอใหเวบไซตของเราดมการเคลอนไหว สามารถตอบสนองผใชงานไดมากขน ซงมวธการทำางานในลกษณะ "แปลความและดำาเนนงานไปทละคำาสง" (interpret) หรอเรยกวา ออบเจกโอเรยลเตด (Object Oriented Programming) ทมเปาหมายในการ ออกแบบและพฒนาโปรแกรมในระบบอนเทอรเนต สำาหรบผเขยนดวยภาษา HTML สามารถทำางานขามแพลตฟอรมได โดยทำางานรวมกบ ภาษา HTML และภาษา Java ไดทงทางฝงไคลเอนต (Client) และ ทางฝงเซรฟเวอร (Server)                JavaScript ถกพฒนาขนโดย เนตสเคปคอมมวนเคชนส (Netscape Communications Corporation) โดยใชชอวา Live Script ออกมาพรอมกบ Netscape Navigator2.0 เพอใชสรางเวบเพจโดยตดตอกบเซรฟเวอรแบบ Live Wire ตอมาเนตสเคปจงไดรวมมอกบ บรษทซนไมโครซสเตมสปรบปรงระบบของบราวเซอรเพอใหสามารถตดตอใชงานกบภาษาจาวาได และไดปรบปรง LiveScript ใหมเมอ ป 2538 แลวตงชอใหมวา JavaScript JavaScript สามารถทำาให

การสรางเวบเพจ มลกเลน ตาง ๆ มากมาย และยงสามารถโตตอบกบผใชไดอยางทนท เชน การใชเมาสคลก หรอ การกรอกขอความในฟอรม เปนตน               เนองจาก JavaScript ชวยใหผพฒนา สามารถสรางเวบเพจไดตรงกบความตองการ และมความนาสนใจมากขน ประกอบกบเปนภาษาเปด ทใครกสามารถนำาไปใชได ดงนนจงไดรบความนยมเปนอยางสง มการใชงานอยางกวางขวาง รวมทงไดถกกำาหนดใหเปนมาตรฐานโดย ECMA การทำางานของ JavaScript จะตองมการแปลความคำาสง ซงขนตอนนจะถกจดการโดยบราวเซอร (เรยกวาเปน client-side script) ดงนน JavaScript จงสามารถทำางานได เฉพาะบนบราวเซอรทสนบสนน ซงปจจบนบราวเซอรเกอบทงหมดกสนบสนน JavaScript แลว อยางไรกด สงทตองระวงคอ JavaScript มการพฒนาเปนเวอรชนใหมๆ ออกมาดวย (ปจจบนคอรน 1.5) ดงนน ถานำาโคดของเวอรชนใหม ไปรนบนบราวเซอรรนเกาทยงไมสนบสนน กอาจจะทำาใหเกด error ได               การทำางานของ JavaScript เกดขนบนบราวเซอร (เรยกวาเปน client-side script) ดงนนไมวาคณจะใชเซรฟเวอรอะไร หรอทไหน กยงคงสามารถใช JavaScript ในเวบเพจได ตางกบภาษาสครปตอน เชน Perl, PHP หรอ ASP ซงตองแปลความและทำางานทตวเครองเซรฟเวอร (เรยกวา server-side script) ดงนนจงตองใชบนเซรฟเวอร ทสนบสนนภาษาเหลานเทานน อยางไรกด จากลกษณะดงกลาวกทำาให JavaScript มขอจำากด คอไมสามารถรบและสงขอมลตางๆ กบเซรฟเวอรโดยตรง เชน การอานไฟลจากเซรฟเวอร เพอนำามาแสดงบนเวบเพจ หรอรบขอมลจากผชม เพอนำาไปเกบบนเซรฟเวอร เปนตน ดงนนงานลกษณะน จงยงคงตองอาศยภาษา server-side script อย (ความจรง JavaScript ททำางานบนเซรฟเวอรเวอรกม ซงตองอาศยเซรฟเวอรทสนบสนนโดยเฉพาะเชนกน แตไมเปนทนยมนก)JavaScript ทำาอะไรไดบาง               1) JavaScript ทำาใหสามารถใชเขยนโปรแกรมแบบงายๆได

โดยไมตองพงภาษาอน               2) JavaScript มคำาสงทตอบสนองกบผใชงาน เชนเมอผใชคลกทปม หรอ Checkbox กสามารถสงใหเปดหนาใหมได ทำาใหเวบไซตของเรามปฏสมพนธกบผใชงานมากขน นคอขอดของ JavaScript เลยกวาไดททำาใหเวบไซตดงๆทงหลายเชน Google Map ตางหนมาใช               3) JavaScript สามารถเขยนหรอเปลยนแปลง HTML Element ได นนคอสามารถเปลยนแปลงรปแบบการแสดงผลของเวบไซตได หรอหนาแสดงเนอหาสามารถซอนหรอแสดงเนอหาไดแบบงายๆนนเอง               4) JavaScript สามารถใชตรวจสอบขอมลได สงเกตวาเมอเรากรอกขอมลบางเวบไซต เชน Email เมอเรากรอกขอมลผดจะมหนาตางฟองขนมาวาเรากรอกผด หรอลมกรอกอะไรบางอยาง เปนตน               5) JavaScript สามารถใชในการตรวจสอบผใชไดเชน ตรวจสอบวาผใช ใช web browser อะไร               6) JavaScript สราง Cookies (เกบขอมลของผใชในคอมพวเตอรของผใชเอง) ไดขอดและขอเสยของ Java JavaScript               การทำางานของ JavaScript เกดขนบนบราวเซอร (เรยกวาเปน client-side script) ดงนนไมวาคณจะใชเซรฟเวอรอะไร หรอทไหน กยงคงสามารถใช JavaScript ในเวบเพจได ตางกบภาษาสครปตอน เชน Perl, PHP หรอ ASP ซงตองแปลความและทำางานทตวเครองเซรฟเวอร (เรยกวา server-side script) ดงนนจงตองใชบนเซรฟเวอร ทสนบสนนภาษาเหลานเทานน อยางไรกด จากลกษณะดงกลาวกทำาให JavaScript มขอจำากด คอไมสามารถรบและสงขอมลตางๆ กบเซรฟเวอรโดยตรง เชน การอานไฟลจากเซรฟเวอร เพอนำามาแสดงบนเวบเพจ หรอรบขอมลจากผชม เพอนำาไปเกบบนเซรฟเวอร เปนตน ดงนนงานลกษณะน จงยงคงตองอาศยภาษา server-side script อย (ความจรง JavaScript ททำางานบนเซรฟเวอรเวอรกม ซงตองอาศยเซรฟเวอรท

สนบสนนโดยเฉพาะเชนกน แตไมเปนทนยมนก)variable ของ javascript               1) var ถาประกาศไวภายใน function จะไมมผลกบคา var ทอยภายใน global เพราะมนเปน function scope ดงรปท 2.1

รปท 2.1 การประกาศตวแปรของภาษา javascript               2) let เปนการประกาศตวแปรแบบ block scope คอ ถาตงตวแปรไวใน scope แตเรยกจากดานนอกจะไมสามารถเรยกมาได ดงรปท 2.2

รปท 2.2 ตวแปรของภาษา javascript แบบ let               3) const เปนการประกาศตวแปรแบบ block scope แตแตกตางจาก let ทไมสามารถเปลยนคาได แตสามารถเปลยนคาใน object ได ดงรปท 2.3

รปท 2.3 ตวแปรของภาษา javascript แบบ const               function array ทใชใน javascript               1) shift() จะเอาคาดานซายสดใน array ออก  ดงรปท 2.4

รปท 2.4 function shift()               2) pop() จะเอาคาดานขวาสดใน array ออก ดงรปท 2.5

รปท 2.5 function pop()               3) push() จะเอาคาใหมทใสไป ไวคาทายสดใน array ดงรปท 2.6

รปท 2.6 function push()               4) concat() จะเปนการเชอม 2 array เขาดวยกน ดงรปท 2.7

รปท 2.7 function concat()               5) sort() จะเรยงคาใน array ตามตวอกษร a-z ดงรปท 2.8

รปท 2.8 function sort ()รปแบบการประกาศ function ใน javascript               การประกาศใน javascript จะเรมตนดวย “function” เสมอแลว ตามดวยชอของฟงกชน และพารามเตอรในวงเลบ แลวทายสดคอเครองหมายปกกา ดงรปท 2.9

รปท 2.9 รปแบบการประกาศ function

2.1.3 ความหมายของ (CSS)         CSS ยอมาจาก Cascading Style Sheet  มกเรยกโดยยอวา "สไตลชต" คอภาษาทใชเปนสวนของการจดรปแบบการแสดงผลเอกสาร  HTML โดยท CSS กำาหนดกฎเกณฑในการระบรปแบบ (หรอ "Style") ของเนอหาในเอกสาร อนไดแก สของขอความ สพนหลง ประเภทตวอกษร และการจดวางขอความ ซงการกำาหนดรปแบบ หรอ Style นใชหลกการของการแยกเนอหาเอกสาร HTML ออกจากคำาสงทใชในการจดรปแบบการแสดงผล กำาหนดใหรปแบบของการแสดงผลเอกสาร ไมขนอยกบเนอหาของเอกสาร เพอใหงายตอการจดรปแบบการแสดงผลลพธของเอกสาร HTML โดยเฉพาะในกรณทมการเปลยนแปลงเนอหาเอกสารบอยครง หรอตองการควบคมใหรปแบบการแสดงผลเอกสาร HTML มลกษณะของความสมำาเสมอทวกนทกหนาเอกสารภายในเวบไซตเดยวกน โดยกฎเกณฑในการกำาหนดรปแบบ (Style) เอกสาร HTML ถกเพมเขามาครงแรกใน HTML 4.0  เมอปพ.ศ. 2539 ในรปแบบของ CSS level 1 Recommendations ทกำาหนดโดย องคกร World Wide Web Consortium หรอ W3Cประโยชนของ CSS         1) CSS มคณสมบตมากกวา tag ของ html เชน การกำาหนดกรอบใหขอความ รวมทงส รปแบบของขอความทกลาวมาแลว         2) CSS นนกำาหนดทตนของไฟล html หรอตำาแหนงอน ๆ กได และสามารถมผล กบเอกสารทงหมด หมายถงกำาหนด ครงเดยวจดเดยวกมผลกบการแสดงผลทงหมด ทำาใหเวลาแกไขหรอปรบปรงทำาไดสะดวก ไมตองไลตามแก tag ตางๆ ทวทงเอกสาร         3) CSS สามารถกำาหนดแยกไวตางหากจาก ไฟลเอกสาร html และสามารถนำามาใชรวม กบเอกสารหลายไฟลได การแกไขกแกเพยง จดเดยวกมผลกบเอกสารทงหมด         4)  การใช CSS ในการจดรปแบบการแสดงผล จะชวยลดการใช

ภาษา HTML ในการตกแตงเอกสารเวบเพจ ทำาให code ภายในเอกสาร HTML เหลอเพยงสวนเนอหา ทำาใหเขาใจงายขน การแกไขเอกสารทำาไดงายและรวดเรว         5) สามารถควบคมการแสดงผลใหเหมอนกน หรอใกลเคยงกนไดในหลาย Web Browser         6) สามารถกำาหนดการแสดงผลในรปแบบทเหมาะกบสอชนดตางๆ ไมวาจะเปนการแสดงผลบนหนาจอ, บนกระดาษเมอสงพมพ, บนมอถอ หรอบน PDA โดยทเปนเนอหาเดยวกน โครงสรางคำาสง CSSคำาสงของ CSS ประกอบดวย selector, property และ value         1) selector สามารถเปน HTML Tag ตางๆ เชน <.body.>, <.p.> หรอเปน Class name หรอ ID ทเราตงชอใหกได         2) property คอ คณสมบตในการจดรปแบบการแสดงผล เชน color สำาหรบกำาหนดส, font-size สำาหรบกำาหนดขนาดตวอกษร         3) value เปนคาทเรากำาหนดใหกบ property ตางๆ เชน font-size:14px สวนประกอบของ CSS             3.1 Customer CSS Style เปน CSS ทสรางขน และสามารถใชไดทกทของเวบ             3.2 HTML Tag Style เปน CSS ทมการกำาหนดรปแบบใหกบ HTML เดมทมอยแลว             3.3 CSS Sector Style เปน CSS ทมการกำาหนดรปแบบใหกบแทกทมการผสมกนหรอทกแทกทม id ตรงกบทเรากำาหนดใน CSSหลกไวยากรณของ CSS เบองตน         1) CSS จะประกอบไปดวย ชอ Class หรอชอ ID หรอชอ Tag HTML ใน CSS จะเรยกวา Selector ทใชสำาหรบการอางถง         2) มชอ Properties หรอชอคณสมบต และตามดวย Value เพอกำาหนดคาใหแกคณสมบตนน และระหวางชอ  Properties กบ Value จะถกคนดวยเครองหมาย  colon ( properties: value )

         3) คณสมบตภายในจะมไดมากกวา 1 คณสมบตตามทเรากำาหนด และ properties ในแตละ properties จะถกคนดวยเครองหมาย( ; )         4) ตองเขยนคณสมบตของ CSS นนไวภายในเครองหมายปกกา { .... } เทานน รปแบบการเขยน CSS หรอ Syntax CSS          1) Selector คอ ตำาแหนงหรอจดท HTML element อยแลวเราตองการกำาหนดสไตล หรอ CSS เชน ขอความสวนหว h1,h2,h3…n  head title         2) Declaration คอ ตำาแหนงทเราตองการกำาหนดลกษณะของสไตลนนเอง ประกอบไปดวย property และ value ซงถามหลายๆ property กจำาเปนตองคนดวย เซมโคลอน ( ; ) คนไปเรอยๆการเขยน CSS ใน HTML (Insert a Style Sheet)          ม 3 รปแบบ ไดแก เขยน CSS ภายในแทก(Inline Styles) , เขยน CSS ภายในเอกสาร HTML (Internal Style Sheet) , และเขยน CSS ภายนอกเอกสาร HTML (External Style Sheet) โดยมรายละเอยดดงน         1) เขยน CSS ภายในแทก (TAG) HTML (หรออนไลน:inline styles) เปนการแทรกคำาสง CSS ลงในสวนของแทกนนๆ โดยทำาหนาทเปนเสมอนแอททรบวท(Attribute) ของแทกนนๆ มรปแบบคอ style = "คำาสง CSS"         2) เขยน CSS ภายในเอกสาร HTML (Internal Style Sheet)  เปนการเขยนคำาสง CSS ไวในตำาแหนงเดยว แตควบคมไดทงเอกสาร มกนยมเขยนไวในสวนของ .. โดยมรปแบบ คอ           3) เขยน CSS ภายนอกเอกสาร HTML (External Style Sheet) วธการนกระทำาไดดวยการสรางไฟลเอกสาร CSS ไวอกหนงไฟลทมนามสกล .css ภายในเขยนคำาสง CSS ไวทงหมด เมอตองการใหสไตลนมผลกบไฟลเอกสาร HTML ใดๆ สามารถเชอมโยงมายงไฟลนนๆไดทนท ดวยคำาสง                

 

การใสพนหลงโดยใชคำาสง CSS         1) background-color สของพนหลง มวธการกำาหนดสหลก ๆ อย 3 แบบ ไดแก             1.1 ใชคา HEX เชน #ff0000             1.2 ใชคา RGB เชน rgb(255,0,0)             1.3 ใชชอส เชน red โดยชอสนนไปดไดท ชอสตางๆ         2) background-image สำาหรบคำานเปนเหมอนคำาสงทเชอมไปยงคำาสงอน ๆ ทเหลอ ถาไมไดสง background-image คำาสงทเหลอยกเวน background-color กไมมความจำาเปน         3) background-repeat คาพนฐานของ background-repeat กคอ repeat  มคาดงน             3.1 repeat : รปจะถกใชปจนเตม             3.2 repeat-x : รปจะถกใชปจนเตมในแนวนอน             3.3 repeat-y : รปจะถกใชปจนเตมในแนวตง             3.4 no-repeat : รปจะถกใชครงเดยว          4) background-attachment  สำาหรบ background-attachment นนมคาใหใชงาน 3 คา คอ              4.1 scroll: รปจะเลอนไปตามการ scroll ซงจะเปนคาพนฐานของคำาสงน              4.2 fixed : รปจะไมเลอนไปไหน จะอยกบท              4.3 inherit : สบทอดคามา         5) background-position มาถงคำาสงสดทายแลวครบ กบ background-position เราสามารถใสคาใหมนไดหลก ๆ 3 แบบ             5.2 ใสคาซาย ขวา กลาง เชน background-position:left top คอใหรปทเปนพนหลงอยซายบน             5.3 ใสเปน % เชน background-position:10% 30% คอจะคำานวณใหรปอยในตำาแหนงหางจากดานซายมา 10% และจากดาน

บนมา 30%             5.4 ใสเปนคาตวเลข เชน background-position:5px 10px คอใหรปเรมตนทตำาแหนงนบจากซายมา 5px และจากดานบนมา 10px

2.1.4 โปรแกรม Xampp         Xampp คอเปนโปรแกรม Apache web server ไวจำาลอง web server เพอไวทดสอบ สครปหรอเวบไซตในเครองของเรา โดยทไมตองเชอมตออนเตอรเนตและไมตองมคาใชจายใดๆ งายตอการตดตงและใชงานโปรแกรม Xampp จะมาพรอมกบ PHP ภาษาสำาหรบพฒนาเวบแอพลเคชนทเปนทนยม , MySQL ฐานขอมล, Apache จะทำาหนาทเปนเวบ เซรฟเวอร,  Perl  อกทงยงมาพรอมกบ OpenSSL , phpMyadmin (ระบบบรหารฐานขอมลทพฒนาโดย PHP เพอใชเชอมตอไปยงฐานขอมล สนบสนนฐานขอมล MySQL และ SQLite  โปรแกรม Xampp จะอยในรปแบบของไฟล Zip, tar, 7z หรอ exe  โปรแกรม Xampp อยภายใตใบอนญาตของ  GNU General Public License แตบางครงอาจจะมการเปลยนแปลงเรองของลขสทธในการใชงาน จงควรตดตามและตรวจสอบโปรแกรมดวย ปจจบนไดรบความนยมจากผใช CMS ในการสรางเวบไซต ดงรปท 2.10

รปท 2.10 โปรแกรม Xamppโปรแกรม XAMPP สามารถใชงานได 4 OS ไดแก          1) Windows สามารถใชงานไดกบ windows รน 2000, 2003, xp, vista, windows 7

         2) Linux  สำาหรบ SuSE, RedHat, Mandrake, Debian และ Ubuntu         3) Mac OS X          4) Solaris สำาหรบ Solaris 8 และ Solaris 9          ในการใชงานเบองตนใหดบเบลคลก Xampp Control Panel Application แลวทำาการคลกปม start จากนนสามารถใชงานได โดยเปด Browser ขนมาพมพ localhost หรอ 127.0.0.1   ขอจำากดดานเทคนค         1) เครองคอมพวเตอรควรม RAM ไมตำากวา 128 MB         2) Harddisk มพนทมากกวา 320 MB         3) CPU ไมกำาหนดขนตำา         การพฒนาเวบไซต หรอโปรแกรมททำางานบนเวบ (Web Applications) จำาเปนตองอาศยเครองแมขายเวบ (Web server) ซงอาจจะเปนภาระสำาหรบผเรยน หรอผพฒนาบางกลม แนวทางหนงทนยมกนกคอ การจำาลองเครองพซใหเปนเครองแมขายเวบดวยโปรแกรมสำาเรจรปชวยจำาลองเครองแมเวบ ซงมใหเลอกหลายคาย XAMPP กเปนอกหนงผลตภณฑทมการพฒนาออกมาใหใชงาน          XAMPP พฒนาโดยโครงการ Apache Friends ทเปนโครงการไมแสวงหาผลกำาไร ทจดตงในป ค.ศ. 2002 โดย Kai ‘Oswald’ Seidler และ Kay Vogelgesang ทงน XAMPP ประกอบดวยโปรแกรมยอยไดแกโปรแกรม Apache โปรแกรมฐานขอมล MySQL โปรแกรมภาษา PHP และภาษา Perl         XAMPP มการปรบปรงรนอยางตอเนองเพอใหทำางานไดกบระบบปฏบตการทง Microsoft Windows, Mac OS x, Linux, Solaris และไมมคาใชจายในการดาวนโหลดใชงาน สำาหรบระบบปฏบตการ               ประโยชนของ XAMPP         1) สะดวกในการตดตงและลบออก         2) โปรแกรมมคำาสงมากมาย ทำาใหงายตอการใชงาน

         3) โปรแกรมสามารถใชงานไดในหลาย OS ไมวาจะเปน  Linux Windows Mac OSX หรอ OS อนๆ         4) เปนโปรแกรมฟรทสนบสนนในการใชงานของผทตองการพฒนาระบบ        2.1.5 Localhost         โลเคลโฮสต (องกฤษ: localhost แปลตามศพทวา แมขายเฉพาะท) ในเรองเครอขายคอมพวเตอร หมายถงชอแมขายมาตรฐานทกำาหนดใหกบตำาแหนงของสวนตอประสานเครอขายวงยอนกลบ (loopback) เมอผใชสงขอมลไปยงโลเคลโฮสต พวกเขาจะไดรบขอมลของตวเองกลบมา หรอพดอกนยหนงคอ เครองคอมพวเตอรตวมนเอง กลไกนมประโยชนสำาหรบโปรแกรมเมอรเพอทดสอบระหวางการพฒนาซอฟตแวร นอกจากนโลเคลโฮสตกเปนชอทสงวนไวสำาหรบโดเมนระดบบนสด (.localhost) ซงสำารองไวเพอหลกเลยงความสบสนกบการนยามทแคบกวาของชอแมขาย         โลเคลโฮสตทเปนชอแมขายในระบบคอมพวเตอรสมยใหม สามารถแปลงเปนเลขทอยไอพรน 4 ในรปของบลอกเลขทอย 127.0.0.0/8 หรอตามปกตใช 127.0.0.1 และเลขทอยไอพรน 6 กคอ ::1         โลเคลโฮสตถกระบใหใชเปนชอแมขายของคอมพวเตอรเครองหนง ๆ ถามไดกำาหนดไวใหเปนอยางอน ตวอยางเชน ระบบหนงกำาลงทำางานเปนเครองแมขายเอชททพและมเวบเบราวเซอรตดตงอยในระบบนนดวย ถาระบยอารแอล http://localhost ใหกบเวบเบราวเซอร เวบเบราวเซอรจะแสดงโฮมเพจของเวบไซตทไดตดตงลงในเครองนน ๆ เอง แสดงวาเครองแมขายไดถกกำาหนดคาเพอใหบรการสวนตอประสานวงยอนกลบดวย การใชสวนตอประสานวงยอนกลบกยงเลยงการใชงานฮารดแวรเครอขาย การเชอมตอบรการเครอขายทใหบรการบนเครองตวมนเองเชนเซรฟเวอรเกมคอมพวเตอร โดยใชทอยวงยอนกลบ จะเปนภาระใหแกทรพยากรเครอขายนอยกวา         เอกสารมาตรฐานอนเทอรเนตชด STD-2 (เชน RFC 1700) ท

กำาหนดโดยคณะทำางานเฉพาะกจดานวศวกรรมอนเทอรเนต (ไออทเอฟ) ไดสงวนบลอกเลขทอย 127.0.0.0/8 ไวสำาหรบใชงานวงยอนกลบ นนคอตงแต 127.0.0.0 จนถง 127.255.255.255  จนกระทงขอกำาหนดนถกปรบปรงแยกออกมาโดยองคการกำาหนดหมายเลขอนเทอรเนต (ไอเอเอนเอ) ผานทางเวบไซตขององคการ [4] เอกสารของไออทเอฟซงออกมาภายหลงวาดวย การใชงานพเศษของเลขทอยไอพรน 4 (RFC 3330) กไดอธบายถงวธใชบลอกเลขทอย 127.0.0.0/8 สำาหรบวงยอนกลบ เอกสารดงกลาวจงทำาใหขอกำาหนดของนายทะเบยนอนเทอรเนตประจำาภมภาค (อารไออาร) หรอไอเอเอนเอตกไป และในทายทสด RFC 3330 กถกแทนทดวยขอกำาหนดใหม RFC 5735                         สำาหรบการสอสารแบบไอพรน 4 สวนตอประสานวงยอนกลบเสมอนของระบบคอมพวเตอรตามปกตถกกำาหนดใหกบเลขทอย 127.0.0.1 ดวยตวพรางเครอขายยอย 255.0.0.0 สงนบรรจอยในตารางการจดเสนทางของระบบเฉพาะทดวยรายการททำาใหกลมขอมลทสงมาจากเลขทอยใด ๆ ในบลอก 127.0.0.0/8 จะถกจดเสนทางภายในไปยงอปกรณเครอขายวงยอนกลบ โดยขนอยกบระบบปฏบตการทใช (เชนลนกซหรอวนโดวส) และกลไกการจดเสนทางทไดตดตง         ในทางตรงขาม สวนเตมหนาของการจดเสนทางวงยอนกลบ ::1/128 ของการสอสารแบบไอพรน 6 ประกอบดวยเลขทอย ::1 เพยงเลขเดยว (รปเตมคอ 0:0:0:0:0:0:0:1 ซงบตนยสำาคญนอยสดเปนหนง และบตทเหลอทงหมดเปนศนย) ซงถกกำาหนดไวใหเปนเลขทอยวงยอนกลบโดยชดแจง  แตถงกระนนผดแลแมขายอาจกำาหนดเลขทอยเพมเตมใหกบสวนตอประสานวงยอนกลบตามความจำาเปนได

2.1.6 ฐานขอมล ( Database System )         ฐานขอมลประกอบดวยกลมการจดการขอมลสำาหรบผใชหนงคนหรอหลายๆคน โดยทวไปมกอยในรปแบบดจทล วธการแบงชนดของฐานขอมลไดรปแบบหนงคอแบงตามชนดของเนอหา เชน บรรณานกรม,

เอกสารตวอกษร, สถต โดยฐานขอมลดจทลจะถกจดการโดยใชระบบจดการฐานขอมลซงเกบเนอหาฐานขอมล โดยอนญาตใหสราง, ดแลรกษา, คนหา และการเขาถงในรปแบบอนๆ ฐานขอมลในลกษณะทคลายกบฐานขอมลสมยใหมถกพฒนาเปนครงแรกในทศวรรษ 1960 ซงผบกเบกในสาขานคอ ชาลส บากแมน แบบจำาลองขอมลสำาคญสองแบบเกดขนในชวงเวลาน ซงเรมตนดวย แบบจำาลองขายงาน (พฒนาโดย CODASYL) และตามดวยแบบจำาลองเชงลำาดบชน (นำาไปปฏบตใน IMS) แบบจำาลองทงสองแบบน ในภายหลงถกแทนทดวย แบบจำาลองเชงสมพนธ ซงอยรวมสมยกบแบบจำาลองอกสองแบบ แบบจำาลองแบบแรกเรยกกนวา แบบจำาลองแบนราบ ซงออกแบบสำาหรบงานทมขนาดเลกมาก ๆ แบบจำาลองรวมสมยกบแบบจำาลองเชงสมพนธอกแบบ คอ ฐานขอมลเชงวตถ หรอ โอโอดบ3 (OODB) ในขณะทแบบจำาลองเชงสมพนธ มพนฐานมาจากทฤษฎเซต ไดมการเสนอแบบจำาลองดดแปลงซงใชทฤษฎเซตคลมเครอ (ซงมพนฐานมาจากตรรกะคลมเครอ) ขนเปนอกทางเลอกหนง ปจจบนมการกลาวถงมาตรฐานโครงสรางฐานขอมล เพอใหสามารถเชอมโยงฐานขอมลตางระบบ ใหสบคนรวมกนเสมอนเปนฐานขอมลเดยวกน และการสบคนตองแสดงผลตรงตามคำาถาม มาตรฐานดงกลาวไดแก XML RDF Dublin Core Metadata เปนตน และสงสำาคญอกประการหนงทจะชวยใหการแลกเปลยนขอมลรหวางตางหนวยงานไดด คอการใช Taxonomy และ อรรถาภธาน ซงเปนเครองมอสำาหรบจดการความรในลกษณะศพทควบคม เพอจำากดความหมายของคำาทใชไดหลายคำาในความหมายเดยวกน

ระบบจดการฐานขอมล         ระบบจดการฐานขอมล (Database Management System) หรอทเรยกวา ดบเอมเอส (DBMS) เปนกลมโปรแกรมททำาหนาทเปนตวกลางในระบบตดตอระหวางผใชกบฐานขอมล เพอจดการและควบคมความถกตอง ความซำาซอน และความสมพนธระหวางขอมลตางๆ ภายใน

ฐานขอมล ซงตางจากระบบแฟมขอมลทหนาทเหลานจะเปนหนาทของโปรแกรมเมอร ในการตดตอกบขอมลในฐานขอมลไมวาจะดวยการใชคำาสงในกลมดเอมแอล (DML) หรอ ดดแอล (DDL) หรอจะดวยโปรแกรมตางๆ ทกคำาสงทใชกระทำากบขอมลจะถกดบเอมเอสนำามาแปล (คอมไพล) เปนการปฏบตการ (Operation) ตางๆ ภายใตคำาสงนนๆ เพอนำาไปกระทำากบตวขอมลภายในฐานขอมลตอไป สำาหรบสวนการทำางานตางๆ ภายในดบเอมเอสททำาหนาทแปลคำาสงไปเปนการปฏบตการตางๆ กบขอมลนน ประกอบดวยสวนการปฏบตการดงน ตวจดการฐานขอมล (Database Manager) : เปนสวนททำาหนาทกำาหนดการกระทำาตางๆ ใหกบสวน File Manager เพอไปกระทำากบขอมลทเกบอยในฐานขอมล (ตวจดการไฟล เปนสวนททำาหนาทบรหารจดการกบขอมลทเกบอยในฐานขอมลในระดบกายภาพ)         ตวประมวลผลสอบถาม (Query Processor) : เปนสวนททำาหนาทแปลงกำาหนดคำาสงของ ภาษาสอบถาม (Query Language) ใหอยในรปแบบของคำาสงทตวจดการฐานขอมลเขาใจ ตวแปลภาษาจดดำาเนนการขอมลลวงหนา (Data Manipulation Language Precompiler) : เปนสวนททำาหนาทแปลประโยคคำาสงของกลมคำาสงในดเอมแอล ใหอยในรปแบบทสวนรหสเชงวตถของโปรแกรมแอปพลเคชน ใชนำาเขาเพอสงตอไปยงสวนตวจดการฐานขอมลในการแปลประโยคคำาสงของกลมคำาสงของดเอมแอลของสวน ตวแปลภาษาจดดำาเนนการขอมลลวงหนานจะตองทำางานรวมกบสวนตวประมวลผลขอคำาถาม  ตวแปลภาษานยามขอมลลวงหนา (Data Definition Language Precompiler) : เปนสวนททำาหนาทแปลประโยคคำาสงของกลมคำาสงในภาษานยามขอมล ใหอยในรปแบบของเมทาเดตา (MataData) ทเกบอยในสวนพจนานกรมขอมล (Data Dictionary) ของฐานขอมล (เมทาเดตาคอ รายละเอยดทบอกถงโครงสรางตางๆ ของขอมล) รหสจดหมายของโปรแกรมแอปพลเคชน (Application Programs Object Code) : เปนสวนททำาหนาทแปลงคำาสงตางๆ ของโปรแกรม รวมทงคำาสงในกลมคำา

สงภาษาจดดำาเนนการขอมล หรอดเอมแอลทสงตอมาจากสวนตวแปลภาษาจดดำาเนนการขอมลลวงหนาใหอยในรปแบบของรหสจดหมาย (Object Code) ทจะสงตอไปใหตวจดการฐานขอมลเพอกระทำากบขอมลในฐานขอมล         หนาทของระบบจดการฐานขอมล  แปลงคำาสงทใชจดการกบขอมลภายในฐานขอมล ใหอยในรปแบบทฐานขอมลเขาใจ นำาคำาสงตาง ๆ ซงไดรบการแปลแลว ไปสงใหฐานขอมลทำางาน เชน การเรยกใช (Retrieve) จดเกบ (Update) ลบ (Delete) เพมขอมล (Add) เปนตนปองกนความเสยหายทจะเกดขนกบขอมลภายในฐานขอมล โดยจะคอยตรวจสอบวาคำาสงใดทสามารถทำางานได และคำาสงใดทไมสามารถทำางานได  รกษาความสมพนธของขอมลภายในฐานขอมลใหมความถกตองอยเสมอ  เกบรายละเอยดตางๆ ทเกยวของกบขอมลภายในฐานขอมลไวในพจนานกรมขอมล (Data Dictionary) ซงรายละเอยดเหลานมกจะถกเรยกวา เมทาเดตา (MetaData) ซงหมายถง "ขอมลของขอมล"  ควบคมใหฐานขอมลทำางานไดอยางถกตองและมประสทธภาพ         รายชอระบบจดการฐานขอมล  ระบบจดการฐานขอมลทนยมใชกนในปจจบน  ออราเคล (Oracle),ไอบเอม ดบท (IBM DB2),ไมโครซอฟท ซควลเซรฟเวอร (Microsoft SQL Server),ไซเบส (Sybase),แคเช (Cache'),PostgreSQL,Progress,มายเอสควแอล (MySQL),Interbase,Firebird,Pervasive SQL         การออกแบบฐานขอมล (Designing Databases) มความสำาคญตอการจดการระบบฐานขอมล (DBMS) ทงนเนองจากขอมลทอยภายในฐานขอมลจะตองศกษาถงความสมพนธของขอมล โครงสรางของขอมลการเขาถงขอมลและกระบวนการทโปรแกรมประยกตจะเรยกใชฐานขอมล ดงนน เราจงสามารถแบงวธการสรางฐานขอมลได 3 ประเภท          1) รปแบบขอมลแบบลำาดบขน หรอโครงสรางแบบลำาดบขน (Hierarchical data model) วธการสรางฐาน ขอมลแบบลำาดบขนถกพฒนาโดยบรษท ไอบเอม จำากด ในป 1980 ไดรบความนยมมาก ในการพฒนาฐานขอมลบนเครองคอมพวเตอรขนาดใหญและขนาดกลาง โดยท

โครงสรางขอมลจะสรางรปแบบเหมอนตนไม โดยความสมพนธเปนแบบหนงตอหลาย (One- to -Many)          2) รปแบบขอมลแบบเครอขาย (Network data Model) ฐานขอมลแบบเครอขายมความคลายคลงกบฐาน ขอมลแบบลำาดบชน ตางกนทโครงสรางแบบเครอขาย อาจจะมการตดตอหลายตอหนง (Many-to-one) หรอ หลายตอหลาย (Many-to-many) กลาวคอลก (Child) อาจมพอแม (Parent) มากกวาหนง สำาหรบตวอยางฐานขอมลแบบเครอขายใหลองพจารณาการจดการขอมลของหองสมด ซงรายการจะประกอบดวย ชอเรอง ผแตง สำานกพมพ ทอย ประเภท          3) รปแบบความสมพนธขอมล (Relational model) เปนลกษณะการออกแบบฐานขอมลโดยจดขอมลใหอยในรปของตารางทมระบบคลายแฟม โดยทขอมลแตละแถว (Row) ของตารางจะแทนเรคอรด (Record) สวน ขอมลแนวดงจะแทนคอลมน (Column) ซงเปนขอบเขตของขอมล (Field) โดยทตารางแตละตารางทสรางขนจะเปนอสระ ดงนนผออกแบบฐานขอมลจะตองมการวางแผนถงตารางขอมลทจำาเปนตองใช เชนระบบฐานขอมลบรษทแหงหนง ประกอบดวย ตารางประวตพนกงาน ตารางแผนกและตารางขอมลโครงการ แสดงประวตพนกงาน ตารางแผนก และตารางขอมลโครงการ         การออกแบบฐานขอมลเชงสมพนธ  การออกแบบฐานขอมลในองคกรขนาดเลกเพอตอบสนองความตองการของผใชงานอาจเปนเรองทไมยงยากนก เนองจากระบบและขนตอนการทำางานภายในองคกรไมซบซอน ปรมาณขอมลทมกไมมาก และจำานวนผใชงานฐานขอมลกมเพยงไมกคน หากทวาในองคกรขนาดใหญ ซงมระบบและขนตอนการทำางานทซบซอน รวมทงมปรมาณขอมลและผใชงานจำานวนมาก การออกแบบฐานขอมลจะเปนเรองทมความละเอยดซบซอน และตองใชเวลาในการดำาเนนการนานพอควรทเดยว ทงน ฐานขอมลทไดรบการออกแบบอยางเหมาะสมจะสามารถตอบสนองตอความตองการของผใชงานภายในหนวยงานตาง ๆ ขององคกรได ซงจะทำาใหการดำาเนนงานขององคกรมประสทธภาพดยงขน

เปนผลตอบแทนทคมคาตอการลงทนเพอพฒนาระบบฐานขอมลภายในองคกรทงน การออกแบบฐานขอมลทนำาซอฟตแวรระบบจดการฐานขอมลมาชวยในการดำาเนนการ สามารถจำาแนกหลกในการดำาเนนการได 6 ขนตอน คอ          1)การรวบรวมและวเคราะหความตองการในการใชขอมล          2)การเลอกระบบจดการฐานขอมล          3)การออกแบบฐานขอมลในระดบแนวคด          4)การนำาฐานขอมลทออกแบบในระดบแนวคดเขาสระบบจดการฐานขอมล          5)การออกแบบฐานขอมลในระดบกายภาพ          6)การนำาฐานขอมลไปใชและการประเมนผล         การออกแบบฐานขอมลในระดบตรรกะ หรอในระดบแนวความคด เปนขนตอนการออกแบบความสมพนธระหวางขอมลในระบบโดยใชแบบจำาลองขอมลเชงสมพนธ ซงอธบายโดยใชแผนภาพแสดงความสมพนธระหวางขอมล (E-R Diagram) จากแผนภาพ E-R Diagram นำามาสรางเปนตารางขอมล (Mapping E-R Diagram to Relation) และใชทฤษฏการ Normalization เพอเปนการรบประกนวาขอมลมความซำาซอนกนนอยทสด ซงการออกแบบเชงตรรกะนจะบอกถงรายละเอยดของ Relation , Attribute และ Entity         ความสมพนธ (Relationship) 1)ความสมพนธแบบหนงตอหนง (One - to - One Relationships) เปน การแสดงความสมพนธ เอนทตหนงวามความสมพนธกบเอนทตหนงในลกษณะทเปนหนงตองหนง เชน นกศกษาแตละคนสงกด โปรแกรมวชาไดเพยงโปรแกรมวชาเดยวเทานน 2) ความสมพนธแบบหนงตอกลม (One - to - many Relationships) เปน การแสดงความสมพนธของเอนทตหนงวามความสมพนธกบขอมลหลายขอมลของเอนทตหนง เชน ความสมพนธของนกศกษากบการลงทะเบยนนกศกษาหนงคนสามารถลงทะเบยนไดหลายสาขา 3)ความสมพนธแบบกลมตอกลม (Many - to - Many

Relationships) เปน การแสดงความสมพนธของขอมลสองเอนทต ในลกษณะแบบกลมตอกลม เชน ในเอนทต การลงทะเบยนแตละครงสามารถลงทะเบยนไดหลายรายวชา ความสมพนธของนกศกษาไปยงเอนทตรายวชาเปนแบบหนงตอกลม (1: M) และแตละรายวชาถกลงทะเบยนไดจากนกศกษาหลายคน ซงเปนความสมพนธของเอนทตรายวชาไปยงเอนทตนกศกษาเปนแบบหนงตอกลม (1: M) ดงความสมพนธระหวางเอนทตทงสองจงเปนแบบกลมตอกลม (M:N)         คย (KEY)  คณสมบตหนงทสำาคญของความสมพนธกคอ ความเปนเอกลกษณ (Uniqueness property) สงทใชกำาหนดความเปนเอกลกษณของแถวในความสมพนธ เรยกวา คย (key) ฐานขอมลหนงๆ จะมขอมลอยมากมาย ยงฐานขอมลมขนาดใหญขนกจะมขอมลจำานวนมากขนเปนเงาตามตวขอมลเหลานอาจมคาแตกตางกน คลายกน หรอแมกระทงเหมอนกน ทำาใหการแยกแยะโดยอาศยเพยงตวขอมลอยางเดยวทำาไดอยางยากลำาบาก ดงนนจงมการกำาหนดคา Keys ประจำาขอมลเพอทำาใหการแยกแยะขอมลในฐานขอมลเปนไปอยางถกตอง คยมหลายประเภท ไดแก คยหลก, Secondary key, Foreign key, Candidate key  คยหลก (Primary key) คยหลก คอ Key หลกทใชในการอางถง Entity ในฐานขอมล การเลอกคยหลกสามารถเลอกไดจาก Record ใดๆ กไดทไมมโอกาสซำาซอนกนบนฐานขอมลนน  คยหลกเปนขอมลสำาคญทจะทำาใหการเขาถงขอมลบนฐานขอมลเปนไปไดอยางรวดเรว ดงนนผใชจงควรกำาหนดคยหลกใหชดเจนตงแตขนตอนออกแบบฐานขอมล หากไมมขอมลใดเลยในฐานขอมลทเหมาะทจะเปนคยหลกกควรทจะกำาหนด Record ใหมสำาหรบใหเปนคยหลกโดยเฉพาะ คยรอง (Secondary Key) คยสำารอง คอ คยเดยวหรอคยผสม (Single or Composite key) ซงเมอใชในการคนหาขอมลจากความสมพนธจะไดมากกวาหนงเรคคอรด ตางจากคยหลกททำาใหขอมลในตารางไมซำากน ดงนนคยรองจงไมจำาเปนจะตองเปนเอกลกษณ คยนอก (Foreign key) คยนอก คอ คยเดยวหรอคยผสม ซงปรากฏเปนคยทวไปของความ

สมพนธหนง แตไปปรากฏเปนอกคยหลกในอกความสมพนธหนง คยนอกเปนอกคยหนงทมความสำาคญมากใสฐานขอมลเชงสมพนธ เนองจากเปนตวทใชสรางการเชอมตอระหวางความสมพนธ การเปลยนแปลงคาของคยนอกจะตองอาศยความระมดระวงเปนอยางมากเนองจากจะมผลกระทบโดยตรงตอขอมลในความสมพนธอนทมการอางองถงคยนอกตวน จงมกฎและเงอนไขทบงคบใชเพอทำาใหขอมลมความถกตองอยเสมอ การกำาหนดคาใหกบคยนอกของความสมพนธทอางองถงจะตองกำาหนดคาของคยใหอยในโดเมนเดยวกนกบความสมพนธทคยนอกนนเปนคยหลก แตคยนอกนนไมจำาเปนจะตองเปนสวนหนงในคยหลกของความสมพนธอน  ซปเปอรคย (Superkey) คอกลมของแอททรบวทสามารถนำาไปใชในการคนหาขอมลทเปนเอกลกษณได  คยแขงขน (Candidate key) คยแขงขน กคอ ซปเปอรคย และไมมกลมยอยของคยใดในคยแขงขนทจะสามารถเปนซปเปอรคยไดอก          ความสำาคญของการประมวลผลแบบระบบฐานขอมล         สามารถลดความซำาซอนของขอมลได การเกบขอมลชนดเดยวกนไวหลาย ๆ ท ทำาใหเกดความซำาซอน (Redundancy) ดงนนการนำาขอมลมารวมเกบไวในฐานขอมล จะชวยลดปญหาการเกดความซำาซอนของขอมลได โดยระบบจดการฐานขอมล (Database Management System : DBMS) จะชวยควบคมความซำาซอนได เนองจากระบบจดการฐานขอมลจะทราบไดตลอดเวลาวามขอมลซำาซอนกนอยทใดบาง หลกเลยงความขดแยงของขอมลได หากมการเกบขอมลชนดเดยวกนไวหลาย ๆ ทและมการปรบปรงขอมลเดยวกนน แตปรบปรงไมครบทกททมขอมลเกบอยกจะทำาใหเกดปญหาขอมลชนดเดยวกน อาจมคาไมเหมอนกนในแตละททเกบขอมลอย จงกอใหเกดความขดแยงของขอมลขน (Inconsistency) สามารถใชขอมลรวมกนได         ฐานขอมลจะเปนการจดเกบขอมลรวมไวดวยกน ดงนนหากผใชตองการใชขอมลในฐานขอมลทมาจากแฟมขอมลตางๆ กจะทำาไดโดยงายสามารถรกษาความถกตองเชอถอไดของขอมลบางครงพบวาการจดเกบ

ขอมลในฐานขอมลอาจมขอผดพลาดเกดขน เชน จากการทผปอนขอมลปอนขอมลผดพลาดคอปอนจากตวเลขหนงไปเปนอกตวเลขหนง โดยเฉพาะกรณมผใชหลายคนตองใชขอมลจากฐานขอมลรวมกน หากผใชคนใดคนหนงแกไขขอมลผดพลาดกทำาใหผอนไดรบผลกระทบตามไปดวย ในระบบจดการฐานขอมล (DBMS) จะสามารถใสกฎเกณฑเพอควบคมความผดพลาดทเกดขน สามารถกำาหนดความเปนมาตรฐานเดยวกนของขอมลได การเกบขอมลรวมกนไวในฐานขอมลจะทำาใหสามารถกำาหนดมาตรฐานของขอมลไดรวมทงมาตรฐานตาง ๆ ในการจดเกบขอมลใหเปนไปในลกษณะเดยวกนได เชนการกำาหนดรปแบบการเขยนวนท ในลกษณะ วน/เดอน/ป หรอ ป/เดอน/วน ทงนจะมผทคอยบรหารฐานขอมลทเราเรยกวา ผบรหารฐานขอมล (Database Administrator : DBA) เปนผกำาหนดมาตรฐานตางๆ สามารถกำาหนดระบบความปลอดภยของขอมลได         ระบบความปลอดภยในทน เปนการปองกนไมใหผใชทไมมสทธมาใช หรอมาเหนขอมลบางอยางในระบบ ผบรหารฐานขอมลจะสามารถกำาหนดระดบการเรยกใชขอมลของผใชแตละคนไดตามความเหมาะสม         เกดความเปนอสระของขอมล  ในระบบฐานขอมลจะมตวจดการฐานขอมลททำาหนาทเปนตวเชอมโยงกบฐานขอมล โปรแกรมตาง ๆ อาจไมจำาเปนตองมโครงสรางขอมลทกครง ดงนนการแกไขขอมลบางครง จงอาจกระทำาเฉพาะกบโปรแกรมทเรยกใชขอมลทเปลยนแปลงเทานน สวนโปรแกรมทไมไดเรยกใชขอมลดงกลาว กจะเปนอสระจากการเปลยนแปลงองคประกอบของระบบฐานขอมล         ระบบฐานขอมลเปนเพยงวธคดในการประมวลผลรปแบบหนงเทานน แตการใชฐานขอมลจะตองประกอบไปดวยองคประกอบหลกดงตอไปน         1) แอพลเคชนฐานขอมล (Database Application)         2) ระบบจดการฐานขอมล (Database Management System หรอ DBMS)         3) ดาตาเบสเซรฟเวอร (Database Server)

         4) ขอมล (Data)         5) ผบรหารฐานขอมล ((Database Administrator หรอ DBA)แอพพลเคชนฐานขอมล         เปนแอพพลเคชนทสรางไวใหผใชงานสามารถตดตอกบฐานขอมลไดอยางสะดวก ซงมรปแบบการตดตอกบฐานขอมลแบบเมนหรอกราฟฟก  โยผใชไมจำาเปนตองมความรเกยวกบฐานขอมลเลยกสามารถเรยกใชงานฐานขอมลไดเชน บรการเงนสด ATMหนาทของระบบจดการฐานขอมล มดงน

1.          1) กำาหนดมาตรฐานขอมล2.          2) ควบคมการเขาถงขอมลแบบตาง ๆ3.          3) ดแล-จดเกบขอมลใหมความถกตองแมนยำา4.          4) จดเรองการสำารอง และฟ นสภาพแฟมขอมล5.          5) จดระเบยบแฟมทางกายภาพ (Physical Organization)6.          6) รกษาความปลอดภยของขอมลภายในฐานขอมล และปองกนไม

ใชขอมลสญหาย7.          7) บำารงรกษาฐานขอมลใหเปนอสระจากโปรแกรมแอพพลเคชนอน

ๆ8.          8) เชอมโยงขอมลทมความสมพนธเขาดวยกน เพอรองรบความ

ตองการใชขอมลในระดบตาง ๆ9. ดงรปท 2.11

รปท 2.11 ตวอยางการเกบขอมลลงในฐานขอมลดาตาเบสเซรฟเวอร         เปนคอมพวเตอรทคอยใหบรการการจดการฐานขอมล ซงกคอ

เครองคอมพวเตอรทระบบจดการฐานขอมลทำางานอยนนเอง เพราะฉะนนควรเปนคอมพวเตอรทมความรวดเรวในการทำางานสงกวาคอมพวเตอรทใชงานโดยทวไปขอมล         ขอมล คอ เนอหาของขอมลทเราใชงาน ซงจะถกเกบในหนวยความจำาของดาตาเบสเซรฟเวอร โยจะถกเรยกมาใชงานจากระบบจดการฐานขอมลผบรหารฐานขอมล         ผบรหารฐานขอมล คอ กลมบคคลททำาหนาทดแลขอมลผานระบบจดการฐานขอมล ซงจะควบคมใหการทำางานเปนไปอยางราบรน นอกจากนยงทำาหนาทกำาหนดสทธการใชงานขอมล กำาหนดในเรองความปลอดภยของการใชงาน พรอมทงดแลดาตาเบสเซรฟเวอรใหทำางานอยางปกตดวย ดงรปท 2.12

รปท 2.12 ตวอยางขนตอนบนทกขอมลฝนฐานขอมล

รปแบบฐานขอมล         1) ฐานขอมลเชงสมพนธ (Relational Database) ฐานขอมลเชงสมพนธเปนฐานขอมลทนยมนำามาใชงานในปจจบนมากทสดฐานขอมล

หนง โดยผรเรมพฒนากคอ อเอฟ คอดด (E.F.Codd) และระบบจดการฐานขอมลทใชฐานขอมลแบบน ไดแก Microsoft Access, DB2 และ Oracle เปนตน ลกษณะโครงสรางขอมลของฐานขอมลชนดน ขอมลถกจดเกบในรปแบบของคาราง(Table) ซงภายในตารางกจะแบงออกเปนแถว (Row) และคอลมน (Column) แตละตารางจะมจำานวนแถวไดหลายแถว และจำานวนคอลมนไดหลายคอลมน แถวแตละแถวสามารถเรยกชอไดอกอยางวา ระเบยนหรอเรคคอรด (Record) และคอลมนแตละคอลมนเรยกไดอกชอหนงวา เขตขอมลหรอ ฟลด (Field)         2) ฐานขอมลแบบลำาดบขน (Hierarchical Database)เปนฐานขอมลทนำาเสนอขอมลและความสมพนธระหวางขอมลในรปแบบของโครงสรางตนไม (Tree Structure) เปนโครงสรางลกษณะคลายตนไมเปนลำาดบขน ซงแตกออกเปนกงกานสาขา ผทคดคนฐานขอมลแบบนคอ North American Rockwell โดยใชแนวความคดของโปรแกรม Generalized Update Access Method (GUAM) โครงสรางของฐานขอมลแบบลำาดบขนจะมโครงสรางของขอมลเปนลกษณะความสมพนธแบบพอลก คอ พอ (Parent) 1 คนมลก (Child) ไดหลายคน แตลกมพอไดคนเดยว (ความสมพนธแบบ 1 ตอ n) หรอแบบพอคนเดยวมลก 1 คน (ความสมพนธแบบ 1 ตอ 1) ซงจดแยกออกเปนลำาดบขน โดยระดบขนท 1 จะมเพยงแฟมขอมลเดยว คอ พอ ในระดบขนท 2 และระดบขนท 3 จะมกแฟมขอมลกไดโดยในโครงสรางขอมลแบบลำาดบขนแตละกรอบจะมตวช (Pointers) หรอหวลกศรวงเขาหาไดไมเกน 1 หวกฎควบคมความถกตอง คอ เรคอรดพอสามารถมเรคอรดลกไดหลายเรคอรดแตเรคอรดลกแตละเรคอรดจะมเรคอรดพอไดเพยงเรคอรดเดยวเทานนตวอยาง รานขายเครองใชไฟฟา ในการขายสนคา พนกงานขายสามารถขายสนคาใหแกลกคาไดหลายคน แตลกคาแตละคนตองซอสนคากบพนกงาน 1 คน แตกสามารถซอสนคาไดมากกวา 1 อยาง ดงรปท 2.13

รปท 2.13 ตวอยางขอมล และการแยกขอมลลกษณะเดนของรปแบบฐานขอมลแบบลำาดบขน         1) เปนฐานขอมลทมระบบโครงสรางซบซอนนอยทสด         2) มคาใชจายในการจดสรางฐานขอมลนอย         3) ลกษณะโครงสรางเขาใจงาย         4) เหมาะสำาหรบงานทตองการคนหาขอมลแบบมเงอนไขเปนระดบและออกรายงานแบบเรยงลำาดบตอเนอง         5) ปองกนระบบความลบของขอมลไดดเนองจากตองอานแฟมขอมลทเปนตนกำาเนดกอนขอจำากดของรปแบบฐานขอมลแบบลำาดบม 3 ขน          5.1 มโอกาสเกดความซำาซอนมากทสดเมอเทยบกบฐานขอมลแบบโครงสรางอน             5.2 ขาดความสมพนธระหวางแฟมขอมลในรปเครอขาย             5.3 มความคลองตวนอยกวาโครงสรางแบบอนๆ เพราะการเรยกใชขอมลตองผานทางตนกำาเนด (root) เสมอ ถาตองการคนหาขอมลซงปรากฏในระดบลางๆ แลว จะตองคนหาทงแฟม         3) ฐานขอมลแบบเครอขาย (Network Database)         โครงสรางของขอมลแตละแฟมขอมลมความสมพนธคลายรางแห โดยมลกษณะโครงสรางคลายกบโครงสรางแบบลำาดบขน แตกตางกนตรง

ทโครงสรางแบบเครอขายสามารถมตนกำาเนดของขอมลไดมากกวา 1 เรคอรด การออกแบบลกษณะของฐานขอมลแบบเครอขายทำาใหสะดวกในการคนหามากกวาลกษณะฐานขอมลแบบลำาดบขน เพราะไมตองไปเรมคนหาตงแตขอมลตนกำาเนดโดยทางเดยว ขอมลแตละกลมจะเชอมโยงกนโดยตวชขอมลภายในฐานขอมลแบบนสามารถมความสมพนธกนแบบใดกไดอาจเปนหนงตอหนง หนงตอกลม หรอกลมตอกลมกฎการควบคมของฐานขอมลแบบเครอขาย         โครงสรางแบบเครอขายสามารถยนยอมใหระดบขนทอยเหนอกวามหลายแฟมขอมลแมวาระดบขนถดลงมาจะมเพยงแฟมขอมลเดยว โดยเรคอรดทอยเหนอกวามความสมพนธกบเรคอรดทอยระดบลางไดมากกวา 1 เรคอรด โดยแตละเรคอรดสมพนธกนดวยการลงค (Links) ฐานขอมลแบบเครอขายจะทำาใหสะดวกในการคนหามากกวาฐานขอมลแบบลำาดบขน เพราะไมตองไปเรมคนหาตงแตขอมลตนกำาเนดโดยทางเดยว ขอมลแตละกลมจะเชอมโยงกนโดยตวช         ตวอยางของโครงสรางขอมลแบบเครอขาย เชน รานขายอปกรณคอมพวเตอรแหงหนงสงสนคาหลายชนดจากผผลตสนคาหลายๆ บรษท แลวนำาสนคาไปเกบไวในคลงสนคา ซงแสดงความสมพนธของผผลตสนคาและคลงสนคา โดยการใชลกศรเชอมโยง ดงรปท 2.14

รปท 2.14 ตวอยางขอมลทบนทกลงฐานขอมลแสดงตวอยางรปแบบฐานขอมลแบบเครอขาย         พบวาผผลตสนคากบสนคา มความสมพนธแบบกลมตอกลม กลาวคอ ผผลตสนคาแตละบรษทสามารถขายสงสนคาไดมากกวา 1 ชนด และสนคาแตละชนดกสามารถสงไดจากผผลตสนคามากกวา 1 บรษท สวน

สนคากบคลงสนคา มความสมพนธแบบหนงตอหนง กลาวคอ ทเกบสนคาในคลงสนคาแตละแหงจะใชเกบสนคาแตละชนดเทานน

2.1.7 Framework Bootstrap          ตวอยางดงรปท 2.15

รปท 2.15 Front-end Framework Bootstrap         Bootstrap เปน Front-end Framework ทชวยใหเราสามารถสรางเวบแอพลเคชนไดอยางรวดเรว และ สวยงาม ตว Bootstrap เองมทง CSS Component และ JavaScript Plugin ใหเราไดเรยกใชงานไดอยางหลากหลาย ตว Bootstrap ถกออกแบบมาใหรองรบการทำางานแบบ Responsive Web ซงทำาใหเราเขยนเวบแคครงเดยวสามารถนำาไปรนผานเบราเซอรไดทงบน มอถอ แทบเลต และพซทวไป โดยทไมตองเขยนใหม         Bootstrap ถกพฒนาขนดวยกลมนกพฒนาจากทวทกหนแหงในโลก มการอพเดทอยตลอดเวลา เพอรองรบการทำางานไดอยางทนสมย และ การแกไขปญหาตางๆ หรอ Bug กทำาไดเรว ดงนน ผเขยนเอง จงไดเลอกทจะใช Bootstrap ในการนำามาชวยพฒนาโปรเจค ทงเวบแอพลเคชน App บนมอถอ         Bootstrap เปนเครองมอทชวยใหเราสามารถพฒนาเวบแอพลเคชนไดอยางรวดเรวและดสวยงาม UI (User Interface) นนถกออกแบบมาเพอใหทนสมยตลอดเวลา สามารถนำาไปใชไดกบเวบททวไป และ เวบสำาหรบมอถอ (โดยใช Responsive utilities) ในการเรยนร

Bootstrap นนงายมาก เราไมจำาเปนตองเกง CSS กสามารถสรางเวบทสวยงามได ไมวาจะเปนปม (Buttons) สตางๆ ฟอรมคอนโทรลตางๆ, ตาราง, ไอคอน, เมนบาร, Dropdown, เมน, หนาตาง Popup (Modal) และ อกหลายๆ รายการทพรอมใหเราเลอกใชงานสวนประกอบของ Bootstrap         1) Layout จะประกอบไปดวย containers, grid, media object และ responsive เพอใชการตกแตงรปรางหนาของเวบ โดย containers เปนการกำาหนดขอบเขตวตถหรอขอมล , grid ใชเพอแบง containers เปนคอลมนยอย ซงสามารถทำาไดถง 12 คอลมน , media object เปนการจดการ media ตางๆทอยบนหนาเวบ สวน responsive จะเปนฟงชนทชวยทำาใหหนาเวบสามารถเปนรปแบบใหมความเหมาะสมตามจอแสดงผลของผใช         2) Base CSS เปนการกำาหนด style ของ display ซงจะใชรวมกบ HTML elements พนฐาน เชน typography (ลกษณะของตวอกษร ไมวาจะเปน ความหนา,ขนาดตวอกษร และ ลกษณะอน) , tables (รปแบบของตาราง ไมวาจะเปนส การแบงแถวหรอคอลมน) และ images (ขนาดของภาพ, ลกษณะของขอบรปภาพ)         3) Components : เปนการรวบรวม สำาหรบสงทเราตองใชบอยๆ ไมวาจะเปน buttons, dropdowns , input groups , navigation , alerts(การแจงเตอน), navbar , form control (รปแบบการกรอกแบบชดขอมล) และ อนๆอกมากมาย         4) JavaScript : jQuery plugins ตางๆ ไมวาจะเปน modal , carousel หรอ tooltip เพอทจะทำาใหเวบของเรามลกเลนและมความนาใชงานมากขน

2.1.8 ภาษา (HTML)         HTML ยอมาจาก Hyper Text Markup Language คอภาษาคอมพวเตอรทใชในการแสดงผลของเอกสารบน website หรอทเราเรยกกนวาเวบเพจ ถกพฒนาและกำาหนดมาตรฐานโดยองคกร World

Wide Web Consortium (W3C) และจากการพฒนาทางดาน Software ของ Microsoft ทำาใหภาษา HTML เปนอกภาษาหนงทใชเขยนโปรแกรมได หรอทเรยกวา HTML Application           HTML เปนภาษาประเภท Markup   สำาหรบการการสรางเวบเพจ โดยใชภาษา HTML สามารถทำาโดยใชโปรแกรม Text Editor ตางๆ เชน Notepad, Editplus หรอจะอาศยโปรแกรมทเปนเครองมอชวยสรางเวบเพจ เชน Microsoft FrontPage, Dream Weaver ซงอำานวยความสะดวกในการสรางหนา HTML สวนการเรยกใชงานหรอทดสอบการทำางานของเอกสาร HTML จะใชโปรแกรม  เชน IE Microsoft Internet Explorer  (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เปนตน         HTML มโครงสรางการเขยนโดยอาศย Tag ในการควบคมการแสดงผลของขอความ รปภาพ หรอวตถอน ๆ แตละ Tag อาจจะมสวนขยาย เรยกวา Attribute สำาหรบจดรปแบบเพมเตม         การสรางเวบเพจ โดยใชภาษา HTML สามารถทำาโดยใชโปรแกรม Text Editor ตางๆ เชน Notepad, EditPlus หรอจะอาศยโปรแกรมทเปนเครองมอชวยสรางเวบเพจ เชน Microsoft FrontPage, Dream Weaver ซงอำานวยความสะดวกในการสรางหนา HTML ในลกษณะ WYSIWYG (What You See Is What You Get)         แตมขอเสยคอ โปรแกรมเหลานมก generate code ทเกนความจำาเปนมากเกนไป ทำาใหไฟล HTML มขนาดใหญ และแสดงผลชา ดงนนหากเรามความเขาใจภาษา HTML จะเปนประโยชนใหเราสามารถแกไข code ของเวบเพจไดตามความตองการ และยงสามารถนำา script มาแทรก ตดตอ สรางลกเลนสสนใหกบเวบเพจของเราไดการใชงาน         1) คำาสง หรอ Tag             Tag เปนลกษณะเฉพาะของภาษา HTML ใชในการระบรปแบบคำาสง หรอการลงรหสคำาสง HTML ภายในเครองหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยท Tag

HTML แบงได 2 ลกษณะ คอ              1.1 Tag เดยว เปน Tag ทไมตองมการปดรหส เชน <HR>, <BR> เปนตน             1.2 Tag เปด/ปด รปแบบของ tag นจะเปนแบบ <tag> .... </tag> โดยท                <tag> เราเรยกวา tag เปด               </tag> เราเรยกวา tag ปด         2) Attributes        Attributes เปนตวบอกรายละเอยดของ tag นนเชน <span align = 'left'> ... </span> เปนการบอกวาใหอกษรทอยใน tag นชดซาย         3) not case sensitive             หมายถง คณจะพมพ <BR> หรอ <br> กได ผลลพธออกมาไมตางกนโครงสรางของหลกของ HTML          โครงสรางหลกของ HTML กจะเรมดวย <html> และจบดวย </html> เสมอ ซงชดคำาสงทใชจะแยกเปน 2 สวนคอ          1) head คำาสงทอยในสวนนจะใชบรรยายรายละเอยดเกยวกบ web page ซงจะไมแสดงผลท web page โดยตรง         2) body คำาสงทอยในสวนนจะใชในการจดรปแบบตวอกษร จดหนา ใสรปภาพ ซงตวอกษรในสวนนจะแสดงท web brower โดยตรง          2.1 คำาสงในหวขอของ head (Head Section) ดงรปท 2.16

รปท 2.16 tag ของภาษา HTML

         Head Section เปนสวนทใชอธบายเกยวกบขอมลเฉพาะของหนาเวบนนๆ เชน ชอเรองของหนาเวบ (Title), ชอผจดทำาเวบ (Author), คยเวรดสำาหรบการคนหา (Keyword) โดยม Tag สำาคญ ดงรปท 2.17

รปท 2.17 tag header ของภาษา HTMLTITLE         ขอความทใชเปน TITLE ไมควรพมพเกน 64 ตวอกษร, ไมตองใสลกษณะพเศษ เชน ตวหนา, เอยง หรอส โดยขอความในสวนนจะแสดงผลใน title bar ของ web browser META         Tag META จะไมปรากฏผลบนเบราเซอร แตจะเปนสวนสำาคญ ในการจดอนดบบญชเวบ สำาหรบผใหบรการสบคนเวบ (Search Engine เชน google , yahoo)          การพมพชดคำาสง HTML สามารถพมพไดทงตวพมพเลก ตวพมพใหญ หรอผสม การยอหนา เวนบรรทด หรอชองวาง สามารถกระทำาไดอสระ โปรแกรมเบราเซอรจะไมสนใจเกยวกบระยะเวนบรรทดหรอยอหนา หรอชองวาง         2.2 คำาสงในสวนของ (Body Section)         Body Section เปนสวนเนอหาหลกของหนาเวบ ซงการแสดงผลจะตองใช Tag จำานวนมาก ขนอยกบลกษณะของขอมล เชน ขอความ, รปภาพ, เสยง, วดโอ หรอไฟลตางๆ          สวนเนอหาเอกสารเวบ เปนสวนการทำางานหลกของหนาเวบ ประกอบดวย Tag มากมายตามลกษณะของขอมล ทตองการนำาเสนอ การปอนคำาสงในสวนน ไมมขอจำากดสามารถปอนตดกน หรอ 1 บรรทดตอ 1 คำาสงกได แตมกจะยดรปแบบทอานงาย คอ การทำายอหนาในชดคำาสงท

เกยวของกน ทงนใหปอนคำาสงทงหมดภายใต Tag <BODY> </BODY> และแบงกลมคำาสงไดดงน 

2.2 งานวจยทเกยวของ นางสาวมานสงค ปฐมวรยะวงศ (2550) ทำาการศกษาวจยเรอง การใชประโยชนและความพงพอใจตอเวบไซตสถาบนของนกศกษาสถาบนเทคโนโลยพระจอมเกลาพระนครเหนอ มวตถประสงคเพอศกษาพฤตกรรมการใช เหตผลทใชเวบไซต ลกษณะของการใชประโยชน และระดบความพงพอใจตอเวบไซตสถาบนของนกศกษา ใชวธการสำารวม สมตวอยางนกศกษาจำานวน 400 คน พบวา พฤตกรรมการใชเวบไซตสถาบนมความถ 1 – 3 ครงตอเดอน แตละครงใชเวลา 15 – 29 นาท สวนใหญเขาเวบไซตเพอรบทราบขอมลขาวสาร และเพอตดตอสอสารกบสถาบนในระบบของการลงทะเบยน การตรวจสอบผลการศกษา และการสบคนขอมลประกอบการศกษา วจย และรายงาน ผลเปรยบเทยบดานเพศ ระดบการศกษา และรายได พบวาไมมผลตอพฤตกรรมการใชเวบไซตสถาบน แตนกศกษาทมเครองคอมพวเตอร และโมเดมของตนเองจะมพฤตกรรมการใชเวบไซตแตกตางกบนกศกษาทไมมอยางมนยสำาคญทางสถตทระดบ 0.05 ประเดนความตองการของนกศกษา มากทสด คอ ตองการใหเวบไซตของสถาบนปรบปรงขอมลใหทนสมยอยเสมอ รองลงมาคอควรปรบปรงการออกแบบตกแตงเวบไซต และจดหมวดหมใหเปนระเบยบเพอสบคนไดงาย มขอเสนอแนะใหเพมความสามารถของเครองบรการ เพอการเชอมโยงกบเวบไซตทนาสนใจ เพมชองทางการตดตอสอสารกบผบรหาร อาจารยทปรกษา และผเชยวชาญ สนต ชอบธรรม (2550) ไดศกษาและพฒนาระบบสารสนเทศเพอการบรหารงานดาน การบรการและตดตามงานบรการของมหาวทยาลยเทคโนโลยพระจอมเกลาพระนครเหนอ ภายใน งานวจยไดอธบายถงการ

พฒนาระบบสารสนเทศเพอการบรหารงานดานการบรการใหแกบคลากร ภายในองคกร โดยใชสถาปตยกรรมแบบทรเทยรอากเทคเจอร(Three Tire Architecture) และพฒนา ระบบเปนลกษณะเวบแอพพลเคชนโดยใชโปรแกรมภาษา PHP และใชโปรแกรมตดตอฐานขอมล MySQL โดยระบบจะสนบสนนการทางานแตกตางกนออกไปตามความเหมาะสมของผใชแตละ ระดบ สามารถชวยในการอำานวยความสะดวกใหแกเจาหนาทผรบผดชอบในงานบรการของสำานกคอมพวเตอร มหาวทยาลยเทคโนโลยพระจอมเกลาพระนครเหนอ และผทเขามาขอใชบรการไดใน ระดบด จากการศกษาเอกสารและงานวจยทเกยวของทกลาวมาขางตนสรปไดวา ระบบเวบไซตบนทกการเยยมบานของนกเรยน/นกศกษา การวจยและมสวนรวมในการจดการศกษาอกทงเหมาะสมกบ กระบวนการเรยน ทำาหนาทเปนและกระตนใหผเรยนเกดความสนใจทจะคนควาหาความร สอดคลอง กบยคปจจบนอยในยค 4.0 โดยผเรยนสามารถแสวงหาความรดวยตนเอง จากหลกการและเหตผลท กลาวมานผศกษาจงมความสนใจในการสรางระบบเวบไซตบนทกการเยยมบาน สำาหรบนกเรยน/นกศกษา แผนกวชาเทคนคคอมพวเตอร วทยาลยเทคนคแพร เพอใชเปนแฟมสะสมผลงานของนกเรยน/นกศกษา ใหสงขนตามวตถประสงคทตองการ