ภาคผนวกbc.msu.ac.th/project_file/appendix(375).pdf · 2012-03-13 · ภาพที่ ก – 9 หน้าดําเนินการเตรียมการติดต้ัง

ภาคผนวก

104

ภาคผนวก ก การตดตงโปรแกรม

105

Adobe Dreamweaver CS5

Dreamweaver ถอไดวาเปนเครองมอสาหรบสรางเวบเพจ และดแลเวบไซต ทมประสทธภาพสง เปนทนยมใชของ Web Master อยางกวางขวาง ซงเปนโปรแกรมสาหรบเขยนภาษา HTML โดยเฉพาะ พรอมทงสามารถแทรก Java Scripts และ ลกเลนตางๆไดมากมายโดยทผใชไมจาเปนตองร หลกภาษา HTML มากนก ซงชวยประหยดเวลาและทางานไดสะดวกยงขน ขนตอนการตดต ง

1. เปดโฟลเดอรทอย ของโปรแกรม Adobe Dreamweaver CS5 แลวดบเบลคลกท Setup Icon

ภาพท ก – 1 ไฟลสาหรบตดตงโปรแกรม Adobe Dreamweaver CS5

2. กดปมยอมรบเงอนไข

ภาพท ก – 2 หนาแสดงเงอนไขของโปรแกรม Adobe Dreamweaver CS5

106

3. โปรแกรมดาเนนการเตรยมการตดตง

ภาพท ก – 3 หนาเตรยมตดตงโปรแกรม Adobe Dreamweaver CS5

4. โปรแกรมจะแสดงรายการทจะทาการตดตง เมอทานแนใจวาตองการเลอกตดตงโปรแกรมตามทเชคบอกซไวใหกดตดตง (INSTALL) ไดเลย

ภาพท ก – 4 หนาแสดงรายการทจะตดตงโปรแกรม Adobe Dreamweaver CS5

5. ดาเนนการตดตงโปรแกรม รอจนกวาแถบดาเนนการตดตงจะเลอนเตม 100 %

ภาพท ก – 5 หนาดาเนนการตดตงโปรแกรม Adobe Dreamweaver CS5

107

6. ตดตงเสรจสมบรณ

ภาพท ก – 6 หนาตดตงโปรแกรม Adobe Dreamweaver CS5 เสรจสมบรณ

7. เมอเรมเปดโปรแกรมจะพบหนาตาของโปรแกรมดงรป

ภาพท ก – 7 หนาโปรแกรม Adobe Dreamweaver CS5

108

Adobe Photoshop CS3

1. ดบเบลคลกทไฟล ADBPHSPCS3.exe

ภาพท ก – 8 หนาไฟลตดตงโปรแกรม Adobe Photoshop CS3

2. หลงจากทคลกแลวโปรแกรมจะทาการแยกไฟล Setup ออกมา

ภาพท ก – 9 หนาดาเนนการเตรยมการตดตง โปรแกรม Adobe Photoshop CS3

3. จากนนหนาตาง Setup จะขนมา อธบายถงลขสทธการใชงานใหคลกท Accept

ภาพท ก – 10 หนาแสดงลขสทธของโปรแกรม Adobe Photoshop CS3

4. เลอก Drive ทจะตดตงโปรแกรมลงไป แลวกดท Next

ภาพท ก – 11 หนาเลอก Drive ทตดตงโปรแกรม Adobe Photoshop CS3

109

5. โปรแกรมจะแสดงผลวาเราไดเลอกการตดตงอะไรบาง หลงจากนนกด Install

ภาพท ก – 12 หนาแสดงรายการทจะตดตงโปรแกรม Adobe Photoshop CS3 6. รอการตดตง

ภาพท ก – 13 หนาดาเนนการตดตงโปรแกรม Adobe Photoshop CS3

7. หลงจากตดตงเสรจ คลกท Finish

ภาพท ก – 14 หนาตดตงโปรแกรม Adobe Photoshop CS3 เสรจสมบรณ

110

8. ใส Serial Number หลงจากนนใหคลกท Next

ภาพท ก – 15 หนากรอก Serial Number ของโปรแกรม Adobe Photoshop CS3

9. หลงจากทใส Serial แลว จะมาถงหนาทตอง Register ใหเลอก Register Later

ภาพท ก – 16 หนาลงทะเบยนผใชงานโปรแกรม Adobe Photoshop CS3

10. ตดตงโปรแกรมเสรจสมบรณ

ภาพท ก – 17 หนาโปรแกรม Adobe Photoshop CS3

111

AppServ

1. ดาวนโหลดตวตดตงไดท www.appservnetwork.com เพอดาวนโหลด AppServ มชอไฟลวา appserv-win32-2.5.10.exe

ภาพท ก – 18 ดาวนโหลดโปรแกรม AppServ

2. ดบเบลคลกไฟล appserv-win32-2.5.10.exe ทดาวนโหลดมาโปรแกรมจะแสดงหนาจอ AppServ 2.5.10 - Welcome to the AppServ 2.5.10 Setup Wizard เปนขอความตอนรบเขาสการตดตงใหคลกปม Next ไดเลย

ภาพท ก – 19 หนาตดตงโปรแกรม AppServ

http://www.appservnetwork.com/

112

3. หนาจอ AppServ 2.5.10 - License Agreement เปนขอความแสดงลขสทธ GNU LESSER เมออานและเขาใจลขสทธนแลวกคลกปม I Agree เพอไปหนาจอตอไป

ภาพท ก – 20 หนาแสดงลขสทธโปรแกรม AppServ

4. หนาจอ AppServ 2.5.10 - Choose Install Location เปนการเลอกโฟลเดอรทใชในการตดตง Appserv โดยคาดฟอลตจะเลอกตดตงไปทโฟลเดอร C:\AppServ เมอเลอกโฟลเดอรไดแลวกคลกปม Next

ภาพท ก – 21 หนาเลอก Drive ตดตงโปรแกรม AppServ

113

5. หนาจอ AppServ 2.5.10 - Select Component ดงภาพ 5 เปนการเลอกสวนประกอบของ AppServ ซงมดงน

- Apache HTTP Server - โปรแกรม Webserver ทจาลองโฮสตบนเครองของเรา - MySQL Database – โปรแกรมฐานขอมล - PHP Hypertext Preprocessor – โปรแกรมภาษาสครปตPHP - phpMyAdmin – โปรแกรมจดการฐานขอมล

ใหเลอกสวนประกอบทงหมด โดยคลกถกหนาชองทงหมด แลวคลกปม Next

ภาพท ก – 22 หนาการเลอกสวนประกอบของ AppServ

114

6. หนาจอ AppServ 2.5.10 - Apache HTTP Server Information เปนการระบรายละเอยดของโปรแกรมเวบเซรฟเวอร Apache ซงมดงน

- Server Name - ชอของเซรฟเวอรหรอชอโฮสต ระบเปน localhost - Administrator's Email Address - อเมลของผดแลระบบ หรออเมล ระบเปน[email protected] - Apache HTTP Port - ชอพอรตเปนทางออกของขอมล โดย Apache จะมพอรต ดฟอลตคอ80

เมอกรอกขอมลเรยบรอยแลวกคลกปม Next

ภาพท ก – 23 หนาระบรายละเอยดของโปรแกรม Apache

115

7. หนาจอ AppServ 2.5.10 - MySQL Server Configuration เปนการระบรายละเอยดของโปรแกรมฐานขอมล MySQL ซงมดงน

- Enter root password รหสผานของดแลระบบ กาหนดเปน 123456 (จะตองจารหสนใหได ซงจะใชในการสรางและจดการฐานขอมล)

- Re-enter root password -กรอกรหสผานใหมอกครงหนง - Character Sets and Collations – เลอกการเขารหสภาษาในท นคอ UTF-8 Unicode ซงเปนรหส

ภาษาสากล - Old Password Support – เพอรองรบกบการเขารหสผานแบบเกา - Enable InnoDB - เพอใหรองรบฐานขอมล แบบ InnoDB เมอกรอกขอมลเรยบรอยแลวกคลกปม Install เพอตดตง AppServ

ภาพท ก – 24 หนาระบรายละเอยดของโปรแกรม MySQL

116

8. โปรแกรม AppServ จะทาการตดตงใหรอจนกวาจะขนหนาจอ AppServ 2.5.10 - Completing the AppServ 2.5.10 Setup Wizard ซงแสดงวาไดดาเนนการตดตง AppServ เรยบรอยแลวซงจะมตวเลอกดงน

- Start Apache - เพอเรมโปรแกรม Apache - Start MySQL - เพอเรมโปรแกรม MySQL

ซงโปรแกรมทงสองน Apache และ MySQL จะทางานเปนลกษณะ Service คอจะทางานโดยอตโนมตเมอเปดวนโดวสและเมอคลกตวเลอกเรยบรอย กใหคลกปม Finish

ภาพท ก – 25 หนาตดตงโปรแกรม AppServ เสรจสมบรณ

9. เพอตรวจสอบการทางานวาไดลง AppServ อยางถกตองเรยบรอยใหเปดเบราเซอรแลวเรยกไปท http://localhost หรอ http://127.0.0.1 ซงเบราเซอรจะแสดงหนาจอ The AppServ Open Project ซงแสดงวา ไดลง AppServ อยางถกตองแลว

ภาพท ก – 26 หนาแสดงเบราเซอร localhost

117

ภาคผนวก ข Source Code

118

Source Code ชอ connect.php

<? $host="mahasarakham.energy.go.th"; $user="energynew"; $pass="1234"; $db="energynew"; $connect=mysql_connect($host,$user,$pass)or die("Cannot Connect to Mysql"); mysql_select_db($db)or die("Cannot Connect to Database"); mysql_query("SET NAMES 'utf8' COLLATE 'utf8_general_ci';"); ?>

119

Source Code ชอ index.php

<?php include ("include/Connect.php"); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>ส านกงานพลงงาน จงหวดมหาสารคาม</title>

<link rel="stylesheet" href="slide/styleslide.css" type="text/css" media="screen" /> <link rel="stylesheet" type="text/css" href="style.css" /> <style type="text/css"> body { background:url('images/bg.gif') repeat-x top left fixed #ff9c00; font-family:"Tahoma"; font-size:13px; } table{ margin:0 auto; } h9{ text-align:left; font-family:tahoma; font-size:12px; } a{ text-decoration:none; } ul { list-style: none inside; } #page-wrap { } #zone-bar { background: #ffa340; min-height: 30px; padding: 5px 10px 0 10px; } #zone-bar ul { display: block; } #zone-bar ul li { height: 18px; padding: 5px 5px 0 5px; position: relative; float: left; margin-right: 10px; } #zone-bar ul li:hover { background: url(images/zonebar-navleft.png) center left no-repeat;

120

} #zone-bar ul li a { display: block; float: left; height: 23px; position: relative; top: -5px; right: -5px; padding-right: 3px; color: #383838; font-weight: bold; font-size: 1.1em; text-decoration: none; } #zone-bar ul li a:hover { background: url(images/zonebar-navright.png) center right no-repeat; } #zone-bar ul li a span { position: relative; top: 1px; } #zone-bar ul li ul { display: none; position: absolute; top: 29px; left: 0px; width: 150px; border: 1px solid #ccc; background: white; padding: 10px 0 0 0; } #zone-bar ul li ul li { float: none; padding: 0; margin: 0; height: 100%; } #zone-bar ul li ul li:hover { background: none; } #zone-bar ul li ul li a { display: block; float: none; margin-left: -5px; padding: 5px 0 0 10px; width: 140px; } #zone-bar ul li ul li a:hover {

background: #ffcf9c;

121

} .ss { font-size: small; } .guset { font-weight: bold; color: #F60; font-size: 16px; } #apDiv1 { position:absolute; left:166px; top:56px; width:118px; height:114px; z-index:1; } #apDiv2 { position:absolute; left:973px; top:57px; width:128px; height:112px; z-index:2; } .style3 {font-weight: bold; color: #FF0000; font-size: medium; } #apDiv8 { position:absolute; left:231px; top:136px; width:801px; height:20px; z-index:7; } #apDiv3 { position:absolute; left:458px; top:1820px; width:501px; height:88px; z-index:8; } #main{ width:800px; border:#CCCCCC; } #main ul#level{ border: 1px 1px 1px 1px #CCCCCC dashed;

122

margin: 5px 5px 5px 5px; } #main li#level1{ width:780px; display:block; float:left; text-decoration:none; list-style:none; padding:0; margin:0; margin: 5px 5px 5px 5px; } #slide{ width:auto; margin: 10px 0 30px 0; padding:0; border:1px #ccc dashed; } #slide1{ width:auto; margin: 10px 10px 30px 0; padding:0; } #login{ width:180px; height:117px; font-family:tahoma; font-size:14px; margin-top:15px; margin-left:9px } .formlogin{ border:1px #CCCCCC solid; width:100px; margin-bottom:3px; } iframe{ margin-top:20px; margin-left:10px; } .button{ font-family:tahoma; font-size:11px; background-color:#ccc; } .detailStory{ margin-top:5px; text-align:left; }

123

.story{ margin:10px 10px 10px 10px; } ul.showInColumn{ display:block;float:left; list-style:none; padding:0;margin:0; width:780px; padding:2px 0 2px 2px; } ul.showInColumn li{ list-style:none; display:block; float:right; margin-left:3px; padding:0px; width:170px; margin-top: 2px; margin-right: 2px; margin-bottom: 2px; } .li_left{ list-style:none; display:block; float:left; } .container { width:770px; } .Lcontent { width:130px; float:left; } .Rcontent { text-align : left; width:640px; float:left; margin-top:5px; } .spacer{ clear:both; height:10px; display:block; } .story{ margin-top:20px; }

124

} .nameStory{ float:left; } .image{ border:1px #ccc solid; padding:2px 2px 2px 2px; margin-top:5px; margin-left:10px; } div.wrap { width : 789px; margin : 0 auto; text-align : left; font-weight: bold; } div#top div#nav { float : left; clear : both; width : 993px; height : 52px; margin : 22px 0 0; } div#top div#nav ul { float : left; width : 700px; height : 52px; list-style-type : none; } div#nav ul li { float : left; height : 52px; } div#nav ul li a { border : 0; height : 52px; display : block; line-height : 52px; text-indent : -9999px; } div#header { margin : -1px 0 0; } div#video-header { height : 683px; margin : -1px 0 0; } div#header div.wrap { height : 299px; background : url(images/header-bg.png) no-repeat 50% 0; }

125

div#header div#slide-holder { z-index : 40; width : 789px; height : 299px; position : absolute; } div#header div#slide-holder div#slide-runner { top : 0; left : 1px; width : 789px; height : 278px; overflow : hidden; position : absolute; } div#header div#slide-holder img { margin : 0; display : none; position : absolute; } div#header div#slide-holder div#slide-controls { left : 0; bottom : 228px; width : 789px; height : 46px; display : none; position : absolute; background : url(images/slide-bg.png) 0 0; } div#header div#slide-holder div#slide-controls p.text { float : left; color : #fff; display : inline; font-size : 10px; line-height : 16px; margin : 15px 0 0 20px; text-transform : uppercase; } div#header div#slide-holder div#slide-controls p#slide-nav { float : right; height : 24px; display : inline; margin : 11px 15px 0 0; } div#header div#slide-holder div#slide-controls p#slide-nav a { float : left; width : 24px; height : 24px; display : inline; font-size : 11px; margin : 0 5px 0 0;

126

line-height : 24px; font-weight : bold; text-align : center; text-decoration : none; background-position : 0 0; background-repeat : no-repeat; } div#header div#slide-holder div#slide-controls p#slide-nav a.on { background-position : 0 -24px; } div#header div#slide-holder div#slide-controls p#slide-nav a { background-image : url(images/silde-nav.png); } div#nav ul li a { background : url(images/nav.png) no-repeat; } .shead{ margin-top:10px; } #login form table tbody tr #formlogin2 div { color: #FFF; font-weight: bold; font-size: 16px; } #login form table { color: #F90; } #main #slide1 .wrap table tr td marquee { font-size: 20px; color: #F93; } </style> <script type="text/javascript" src="js/jquery1.js"></script> <script type="text/javascript" src="js/scripts.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } </script> <script type="text/javascript"> $(document).ready(function(){ $("#zone-bar li em").click(function() { var hidden = $(this).parents("li").children("ul").is(":hidden"); $("#zone-bar>ul>li>ul").hide() $("#zone-bar>ul>li>a").removeClass();

127

if (hidden) { $(this) .parents("li").children("ul").toggle() .parents("li").children("a").addClass("zoneCur"); } }); }); </script> </head> <body> <table width="80%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="3"><div class="shead" align="center"><img src="images/head7.png" width="100%" height="155" /></div></td> </tr> <tr> <td colspan="3" bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr> <td> <div id="page-wrap"> <div id="zone-bar"> <ul> <li> <a href="index.php"><span>

หนาแรก

<em class="opener-technology"> <img src="images/zonebar-downarrow.png" alt="dropdown" /> </em> </span></a> </li> <li> <a href="#"><span>

แนะน าหนวยงาน

<em class="opener-world"> <img src="images/zonebar-downarrow.png" alt="dropdown" /> </em> </span></a> <ul class="worldsublist">

<li><a href="mission.php">ภารกจ</a></li>

<li><a href="vision.php">วสยทศน</a></li>

<li><a href="personal.php">บคลากร</a></li>

<li><a href="structure.php">โครงสรางองคกร</a></li>

<li><a href="location.php">ทตงหนวยงาน</a></li>

</ul> </li> <li>

128

<li> <a href="#"><span>

ขาว

<em class="opener-science"> <img src="images/zonebar-downarrow.png" alt="dropdown" /> </em> </span></a> <ul class="sciencesublist">

<li><a href="all_news.php">ประชาสมพนธ</a></li>

<li><a href="all_story.php">บทความ</a></li>

<li><a href="all_gallery.php">ภาพกจกรรม</a></li>

</ul> </li> <li> <a href="#"><span>

ดาวนโหลด

<em class="opener-gaming"> <img src="images/zonebar-downarrow.png" alt="dropdown" /> </em> </span></a> <ul class="gamingsublist">

<li><a href="all_doc.php">แบบฟอรมตางๆ</a></li>

<li><a href="http://law.energy.go.th/" target="_blank">กฎหมายพลงงาน</a></li>

</ul> </li> <li> <a href="boards.php"><span>

กระดานถามตอบ

<em class="opener-lifestyle"> <img src="images/zonebar-downarrow.png" alt="dropdown" /> </em> </span></a> </li> <li> <a href="#"><span>

เชอมโยงเวบไซต

<em class="opener-entertainment"> <img src="images/zonebar-downarrow.png" alt="dropdown" /> </em> </span></a> <ul class="entertainmentsublist"> <li><a href="http://www.mahasarakham.go.th/index.htm"

target="_blank">จงหวดมหาสารคาม</a></li>

<li><a href="http://www.energy.go.th/" target="_blank">

กระทรวงพลงงาน</a></li>

<li><a href="http://www.thaigov.go.th/" target="_blank">

รฐบาลไทย</a></li>

129

<li><a href="http://www.energy.go.th/" target="_blank">กระทรวงพลงงาน</a></li>



</ul> </li> </ul> </div> </div> </td> </tr> </table></td> </tr> <tr> <td width="20%" height="995" valign="top" bgcolor="#FFFFFF"><table width="87%" border="0" align="center" cellpadding="2" cellspacing="0"> <tr> <td height="78"><div align="center"><img src="images/energy1.jpg" width="178" height="60" /></div></td> </tr> <tr> <td height="135" valign="top"><p align="center"><br /> <img src="images/hand-1.gif" width="184" height="123" /><br /> </p></td> </tr> <tr> <td height="43"><div align="center"><img src="images/login.png" width="170" height="33" /></div></td> </tr> <tr> <td valign="top"><div id="login"> <form name="login" action="check.php" method="post"> <table width="96%" height="113" cellpadding="0" cellspacing="0"> <tbody> <tr> <td height="25" colspan="2" bgcolor="#FFCC66" id="formlogin2"><div align="center">Login</div></td> </tr> <tr>

<td height="27" bgcolor="#FFFFCC" id="formlogin"> รหสผใช :</td>

<td bgcolor="#FFFFCC"><input name="username" type="text" class="formlogin" id="username"></td> </tr>

<tr>

130

<td height="27" bgcolor="#FFFFCC"> รหสผาน :</td>

<td bgcolor="#FFFFCC"><input class="formlogin" type="password" name="password" id="password"></td> </tr> <tr> <td height="32" bgcolor="#FFFFCC"></td> <td bgcolor="#FFFFCC"><div align="center">

<input class="button" type="submit" name="submit" value="เขาสระบบ">

</div></td> </tr> </tbody> </table> </form> </div></td> </tr> <tr> <td height="52"><div align="center"><span class="wrap"><img src="images/calendar.png" width="170" height="33" /></span></div></td> </tr> <tr> <td height="26"><div align="center"><span class="wrap"> <embed src="http://www.siaminfobiz.com/Icons/Calendar/kal12.swf" width="167" height="200" wmode="transparent" type="application/x-shockwave-flash"></embed> </span></div></td> </tr> <tr> <td height="26"><div align="center"><img src="images/poll.png" width="170" height="33" /></div></td> </tr> <tr> <td height="28"><form name="form1" method="post" action="result_poll.php"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <? include('include/Connect.php'); $query = mysql_query("SELECT * FROM poll WHERE active='yes'"); while($row = mysql_fetch_array($query)){ $poll_id = $row['id']; $qpoll = $row['qpoll'];

echo $qpoll."<BR>"; //แสดงหวขอ Poll

} $query = mysql_query("SELECT * FROM poll_ans WHERE poll_id=$poll_id ORDER BY id"); while($row = mysql_fetch_array($query)){ $ansid = $row['id']; $answer = $row['answer']; if($n==1){$check="checked";}else $check=""; echo "<input type=\"radio\"

name=\"choice[]\" value=\"$ansid\" $check> $answer<BR>"; //แสดงรายระเอยดของหวขอทโหวด และฝากคา ansid

}

131

$n++; if($n==1){$check="checked";}else $check=""; echo "<input type=\"radio\"


} ?> <input type="hidden" name="pollid" value="<? echo $poll_id;?>"> </td> </tr> <tr> <td height="30"> <input type="submit" name="Submit" value="Vote"> </td> </tr> <tr> <td>

<a href="chart.php">ดผลการโหวต</a>

</td> </tr> </table> </form></td> </tr> <tr>

<td height="36"><div align="center" class="guset">จ านวนผ เขาชม</div></td>

</tr> <tr> <td height="26"><div align="center"><span class="ss"> <? $file = "counter.txt"; $open1 = fopen($file, "r"); $get_number = fread($open1, filesize($file)); fclose($open1); $get_number = $get_number + 1 ; $open2 = fopen($file, "w"); fwrite($open2, $get_number); fclose($open2); $digit = sprintf("%06d", $get_number ); for ($i = 0; $i<6; $i++) { echo "<img src='images/$digit[$i].png' />"; } ?> </span></div></td>

132

</tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table></td> <td width="62%" valign="top" bgcolor="#FFFFFF"> <div id="main"> <div id="slide1"> <div class = "wrap"> <p> </p> <p> </p> <p> </p> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="40"><marquee><img src="images/bird.gif" width="29" height="29" />

ส านกงานพลงงานจงหวดมหาสารคาม ยนดดอนรบ "มงมน ตงใจ เพอไทยทกคน"<img src="images/bird.gif"

width="29" height="29" /></marquee></td> </tr> </table> <p> </p> <p> </p> <p><br> </p> </div> <div id="header"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script type="text/javascript" src="js/jqgalscroll.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#two').jqGalScroll({direction : 'vertical'}); }); </script> <link href="css/jqGalScroll.css" rel="stylesheet" type="text/css" /> <ul id="two"> <?php $sql = mysql_query("select * from slide order by s_id DESC limit 6"); while($row = mysql_fetch_array($sql)) { $s_filename = $row['s_filename']; ?> <li> <img src="<?php echo $s_filename?>"><img src="<?php echo $s_filename?>">

133

</li> <? } ?> </ul> </div> </div> <div id="slide">

<h9> ขาวประชาสมพนธ</h9><br>

<div class="container"> <?php $sql_news = "select * from news order by n_id desc Limit 4"; $q_news = mysql_query($sql_news); while($r_news = mysql_fetch_array($q_news)){ $idnews = $r_news['n_id']; $titlenews = $r_news['n_title']; $detailnews = $r_news['n_detail']; $photo = $r_news['n_thumb']; $Ndate = date_format(new DateTime($r_news['n_date']),'d/M/Y H:i') ?> <div class="Lcontent"><img class="image" src = "images/image_news/front/<?php echo "$photo"; ?>"></div> <div class="Rcontent"><a href="article.php?n_id=<?php echo $idnews ?>"><b><h9><?php echo "$titlenews"; ?></h9></b></a></div> <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> <div class="Rcontent"><h9><?php echo mb_substr($detailnews,0,350,'UTF-8') ?></h9></div> <ul class = "showInColumn"> <li><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a> <a href = "article.php?n_id=<?php echo $idnews ?>"><b><img src="images/read.gif" width="55" height="15" /></b></a></li> </ul> <?php } ?> </div> <div class="spacer"></div>

<div class="story"><a href="all_news.php"><h9>ขาวยอนหลงทงหมด</h9></a></div>

</div> <div id="slide">

<h3> บทความ</h3>

134

<? $sql_story = "select * from story order by s_id desc limit 5"; $q_story = mysql_query($sql_story); while($r_story = mysql_fetch_array($q_story)){ $idstory = $r_story['s_id']; $sname = $r_story['s_name']; $sdetail = $r_story['s_detail']; ?> <div class = "story"> <div class = "nameStory"><a href="showstory.php?s_id=<?php echo $idstory ?>"><b><h9><?php echo "$sname";?></h9></b></a> </div><br/> <div class = "detailStory"> <h9><?php echo mb_substr($sdetail,0,200,'UTF-8') ?><h9>  <ul class = "showInColumn"> <li><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a> <a href = "showstory.php?s_id=<?php echo $idstory ?>"><b><img src="images/read.gif" width="55" height="14" /> </b></a></li> </ul> </div> </div> <p> <?php } ?> </p> <p> </p>

<div class = "story"><a href="all_story.php"><h9>บทความยอนหลงทงหมด</h9></a></div>

<div class="spacer"></div> </div> </li> </ul> </div> </td> <td width="18%" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr> <td height="46"><div align="center"><img src="images/link.png" width="170" height="33" /></div></td> </tr> <tr> <td height="42" valign="top"><div align="center"><a href="http://mail.energy.go.th/mail/" target="_blank"><img src="images/banner_25.jpg" width="162" height="37" /></a> </div></td> </tr> <tr> <td height="42"><div align="center"><a

href="http://elibrary.energy.go.th/energy_ebook/th/index.php" target="_blank">

135

<img src="images/banner_27.jpg" width="162" height="37" /></a></div></td> </tr> <tr> <td height="46"><div align="center"><img src="images/bannerintra.jpg" width="162" height="37" /></div></td> </tr> <tr> <td height="45"><div align="center"><a href="http://www.energy.go.th/" target="_blank"><img src="images/imagesCAT58KB3.jpg" width="167" height="37" /></a></div></td> </tr> <tr> <td height="49"><div align="center"><a href="http://www.mahasarakham.go.th/" target="_parent"><img src="images/sarakham-icon2.png" width="162" height="37" /></a></div></td> </tr> <tr> <td height="38"><div align="center"><a href="http://203.150.225.239/eppogoth/" target="_blank"><img src="images/save-energy.png" width="162" height="37" /></a></div></td> </tr> <tr> <td height="50"><div align="center"><a href="http://www.thaigov.go.th/" target="_blank"><img src="images/royal-icon.png" width="162" height="37" /></a></div></td> </tr> <tr> <td height="42"><div align="center"><a href="https://twitter.com/" target="_blank"><img src="images/tw-icon.png" width="162" height="37" /></a></div></td> </tr> <tr> <td height="49"><div align="center"><a href="http://www.facebook.com/" target="_blank"><img src="images/fb-icon.png" width="162" height="37" /></a></div></td> </tr> <tr> <td height="33"><div align="center"><img src="images/Weather.png" width="170" height="33" /></div></td> </tr> <tr> <td><div align="center"> <iframe src="http://www.tmd.go.th/daily_forecast_forweb.php" width="173" height="270" scrolling="No" frameborder="0"></iframe> <br/> </div></td> </tr> <tr> <td><div align="center"><img src="images/oil.png" width="170" height="33" /></div></td> </tr> <tr> <td><iframe frameborder="0" width="187" height="350" scrolling="No" src="http://www.pttplc.com/en/oilprice.asp"></iframe></td> </tr> </table></td> </tr> <tr> <td colspan="3"><img src="IMAGES/footer.png" width="100%" height="110" /></td> </tr> </table> </body> </html>

136

<td colspan="3"><img src="IMAGES/footer.png" width="100%" height="110" /></td> </tr> </table> </body> </html>

137

Source Code ชอ chart.php

<?php include ("include/Connect.php"); include("include/FusionCharts.php"); include("include/DBConn.php"); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>ส านกงานพลงงาน จงหวดมหาสารคาม</title>

<link rel="stylesheet" href="slide/styleslide.css" type="text/css" media="screen" /> <link rel="stylesheet" type="text/css" href="style.css" /> <style type="text/css"> body { background:url('images/bg.gif') repeat-x top left fixed #ff9c00; font-family:"Tahoma"; font-size:13px; } table{ margin:0 auto; } a{ text-decoration:none; } ul { list-style: none inside; } #page-wrap { } #zone-bar { background: #ffa340; min-height: 30px; padding: 5px 10px 0 10px; } #zone-bar ul { display: block; } #zone-bar ul li { height: 18px; padding: 5px 5px 0 5px; position: relative; float: left; margin-right: 10px; } #zone-bar ul li:hover { background: url(images/zonebar-navleft.png) center left no-repeat; } #zone-bar ul li a {

138

display: block; float: left; height: 23px; position: relative; top: -5px; right: -5px; padding-right: 3px; color: #383838; font-weight: bold; font-size: 1.1em; text-decoration: none; } #zone-bar ul li a:hover { background: url(images/zonebar-navright.png) center right no-repeat; } #zone-bar ul li a span { position: relative; top: 1px; } #zone-bar ul li ul { display: none; position: absolute; top: 29px; left: 0px; width: 150px; border: 1px solid #ccc; background: white; padding: 10px 0 0 0; } #zone-bar ul li ul li { float: none; padding: 0; margin: 0; height: 100%; } #zone-bar ul li ul li:hover { background: none; } #zone-bar ul li ul li a { display: block; float: none; margin-left: -5px; padding: 5px 0 0 10px; width: 140px; } #zone-bar ul li ul li a:hover { background: #ffcf9c;

}

139

.ss { font-size: small; } .guset { font-weight: bold; color: #F60; } #apDiv1 { position:absolute; left:166px; top:56px; width:118px; height:114px; z-index:1; } #apDiv2 { position:absolute; left:973px; top:57px; width:128px; height:112px; z-index:2; } .style3 {font-weight: bold; color: #FF0000; font-size: medium; } #apDiv8 { position:absolute; left:231px; top:136px; width:801px; height:20px; z-index:7; } #apDiv3 { position:absolute; left:458px; top:1820px; width:501px; height:88px; z-index:8; } #main{ width:800px; border:#CCCCCC; } #main ul#level{ border: 1px 1px 1px 1px #CCCCCC dashed; margin: 5px 5px 5px 5px; } #main li#level1{ width:780px; display:block; float:left; text-decoration:none;

140

#main li#level1{ width:780px; display:block; float:left; text-decoration:none; list-style:none; padding:0; margin:0; margin: 5px 5px 5px 5px; } #slide{ width:auto; margin: 10px 0 30px 0; padding:0; border:1px #ccc dashed; } #slide1{ width:auto; margin: 10px 10px 30px 0; padding:0; } #login{ width:180px; height:117px; font-family:tahoma; font-size:14px; margin-top:15px; margin-left:15px } .formlogin{ border:1px #CCCCCC solid; width:100px; margin-bottom:3px; } iframe{ margin-top:20px; margin-left:10px; } .button{ font-family:tahoma; font-size:11px; background-color:#ccc; } .detailStory{ margin-top:5px; } .story{ margin:10px 10px 10px 10px; }

141

ul.showInColumn{ display:block;float:left; list-style:none; padding:0;margin:0; width:780px; padding:2px 0 2px 2px; } ul.showInColumn li{ list-style:none; display:block; float:right; margin:2px; margin-left:3px; padding:0px; width:120px; } .li_left{ list-style:none; display:block; float:left; } .container { width:770px; } .Lcontent { width:130px; float:left; } .Rcontent { width:640px; float:left; margin-top:5px; } .spacer{ clear:both; height:10px; display:block; } .story{ margin-top:20px; } .image{ border:1px #ccc solid; padding:2px 2px 2px 2px; margin-top:5px; margin-left:10px; }

142

} div.wrap { width : 789px; margin : 0 auto; text-align : left; } div#top div#nav { float : left; clear : both; width : 993px; height : 52px; margin : 22px 0 0; } div#top div#nav ul { float : left; width : 700px; height : 52px; list-style-type : none; } div#nav ul li { float : left; height : 52px; } div#nav ul li a { border : 0; height : 52px; display : block; line-height : 52px; text-indent : -9999px; } div#header { margin : -1px 0 0; } div#video-header { height : 683px; margin : -1px 0 0; } div#header div.wrap { height : 299px; background : url(images/header-bg.png) no-repeat 50% 0; } div#header div#slide-holder { z-index : 40; width : 789px; height : 299px; position : absolute; } div#header div#slide-holder div#slide-runner { top : 0; left : 0; width : 789px; height : 278px; overflow : hidden; position : absolute; }

143

width : 789px; height : 278px; overflow : hidden; position : absolute; } div#header div#slide-holder img { margin : 0; display : none; position : absolute; } div#header div#slide-holder div#slide-controls { left : 0; bottom : 228px; width : 789px; height : 46px; display : none; position : absolute; background : url(images/slide-bg.png) 0 0; } div#header div#slide-holder div#slide-controls p.text { float : left; color : #fff; display : inline; font-size : 10px; line-height : 16px; margin : 15px 0 0 20px; text-transform : uppercase; } div#header div#slide-holder div#slide-controls p#slide-nav { float : right; height : 24px; display : inline; margin : 11px 15px 0 0; } div#header div#slide-holder div#slide-controls p#slide-nav a { float : left; width : 24px; height : 24px; display : inline; font-size : 11px; margin : 0 5px 0 0; line-height : 24px; font-weight : bold; text-align : center; text-decoration : none; background-position : 0 0; background-repeat : no-repeat; } div#header div#slide-holder div#slide-controls p#slide-nav a.on { background-position : 0 -24px; }

144

} div#header div#slide-holder div#slide-controls p#slide-nav a { background-image : url(images/silde-nav.png); } div#nav ul li a { background : url(images/nav.png) no-repeat; } .shead{ margin-top:10px; } #main #slide1 .wrap table tr td div { color: #F93; font-size: 18px; } </style> <script type="text/javascript" src="js/jquery1.js"></script> <script type="text/javascript" src="js/scripts.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <SCRIPT LANGUAGE="Javascript" SRC="FusionCharts/FusionCharts.js"></SCRIPT> <script type="text/javascript" src="ckeditor/ckeditor.js"></script> <script type="text/javascript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } </script> <script type="text/javascript"> $(document).ready(function(){ $("#zone-bar li em").click(function() { var hidden = $(this).parents("li").children("ul").is(":hidden"); $("#zone-bar>ul>li>ul").hide() $("#zone-bar>ul>li>a").removeClass(); if (hidden) { $(this) .parents("li").children("ul").toggle() .parents("li").children("a").addClass("zoneCur"); } }); }); </script> </head> <body> <table width="80%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr>

145

<td colspan="3"><div class="shead" align="center"><img src="images/head7.png" width="100%" height="155" /></div></td> </tr> <tr> <td colspan="3" bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr> <td> <div id="page-wrap"> <div id="zone-bar"> <ul> <li> <a href="index.php"><span>

หนาแรก

<em class="opener-technology"> <img src="images/zonebar-downarrow.png" alt="dropdown" /> </em> </span></a> </li> <li> <a href="#"><span>

แนะน าหนวยงาน

<em class="opener-world"> <img src="images/zonebar-downarrow.png" alt="dropdown" /> </em> </span></a> <ul class="worldsublist">

<li><a href="mission.php">ภารกจ</a></li>

<li><a href="vision.php">วสยทศน</a></li>

<li><a href="personal.php">บคลากร</a></li>

<li><a href="structure.php">โครงสรางองคกร</a></li>

<li><a href="location.php">ทตงหนวยงาน</a></li>


ขาว

<em class="opener-science"> <img src="images/zonebar-downarrow.png" alt="dropdown" /> </em> </span></a> <ul class="sciencesublist">

<li><a href="all_news.php">ประชาสมพนธ</a></li>

<li><a href="all_story.php">บทความ</a></li>


</ul>

146



ดาวนโหลด

<em class="opener-gaming"> <img src="images/zonebar-downarrow.png" alt="dropdown" /> </em> </span></a> <ul class="gamingsublist">

<li><a href="all_doc.php">แบบฟอรมตางๆ</a></li>

<li><a href="http://law.energy.go.th/" target="_blank">กฎหมายพลงงาน</a></li>

</ul> </li> <li> <a href="boards.php"><span>

กระดานถามตอบ

<em class="opener-lifestyle"> <img src="images/zonebar-downarrow.png" alt="dropdown" /> </em> </span></a> </li> <li> <a href="#"><span>

เชอมโยงเวบไซต

<em class="opener-entertainment"> <img src="images/zonebar-downarrow.png" alt="dropdown" /> </em> </span></a> <ul class="entertainmentsublist"> <li><a href="http://www.mahasarakham.go.th/index.htm"

target="_blank">จงหวดมหาสารคาม</a></li>

<li><a href="http://www.energy.go.th/" target="_blank">

กระทรวงพลงงาน</a></li>



</ul> </li> </ul> </div> </div> </td> </tr> </table></td> </tr> <tr>

147

</td> </tr> </table></td> </tr> <tr> <td width="20%" height="995" valign="top" bgcolor="#FFFFFF"><table width="87%" border="0" align="center" cellpadding="2" cellspacing="0"> <tr> <td height="78"><div align="center"><img src="images/energy1.jpg" width="178" height="60" /></div></td> </tr> <tr> <td height="135" valign="top"><p align="center"><br /> <img src="images/hand-1.gif" width="184" height="123" /><br /> </p></td> </tr> <tr> <td height="43"><div align="center"><img src="images/login.png" width="170" height="33" /></div></td> </tr> <tr> <td valign="top"><div id="login"> <form name="login" action="check.php" method="post"> <table width="96%" height="113" cellpadding="0" cellspacing="0"> <tbody> <tr> <td height="25" colspan="2" bgcolor="#FFCC66" id="formlogin2"><div align="center">Login</div></td> </tr> <tr>

<td height="27" bgcolor="#FFFFCC" id="formlogin"> รหสผใช :</td>

<td bgcolor="#FFFFCC"><input name="username" type="text" class="formlogin" id="username"></td> </tr> <tr>

<td height="27" bgcolor="#FFFFCC"> รหสผาน :</td>

<td bgcolor="#FFFFCC"><input class="formlogin" type="password" name="password" id="password"></td> </tr> <tr> <td height="32" bgcolor="#FFFFCC"></td> <td bgcolor="#FFFFCC"><div align="center">

<input class="button" type="submit" name="submit" value="เขาสระบบ">

</div></td> </tr> </tbody> </table> </form> </div></td> </tr> <tr>

148

</tr> <tr> <td height="52"><div align="center"><span class="wrap"><img src="images/calendar.png" width="170" height="33" /></span></div></td> </tr> <tr> <td height="26"><div align="center"><span class="wrap"> <embed src="http://www.siaminfobiz.com/Icons/Calendar/kal12.swf" width="167" height="200" wmode="transparent" type="application/x-shockwave-flash"></embed> </span></div></td> </tr> <tr> <td height="26"><div align="center"><img src="images/poll.png" width="170" height="33" /></div></td> </tr> <tr> <td height="28"><form name="form1" method="post" action="result_poll.php"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <? include('include/Connect.php'); $query = mysql_query("SELECT * FROM poll WHERE active='yes'"); while($row = mysql_fetch_array($query)){ $poll_id = $row['id']; $qpoll = $row['qpoll'];

echo $qpoll."<BR>"; //แสดงหวขอ Poll

} $query = mysql_query("SELECT * FROM poll_ans WHERE poll_id=$poll_id ORDER BY id"); while($row = mysql_fetch_array($query)){ $ansid = $row['id']; $answer = $row['answer']; $n++; if($n==1){$check="checked";}else $check=""; echo "<input type=\"radio\"


} ?> <input type="hidden" name="pollid" value="<? echo $poll_id;?>"> </td> </tr> <tr> <td height="30"> <input type="submit" name="Submit" value="Vote"> </td>

149

</tr> <tr> <td>

<a href="chart.php">ดผลการโหวต</a>

</td> </tr> </table> </form></td> </tr> <tr>

<td height="36"><div align="center" class="guset">จ านวนผ เขาชม</div></td>

</tr> <tr> <td height="26"><div align="center"><span class="ss"> <? $file = "counter.txt"; $open1 = fopen($file, "r"); $get_number = fread($open1, filesize($file)); fclose($open1); $get_number = $get_number + 1 ; $open2 = fopen($file, "w"); fwrite($open2, $get_number); fclose($open2); $digit = sprintf("%06d", $get_number ); for ($i = 0; $i<6; $i++) { echo "<img src='images/$digit[$i].png' />"; } ?> </span></div></td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table></td> <td width="62%" valign="top" bgcolor="#FFFFFF"> <div id="main"> <div id="slide1"> <div class = "wrap"> <p> </p> <table width="90%" border="0" cellspacing="0" cellpadding="0"> <tr>

<td height="17"><div align="center">ผลการโหวต</div></td>

150

<div class = "wrap"> <p> </p> <table width="90%" border="0" cellspacing="0" cellpadding="0"> <tr>

<td height="17"><div align="center">ผลการโหวต</div></td>

</tr> </table> <p> </p> <?php $link = connectToDB(); $animateChart = $_GET['animate']; if ($animateChart=="") $animateChart = "1";

$strXML = "<chart caption='แสดงรายการการโหวต' pieSliceDepth='30' showBorder='1' formatNumberScale='0' numberSuffix=' ครง' animation=' " .

$animateChart . "'>"; $strQuery = "select answer,vote from poll_ans WHERE poll_id=$poll_id order by id DESC"; $result2 = mysql_query($strQuery) or die(mysql_error()); if ($result2) { while($ors2 = mysql_fetch_array($result2)) { $strXML .= "<set label='" . $ors2['answer'] . "' value='" . $ors2['vote'] . "' />"; } } mysql_close($link); $strXML .= "</chart>"; echo renderChart("FusionCharts/Column3D.swf", "", $strXML, "FactorySum", 560, 300, false, false); ?> </div> <div id="header"> </div> </div> </li> </ul> </div> </td> <td width="18%" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr> <td height="46"><div align="center"><img src="images/link.png" width="170" height="33" /></div></td> </tr>

151

<tr> <td height="42" valign="top"><div align="center"><a href="http://mail.energy.go.th/mail/" target="_blank"><img src="images/banner_25.jpg" width="162" height="37" /></a> </div></td> </tr> <tr> <td height="42"><div align="center"><a href="http://elibrary.energy.go.th/energy_ebook/th/index.php" target="_blank"><img src="images/banner_27.jpg" width="162" height="37" /></a></div></td> </tr> <tr> <td height="46"><div align="center"><img src="images/bannerintra.jpg" width="162" height="37" /></div></td> </tr> <tr> <td height="45"><div align="center"><a href="http://www.energy.go.th/" target="_blank"><img src="images/imagesCAT58KB3.jpg" width="167" height="37" /></a></div></td> </tr> <tr> <td height="49"><div align="center"><a href="http://www.mahasarakham.go.th/" target="_parent"><img src="images/sarakham-icon2.png" width="162" height="37" /></a></div></td> </tr> <tr> <td height="38"><div align="center"><a href="http://203.150.225.239/eppogoth/" target="_blank"><img src="images/save-energy.png" width="162" height="37" /></a></div></td> </tr> <tr> <td height="50"><div align="center"><a href="http://www.thaigov.go.th/" target="_blank"><img src="images/royal-icon.png" width="162" height="37" /></a></div></td> </tr> <tr> <td height="42"><div align="center"><a href="https://twitter.com/" target="_blank"><img src="images/tw-icon.png" width="162" height="37" /></a></div></td> </tr> <tr> <td height="49"><div align="center"><a href="http://www.facebook.com/" target="_blank"><img src="images/fb-icon.png" width="162" height="37" /></a></div></td> </tr> <tr> <td height="34"><div align="center"><img src="images/Weather.png" width="170" height="33" /></div></td> </tr> <tr> <td><div align="center"> <iframe src="http://www.tmd.go.th/daily_forecast_forweb.php" width="163" height="270" scrolling="No" frameborder="0"></iframe> <br/> </div></td> </tr> <tr> <td><div align="center"><img src="images/oil.png" width="170" height="33" /></div></td>

152

</tr> <tr> <td><iframe frameborder="0" width="187" height="350" scrolling="No" src="http://www.pttplc.com/en/oilprice.asp"></iframe></td> </tr> </table></td> </tr> <tr> <td colspan="3"><img src="images/footer.png" width="100%" height="110" /></td> </tr> </table> </body> </html>

153

ภาคผนวก ค บทน าเสนอโครงงานเทคโนโลยสารสนเทศธรกจ

154

1. ความเปนมาและความส าคญของปญหา

สานกงานพลงงาน จงหวดมหาสารคาม ตงอยทศาลากลางจงหวดมหาสารคาม ชน 3 หอง 312 ตาบลแวงนาน อาเภอเมองมหาสารคาม จงหวดมหาสารคาม รหสไปรษณย 44000 โดยทางสานกงานพลงงานจงหวดมหาสารคาม มความประสงคตองการทจะพฒนาเวบไซตเพอใหงายตอการใชงาน และจดใหเปนระบบระเบยบมากยงขน ลดความซ าซอนของระบบงานเดมซงระบบงานเดม รปแบบของเวบไซตไมเปนทนาสนใจ ขอมลในเวบไซตไมมการอพเดทขอมล สงผลใหการเกบบนทกขอมลลงฐานขอมลไมไดและไมสะดวกตอการจดการหนาเวบไซต

ดวยเหตผลจากขางตนทไดกลาวมาแลวนน ผศกษาจงมแนวคดทจะพฒนาออกแบบเวบไซต เพอใหงายตอการใชงาน ลดความซ าซอนของการทางานและออกแบบระบบทจาเปนตอการใชงาน โดยใชภาษาคอมพวเตอรทนยมมากในปจจบน คอ ภาษา PHP โดยจดเกบขอมลลงฐานขอมล MySQL Database เพอใหเกดประสทธภาพสงสดในการทางาน การจดเกบขอมลเปนระบบและงายตอการจดการในสวนของพนกงานดแลระบบ

2. จดประสงคของการศกษา 2.1 เพอใหสามารถคนหาขอมลตางๆ ไดอยางรวดเรว

2.2 เพอออกแบบและพฒนาระบบสารสนเทศสานกงานพลงงานจงหวดมหาสารคามใหมประสทธภาพ

มากยงขน 2.3 เพอความสะดวกสบายในการตดตอสอสารทางราชการ 2.4 เพอใหการบรหารจดการขอมลขององคกรมความสะดวกสบาย 2.5 เพอแกไขปญหาการจดเกบขอมล ทาใหขอมลไมสญหาย

3. ขอบเขตการด าเนนงาน

ในการพฒนาระบบสารสนเทศสานกงานพลงงานจงหวดมหาสารคาม ไดมการพฒนาขนมาในหลายๆสวน เพอใหเกดประโยชนตอทางสานกงานพลงงานจงหวดมหาสารคาม โดยผศกษาไดแบงขอบเขตการดาเนนงานเพอจดทาระบบสารสนเทศสานกงานพลงงานจงหวดมหาสารคาม แบงออกเปนสวนของผดแลระบบ และบคคลทวไป ดงน

155

3.1 บคคลทวไป 3.1.1 สามารถเขาดหนาเวบไซตสานกงานพลงงานจงหวดมหาสารคาม

3.1.2 สามารถเขาดขอมลขาวสารและกจกรรมตางๆของสานกงานพลงงานจงหวดมหาสารคามได

3.1.3 สามารถเขาดรปภาพกจกรรม ของสานกงานพลงงานจงหวดมหาสารคามได 3.1.4 สามารถโพสตขอความฝากคาถาม -ตอบ ผานทางกระดานสนทนาเพอแสดงความ

คดเหนได 3.1.5 สามารถดาวนโหลดแบบฟอรมตางๆได 3.1.6 สามารถทาโพลสารวจความคดเหนได 3.1.7 สามารถลงคไปยง Facebook ได 3.1.8 สามารถดบทความตางๆได

3.2 ผดแลระบบ 3.2.1 สามารถเขาหนา login เขาสระบบได 3.2.2 สามารถ เพม ลบ แกไข ขอมลขาวสารได 3.2.3 สามารถ เพม ลบ แกไข รปภาพกจกรรม ได 3.2.4 สามารถ เพม ลบ แกไข ขอมลบคลากรในองคกรได 3.2.5 สามารถอพโหลดและดาวนโหลดเอกสารตางๆได 3.2.6 สามารถเพม ลบ แกไข โพลสารวจความคดเหนได 3.2.7 สามารถเพม ลบ แกไขบทความตางๆได

3.2.8 สามารถดจานวนผเขาชมบทความเปนกราฟได

4. อปกรณและเครองมอในการด าเนนงาน 4.1 ฮารดแวร 4.1.1 คอมพวเตอรโนตบค (Notebook Computer) 1 เครอง 4.1.2 เครองปรนเตอร 1 เครอง 4.1.3 กลองดจตอล 1 เครอง 4.2 ซอฟตแวร 4.2.1 โปรแกรมApache Web Server ทาหนาทเปน web server 4.2.2 โปรแกรม Adobe Dreamweaver CS3 ใชสาหรบเขยนคาสงและออกแบบเวบไซต 4.2.3 โปรแกรม Mysql ใชสาหรบเปนโปรแกรมจดการฐานขอมล

4.2.4 โปรแกรม Adobe Photoshop CS3 ใชสาหรบตกแตงภาพ 4.2.5 โปรแกรม Internet Explorer ใชสาหรบทดสอบโปรแกรม (Web Brower)

156

4.2.6 โปรแกรม PhotoScape ใชสาหรบตกแตงรปภาพ 4.2.7 โปรแกรม Microsoft Visio 2007 ใชสาหรบการออกแบบจาลองของระบบ 4.2.8 โปรแกรม CuteFTP8 ใชอพโหลดไฟลขนบนเครอง Server 4.3 ใชภาษา PHP ในการเขยนคาสงของโปรแกรม

5. ขนตอนในการด าเนนงาน

แบงการดาเนนงาน ตามวธของการวเคราะหและออกแบบระบบงานคอมพวเตอร ซงมทงหมด 7 ขนตอน

5.1 นาเสนอหวโครงงานขอตออาจารยทปรกษา 5.2 ศกษาและเกบรวบรวบขอมล 5.2.1 การเกบขอมล 1.5.2.2 รวบรวมและจดการขอมลทไดลงคอมพวเตอร 5.3 วเคราะหขอมล 5.3.1 ศกษาปญหาทเกด 5.3.2 นาขอมลทเกบรวบรวมไดมาวเคราะห 5.3.3 สรางแบบจาลอง (Logical Model) 5.3.4 แผนภาพกระแสขอมล (Data Flow Diagram)

5.3.5 แบบจาลองขอมล (ER- Diagram) 5.3.6 สรางพจนานกรมขอมล (Data Dictionary) 5.3.7 นาผลลพธทไดจากการวเคราะหมาออกแบบระบบ 5.3.8 ออกแบบฐานขอมล (Database Design) 5.3.9 ออกแบบจอภาพ (User Interface) 5.3.10 ออกแบบรานงาน (Output Design)

5.4 ออกแบบโปรแกรม 5.5 พฒนา – ทดสอบ 5.5.1 เขยนโปรแกรม 5.5.2 ทดสอบยอย

5.5.3 ทดสอบรวม 5.5.4 ทดสอบการใชงานโปรแกรม 5.5.5 จดทาคมอประกอบ

5.6 นาเสนอผลงานตอคณะกรรมการ 5.7 จดทาเอกสาร

157

6. ตารางการปฏบตงาน

ตารางท 1-1 ตารางแสดงระยะเวลาในการดาเนนงาน

กจกรรม เดอน พ.ศ. 2554 เดอน พ.ศ. 2555

ม.ย. ก.ค. ส.ค. ก.ย. ต.ค. พ.ย. ธ.ค. ม.ค. ก.พ.

นาเสนอหวขอตออาจารยทปรกษา

ศกษาและรวบรวมขอมล

วเคราะหและออกแบบระบบ

พฒนาระบบ

ทดสอบและปรบปรงระบบ

นาเสนอผลงานตอคณะกรรมการ

จดทาคมอ

7. ผลทคาดวาจะไดรบ

7.1 สามารถลดคาใชจายในเรองการใชกระดาษและทรพยากรในการจดเกบขอมลได 7.2 สามารถปองกนการสญหายของขอมลได 7.3 สามารถจดเกบขอมลไดอยางเปนระบบ งายตอการคนหา และสะดวกในการเลอกใชงาน

7.4 สามารถปองกนปญหาความลาชาในการสบคนขอมล

158

ภาคผนวก ง รายงานการเขาพบทปรกษา

159

รายงานการพบทปรกษา

ชอเรอง ระบบสารสนเทศสานกงานพลงงาน จงหวดมหาสารคาม ผศกษา นางสาววนวสา แกวเขยวงาม รหสนสต 51010912683 นางสาวอรธวา อนทจนสอน รหสนสต 51010912720 ทปรกษา อาจารยเกรยงศกด จนทนอก

วน เดอน ป รายงานความคบหนา ลายมอชอทปรกษา

2 ม.ย. 54 เสนอหวขอโปรเจค 1

23 ม.ย.54 เสนอขอบเขตงาน

14 ก.ค. 54 สงโปรเจคบทท 1

25 ส.ค. 54 สงโปรเจคบทท 2,3 แกไขบทท 1 (การจดตวหนงสอ,การวางแบบฟอรม)เพมกราฟสถตการเขาชมบทความและโพลการเขาชมบทความ

15 ก.ย. 54 สงโปรเจคบทท 3 ทแกไขแลว

15 พ.ย. 54 เสนอรปแบบเวบไซตททาใหอาจารยทปรกษาตรวจดรปแบบ

13 ธ.ค. 54 เสนอความคบหนาของเวบไซตเพอใหอาจารยตรวจดงาน

21 ก.พ. 55 เขาพบอาจารยทปรกษาเสนอเวบไซตททา พรอมทงสงเอกสารบทท 4

Documents

ภาคผนวกbc.msu.ac.th/project_file/appendix(375).pdf · 2012-03-13 · ภาพที่ ก – 9 หน้าดําเนินการเตรียมการติดต้ัง