การออกแบบและพฒนาโปรแกรมบนอนเทอรเนต (Internet Programming Development and Design)

อนเทอรเนตคออะไร

อนเทอรเนต (Internet) คอ เครอขายคอมพวเตอรทใหญทสดในโลก เกดขนจากระบบเครอขายคอมพวเตอรเลก ๆ รวมกนเปนระบบเครอขายใหญ เพอใชในการตดตอสอสาร แลกเปลยนขอมลกนทวโลก

เวบไซต (องกฤษ: website, web site, Web site) หมายถง

หนาเวบเพจหลายหนา ซงเชอมโยงกนผานทางไฮเปอรลงก สวนใหญจดท าขนเพอน าเสนอขอมลผานคอมพวเตอร โดยถกจดเกบไวในเวลดไวดเวบ หนาแรกของเวบไซตทเกบไวทชอหลกจะเรยกวา โฮมเพจ เวบไซตโดยทวไปจะใหบรการตอผใชฟร แตในขณะเดยวกนบางเวบไซตจ าเปนตองมการสมครสมาชกและเสยคาบรการเพอทจะดขอมล ในเวบไซตนน ซงไดแกขอมลทางวชาการ ขอมลตลาดหลกทรพย หรอขอมลสอตางๆ ผท าเวบไซตมหลากหลายระดบ ตงแตสรางเวบไซตสวนตว จนถงระดบเวบไซตส าหรบธรกจหรอองคกรตางๆ การเรยกดเวบไซตโดยทวไปนยมเรยกดผานซอฟตแวรในลกษณะของ เวบเบราวเซอร

Static Website

เวบไซตทตอบสนองทางเดยว ไมมการตดตอกบฐานขอมล และไมสามารถเกบขอมลได เปนการน าเสนอขอมลแบบทางเดยว เหมอนกบการอานหนงสอ ซงเวบไซตจะพฒนาดวย HTML หรอ DHTML เปนหลก และเนองจาก Static Website มการน าเสนอขอมลแบบตายตวจง ไมเปนทสนใจของผพบเหน ปจจบนไมคอยเหนเวบไซตประเภทนมากนก เนองจากไมสามารถบรหารขอมลไดสะดวก จงท าใหเวบไซตทพฒนาดวยวธน ไมคอยประสบความส าเรจ และปดตวเองไป หรอพฒนาใหมในรปแบบ Dynamic Website

Dynamic Website

เวบไซตทสามารถตอบสนองระหวางผใชกบเวบไซตได มการตดตอและเกบขอมลลงในฐานขอมล ซงเวบไซตจะพฒนา ดวย Web Programming (ASP, PHP, ASP.net, อนๆ) อาจกลาวไดวา Dynamic Website เปนเวบไซตทมระบบจดการขอมล ( Backoffice) ส าหรบใหผใชสามารถแกไขขอมลไดโดยงายผานทาง Login ในหนาเวบไซต โดยผใชจะไดรบ Username และ Password สวนตวส าหรบเขาไปแกไขขอมล ในฐานะ Administrator

Active Website

เวบเพจพวกนเปนเวบเพจทมสวนของ Java , Active X เปนตน โดยสวนใหญจะเนน Java เปนหลก(มลกษณะเดนคอ การโหลด เวบจะเปนการโหลด ซอรสโปรแกรม มาประมวล ทเครองไคลเอน (Web Browser) ดวย Web Browser ตองมตวประมวลผล ซอรสโปรแกรม เชน Java Runtime หรออนๆ นอกเหนอจาก HTML สามารถเขยนซอรสโปรแกรม ให รเฟรช เฉพาะขอมลได โดยไมตองโหลดหนาเวบมาใหมเหมอน Dynamic Web เมอประมวลผลผาน Web Browser ซอรสโปรแกรม สามารถท าไดทกอยางภายในกรอบท Java Runtime ก าหนด พฒนายากกวาทงสองแบบ

HTML

เปนภาษาทใชในการสรางเวบเพจ HTML เปน Script ทเรยงล าดบ Tag (ค าสง) ไวเปน file ไฟลหนงเพอเปนตวบอก Browser วาจะตองแสดงอะไร ลกษณะอยางไร

Tag จะประกอบดวยเครองหมาย < ตามดวยชอ Tag และเครองหมาย > ซงโดยทวไป Tag จะมเปนค เพอเปดและปดค าสงโดย Tag เปดจะมลกษณะดงขางตน แต Tag ปดจะเพม Slash (/) หนา Tag เทานน ตวอยางเชน ค าสง Heading <HEADING>…………….</HEADIGNG>

PHP

โปรแกรม Webserver คอโปรแกรมทใชจ าลองเครองพซ หรอ โนตบก เปน Web

Server เชน AppServ, WMServer หรอ IIS โปรแกรมทใชท าเวบเซรฟเวอรสามารถแบงไดดวยกน 2 ประเภทใหญๆ ดงน

1. Stand Alone Web Server

2. Web Server Utility

1. Stand Alone Web Server เปนโปรแกรมทใชจ าลองเครองพซ/โนตบก เปนเวบเซรฟเวอรผใชงานจะตองมการตดตงตวแปลภาษา (PHP,

PERL, PYTHON, ASP, ASP.NET, JSP) ,โปรแกรมฐานขอมล (MySQL, PostgreSQL, MS SQL Server, MS Access), ทลจดการฐานขอมล (phpMyAdmin, phpPgAdmin) เพมเตม รวมทงจะตองมการปรบแตงคาคอนฟกเวบเซรฟเวอรเพมเตมจงจะใชงานได

2. Web Server Utility เปนเวบเซรฟเวอรทมการน าโปรแกรมหลายตวไวดวยกน หลงการตดตงผใชงานสามารถทดสอบเขยน

โปรแกรมไดทนท ภายในมทง Apache, PHP, PERL, MySQL, phpMyAdmin

WBI (Web-based Instruction)

การเรยนการสอนผานเวบ (WBI)หมายถง การใชโปรแกรมสอหลายมตทอาศยประโยชนจากคณลกษณะและทรพยากรของอนเทอรเนตและ

เวลดไวดเวบ มาออกแบบเปนเวบเพอการเรยนการสอน สนบสนนและสงเสรมใหเกดการเรยนรอยางมความหมาย เชอมโยงเปนเครอขายทสามารถเรยนไดทกททกเวลา โดยมลกษณะทผสอนและนกเรยนมปฏสมพนธกนโดยผานระบบเครอขายคอมพวเตอรทเชอมโยงซงกนและกน

ประโยชนของการเรยนการสอนผานเวบ

1. การเรยนการสอนสามารถเขาถงทกหนวยงานทมอนเทอรเนตตดตงอย2. การเรยนการสอนกระท าไดโดยผเขาเรยนไมตองทงงานประจ าเพอมาเขาชนเรยน3. ไมตองเสยคาใชจายในการเรยนการสอน เชน คาทพก คาเดนทาง4. การเรยนการสอนกระท าไดตลอด 24 ชวโมง5. การจดสอนหรออบรมมลกษณะทผเขาเรยนเปนศนยกลาง การเรยนรเกดกบผเขาเรยนโดยตรง6. การเรยนรเปนไปตามความกาวหนาของผรบการเรยนการสอนเอง7. สามารถทบทวนบทเรยนและเนอหาไดตลอดเวลา8. สามารถซกถาม หรอเสนอแนะ หรอถามค าถามไดดวยเครองมอบนเวบ9. สามารถแลกเปลยนขอคดเหนระหวางผเขารบการอบรมไดโดยเครองมอสอสารในระบบอนเทอรเนต ทง

ไปรษณยอเลกทรอนกส (E-mail) หรอหองสนทนา (Chat Room) อนๆ

PHP เบองตน

ในโปรแกรมภาษา php มแทกทใชส าหรบการก าหนดจดเรมตนและจดสนสดของค าสง php เชนเดยวกนซงในภาษา php มรปแบบของบลอกค าสง 3 รปแบบ คอ

รปแบบท 1 มรปแบบคอ <?...?>ตวอยาง

<?print “โปรแกรมแรกของฉน” ;

?>

1

รปแบบท 2 มรปแบบคอ <? PHP...?>ตวอยาง

<? PHPprint “โปรแกรมแรกของฉน” ;

?>

รปแบบท 3 มรปแบบคอ <script language= “PHP”>...</script>ตวอยาง

<script language= “PHP”>print “โปรแกรมแรกของฉน” ;

</script>

การใชภาษา PHP รวมกบ ภาษา HTMLเราสามารถเขยนบลอกค าสงของ PHP แทรกไวในแทก HTML ได เชน

<HTML><BODY>

<?print “โปรแกรมแรกของฉน” ;

?>Good Morning

<?print “How are you” ;

?></BODY></HTML>

แบบฝกหด : ใหนกศกษา เขยนโปรแกรมภาษา PHP ประวตของตนเอง โดยแสดงรายละเอยดขอมลของตนเองดงน

ชอ...................................นามสกล......................................ทอย....................................................................................สาขาวชาเอก......................................................................เบอรโทรศพท.....................................................................คณะครศาสตร มหาวทยาลยราชภฏอตรดตถ

2 รปแบบค าสงแสดงผลลพธค าสงแสดงผลลพธของ PHP มอย 3 รปแบบ คอ

รปแบบท 1 echo มรปแบบของค าสง คอ<HTML><BODY>

<?echo “This is My first Program” ;

?><br>

<?echo “ผลคณของตวเลข 20 x 10 =” 20*10 ; ?>

</BODY></HTML>

รปแบบท 2 print มรปแบบของค าสงคอรปแบบ print “ขอมลทตองการจะแสดงผล” ;

<?print “This is My first Program” ;

?>

รปแบบท 3 printf มรปแบบของค าสงคอรปแบบ printf (“ขอมลทตองการจะแสดงผล”) ;

<?printf (“This is My first Program”) ;

?>

3 การใชค าสงหมายเหต (Comment)

ค าสงหมายเหต ใชเพอปองกนการลมค าสงโปรแกรม php ทถกเขยนไป โปรแกรมภาษา phpมเครองหมาย Comment ทใชส าหรบการระบขอความใดลงในโปรแกรม โดยสวนของโปรแกรมทถกเขยนไวจะไมถกแปลภาษา comment ของ php มอย 3 รปแบบคอ

1. เครองหมาย #2. เครองหมาย //3. เครองหมาย /*…*/

1. เครองหมาย #2. เครองหมาย //

ขอ 1 และ 2 สามามารถระบ comment ไดทละบรรทด เชน

<?echo “This is My first Program” ;# This is My first Program// This is My first Program

?>

เครองหมาย /*…*/ สามารถ comment ไดครงละหลายบรรทด เชน

<?echo “This is My first Program” ;/* This is My first Program

This is My first Program */?>

การใชภาษา PHP รวมกบ ภาษา HTML

<HTML><HEAD><TITLE>การใชแทกภาษา PHP รวมกบแทกภาษา HTML </TITLE></HEAD><BODY>

สวนทเปนแทกภาษา HTML <br><?

print “สวนทเปนแทกภาษา PHP” ;?>

</BODY></HTML>

การจดการ HTML Form

ทดสอบเขยนฟอรม วธท า

1. ตดตง Webserver และ PHP Complier2. เขยน File Form ชอ order.html3. เขยน File PHP ชอ order.php4. ทดสอบโดยน า order.html ไปไวท Subdirectory c:\AppServ\www

และorder.php ไปไวท Subdirectory c:\AppServ\www5. ไปท Browser พมพ http://localhost/order.html

ตวอยาง file html order.html<html><head><title>สงซอหนงสอ Computer</title></head><body><form method="POST" action="order.php"><center><h3>Computer books shopping</h3><br><h1>Form สงซอสนคา</h1><center>Name <input type="text" name="name"><br>Email <input type="text" name="email"><p>ตองการสงซอหนงสอ<input type="checkbox" name="book1" value="Database On Web">Database On Web<br><input type="checkbox" name="book2" value="CGI PHP">CGI PHP<p><input type="submit" value="Order Now"><input type="reset" value="Reset"></form></body></html> ขอบคณตวอยางจาก www.thaiwbi.com

<html><head><title>Form สงซองสนคา</title></head><?print "คณ $name <br> ";print "Email $email <br>";print "สนคาทคณตองการสง <br>";print "$book1<br>";print "$book2<br>";?></body></html>

ตวอยาง file php order.php

ขอบคณตวอยางจาก www.thaiwbi.com

ใหนกศกษา คนควา แทกค าสงภาษา HTML พรอมความหมาย จ านวน 20 แทกภาษา ลงในสมด

แทกภาษา HTML ความหมาย

<TITLE>…</TITLE> แทกค าสงในการระบขอความบรเวณ Title bar ของเบราวเซอร