ตัวอย่างระบบที่พัฒนาด้วย PHP,MYSQL และ AJAX ระบบแจ้งปัญหาคอมพิวเตอร์

หลังจากที่บทความเรื่อง  ตัวอย่างระบบที่พัฒนาด้วย PHP และ MYSQL ระบบ Sharefile ออกไปมีหลายคนถามเข้ามาถึงระบบอื่นๆ
จนต้องรีบทำออกมา แต่เนื่องจากงานยุ่ง เลยใช้เวลาทำระบบนี้นานไปหน่อยกว่าจะเสร็จ ระบบใหม่วันนี้คือระบบสำหรับแผนก IT ที่
นิยมใช้งานกัน นั้นคือ ระบบแจ้งปัญหาคอมพิวเตอร์ หรือ  ITsupport แล้วก็ต้องขอโทษด้วยที่ไม่ได้มาแกะไฟล์ให้ดูกัน เพราะเห็นว่ามันคงจะใหญ่เกินไปแล้วกว่าจะอธิบายกันเสร็จ แต่ถ้าใครสนใจตรงไหนสามารถสอบถามเข้ามาได้เลยนะครับ ยินดีมากถ้าผมจะใช้คุณได้บ้าง

ระบบนี้เป็นระบบตัวอย่างนะครับดังนั้นผมจะยกตัวอย่างขึ้นมาเพื่อเป็นข้อมูลในระบบ เริ่มจากระบบนี้ถูกพัฒนาขึ้นมาเพื่อให้ บุคลากรของโรงเรียนเทคโนโลยีปทุมธานีใช้เป็นระบบแจ้งซ่อมอุปกรณ์ต่างๆ แจ้งขอใช้งานเครื่องมือต่างๆ แจ้งคืนอุปกรณ์การใช้งานต่างๆ เพื่อเก็บข้อมู,ทั้งหมดไว้เป็นหลักฐาน เมือผู้ใช้กรอกข้อมูลเข้ามาในระบบแล้ว จะมีเจ้าหน้าที่ไปรับเครื่องมาดำเนินการตามคำแจ้งที่ส่งเข้ามา
ระบบนี้มีความแตกต่างจากระบบ Sharefile ตรงที่มีการใช้ Ajax เข้ามาร่วมด้วย ซึ่งความจริงแล้วก็ไม่ได้ใช้อะไรเยอะแยะมากนะครับ
แค่ใช้สำหรับเรียกไฟล์ php ขึ้นมาแสดงในกรอบหน้าเดิมเท่านั้นเอง ไฟล์ทั้งหมดผมเขียนเป็นภาษา PHP นะครับ ใช้ไฟล์ทั้งหมดดังต่อไปนี้

มีทั้งสิ้น 10 ไฟล์ครับ
1.all_history.php = เป็นไฟล์สำหรับแสดงข้อมูลประวัติการเข้าใช้งานทั้งหมด
2.contact.php = เป็นไฟล์สำหรับแสดงฟอร์มส่งข้อมูลเพื่อติดต่อเจ้าหน้าที่โดยตรง
3.editprofile.php = เป็นไฟล์สำหรับแก้ไขข้อมูลส่วนบุคคล
4.index.php = เป็นไฟล์สำหรับหน้าแรกเมื่อเข้าระบบมี form สำหรับ login ด้วย
5.index2.php = เป็นไฟล์สำหรับหน้าแรกเมื่อเข้าระบบแล้วและผมใช้หน้านี้เป็นหน้าหลักเกือบทุกหน้าที่เหลือจะถูกเรียกขึ้นมาในกรอบที่กำหนดให้ภายในหน้านี้เท่านั้น
6.inform.php = เป็นไฟล์สำหรับแจ้งงานต่างๆ ซึ่งปรากฏอยู่ในหน้า index2.php อีกที
7.logout.php = เป็นไฟล์สำหรับล้าง Cookie เนื่องจากระบบใช้ cookie ในการ login
8.makecookie.php = เป็นไฟล์สำหรับสร้าง Cookie เพื่อให้ผู้ใช้สามารถเข้าสู่ระบบได้ และทำหน้าที่ตรวจสอบรายชื่อและ password ของผู้ใช้ผ่านหน้านี้เลย
9.search.php = เป็นไฟล์สำหรับรับค่าที่ถูกส่งมาจากกล่องค้นหาปัญหาที่เกิดขึ้นบ่อยๆเพื่อแสดงรายละเอียดของปัญหาและแนวทางแก้ไขเบื้องต้น
10.work.php = เป็นไฟล์สำหรับแสดงข้อมูลล่าสุดของผู้เข้า้ใช้และสถานะงานที่ยังรอซ่อมอยู่

มาดูรูปกันบ้างครับ

รูปที่ 1 หน้าแรกจากไฟล์ index.php

รูปที่ 1 หน้าแรกจากไฟล์ index.php

มาดูตรงนี้กันก่อน นี่เป็นหน้าแรกของระบบนะครับ พอเข้ามาถึงแล้วก็จะเจอกับกล่อง Login จากนั้นก็จะส่งข้อมูลไปยังหน้า makecookie อีกทีเพื่อตรวจสอบ ชื่อและรหัสผ่านจากฐานข้อมูล และสร้าง Cookie ขึ้นมา

ตัวอย่าง Code

<tr align=”center”>
<td>    <form action=”make_cookie.php” method=”post” >
<table align=”center” width=”50%” border=”1″ bordercolor=”#000000″ cellpadding=”5″ cellspacing=”0″>
<tr bgcolor=”#666666″>
<td colspan=”2″>กรุณา Log in เข้าสู่ระบบ</td>
</tr>
<tr>
<td width=”20%”>USERNAME </td>
<td><input type=”text” size=”20″ name=”username” /> </td>
</tr>
<tr>
<td width=”20%”>PASSWORD</td>
<td><input type=”password” size=”20″ name=”password” /> </td>
</tr>
<tr bgcolor=”#666666″>
<td colspan=”2″><input type=”submit” value=”&nbsp;Log in&nbsp;” />&nbsp;&nbsp;
<input type=”reset” value=”&nbsp;&nbsp;Cancle&nbsp;&nbsp;” /></td>
</tr>

นี่เป็นตัวอย่าง Code จาก Form login นะครับ

รูปที่ 2 หน้าหลักของระบบ จากไฟล์ index2.php

รูปที่ 2 หน้าหลักของระบบ จากไฟล์ index2.php

หน้านี้ผมดึงข้อมูลออกมาแสดงจากฐานข้อมูลซึ่งเป็นหน้ารายละเอียดของผู้ใช้งานนะครับ จะเห็นว่าระบบนี้ไม่มีหน้าสำหรับสมัครสมาชิก เพราะผู้ที่จะเข้าใช้จำเป็นจะต้องเป็นบุคลากรจึงจะมีสิทธิ์เข้าใช้ระบบครับ หนา้นี้ผมดึง Ajax เข้ามาช่วยเพื่อให้ใช้งานไฟล์อื่นๆน้อยที่สุดนะครับ โดยทั้ง 4 ช่องด้านบนผมทำเป็น TD ทั้งหมดแล้วเอา ID เป็นตัวกำหนดคุณสมบัติจากนั้นเมื่อมีการเรียกใช้ชื่ออื่นๆก็จะมีการสลับไปมากับหน้าต่างๆได้ ซึ่งตรงนี้ต้องดูในวิดีโอนะครับจะได้เห็นภาพมากยิ่งขึ้น

รูปที่ 3 ช่องข้อมูลส่วนตัว ภายในไฟล์ index2.php

รูปที่ 3 ช่องข้อมูลส่วนตัว ภายในไฟล์ index2.php

ต้องกรอบนี้ไม่ได้ดึงขึ้นมาจากไฟล์ใหม่นะครับ อยู่ในไฟล์ index2.php เลย รูปและข้อมูลด้านบนดึงออกมาจากฐานข้อมูลเพื่อให้ผู้ใช้ตรวจสอบเนื่องจากเวลาที่ admin เปิดบัญชีผู้ใช้แล้วอาจจะมีการผิดพลาดได้  ด้านล่างเป็น Link สำหรับทำงานต่างๆครับ ซึ่ง link ตรงนี้จะเป็นการเรียก function ขึ้นมาใช้งาน

ตัวอย่าง Code

<table align=”center” width=”100%” border=”1″ bordercolor=”#000000″ cellpadding=”3″ cellspacing=”0″ bgcolor=”#FFFFFF”>
<tr bgcolor=”#CCCCCC”>
<td colspan=”4″ style=”background-color:#CCCCCC;”><font size=”-1″>
ยินดีต้อนรับคุณ &nbsp; <font color=”#0000FF”><?php echo $_COOKIE[‘yourusername’ ];?> </font> &nbsp;เข้าสู่ระบบ&nbsp;&nbsp; |&nbsp;
<a href=”logout.php”>Logout</a>
</font>
</td>
</tr>
<tr align=”center”>
<td width=”16%” style=”background-color:#FFFFFF;”><font size=”-1″><b>ข้อมูลส่วนตัว</b></font></td>
<td width=”18%” id=”head_editprofile” style=”background-color:#FFFFFF;”><font size=”-1″><b>บันทึกการเข้าใช้ </b></font></td>
<td width=”16%” id=”head_editpass” style=”background-color:#FFFFFF;”><font size=”-1″><b>แจ้งงาน</b></font></td>
<td width=”18%” id=”head_contact” style=”background-color:#FFFFFF;”><font size=”-1″><b>Download</b></font></td>
</tr>
<tr><td valign=”top”>
<?php
$con    =    mysql_connect(“localhost”,”root”,”root”);
if(!$con) {
echo “Not connect”;
}
echo “<font size=-1>”;
mysql_select_db(“project”,$con);
mysql_query(“SET NAMES tis620”);
$result = mysql_query(“select * from it_member where it_mem_name=’$_COOKIE[yourusername]’ “);
while ($data = mysql_fetch_array($result) ) {
echo “<img src=’images/employee/$data[it_mem_photo]’ width=’100′  border=’1′ /> <br />”;
echo “ชื่อ :: $data[it_mem_name] <br />”;
echo “แผนก :: $data[it_mem_department] <br />”;
echo “ชื่อจริง :: $data[it_mem_fname] <br />”;
echo “นามสกุล :: $data[it_mem_lname] <br />”;
echo “ตำแหน่ง :: $data[it_mem_position] <br />”;
echo “<hr />::  <a  id=’link’ onClick=’editprofile()’ title=’แก้ไขข้อมูลส่วนตัว’>แก้ไขข้อมูล</a> <br />”;
echo “::  <a  id=’link’ onClick=’view()’ title=’ข้อมูลการเข้าระบบของคุณ’> บันทึกการเข้าใช้</a><br /> “;
echo “::  <a id=’link’ onClick=’editpass()’ title=’แก้ไขข้อมูลรหัสผ่าน’>เปลี่ยนรหัสผ่าน </a><br /> “;
echo “::  <a href=’manual.php’ title=’วิธีการใช้งานระบบ’>คู่มือการใช้ </a> <br />”;
echo “::  <a id=’link’ onClick=’contact()’ title=’ติดต่ออาจารย์คอมโดยตรง’>ติดต่อเจ้าหน้าที่ </a> <br />”;
echo “::  <a  id=’link’ onClick=’inform()’ title=’ขอความช่วยเหลือ’> แจ้งงาน</a><br /> “;
echo “::  <a  id=’link’ onClick=’download()’ title=’Download’>Download </a><br />”;
}
echo “</font>”;
?>
</td>

ตรง Link ผมใช้เป็น onClick เพื่อเรียก function ต่างๆนะครับ

รูปที่ 4 บันทึกการเข้าใช้จากไฟล์ index2.php

รูปที่ 4 บันทึกการเข้าใช้จากไฟล์ index2.php

ตรงนี้เป็นส่วนของการแสดงงานล่าสุดด้านบน และส่วนของงานที่ส่งไปแล้วแต่ยังไม่ได้ซ่อมด้วย

ตัวอย่าง Code

<td valign=”top” id=”editprofile”>
<?php
echo “<font size=-1>”;
mysql_select_db(“project”,$con);
mysql_query(“SET NAMES tis620”);
$result = mysql_query(“select * from it_work where w_user =’$_COOKIE[yourusername]’  ORDER BY w_id  DESC limit 1 “);
while ($data = mysql_fetch_array($result) ) {
echo “<font color=’red’>งานล่าสุด </font><br />”;
echo “<font color=’blue’>วันที่ </font>:: $data[w_date] <br />”;
echo “<font color=’blue’>เวลา </font>:: $data[w_time] <br />”;
echo “<font color=’blue’>ลำดับคิวงาน </font>:: $data[w_id] <br />”;
echo “<font color=’blue’>สถานะงาน </font>:: $data[w_status] <br />”;
echo “<font color=’blue’>ผู้รับผิดชอบ </font>:: <br />$data[w_response] <br />”;
echo “<br /><br /><font color=’red’>ประวัติงาน </font><br />”;
}
echo “</font>”;
?>
<?php
mysql_select_db(“project”,$con);
$result = mysql_query(“SELECT * FROM it_work where w_user =’$_COOKIE[yourusername]’  “,$con);
$num = mysql_num_rows($result);
echo ”    <font size=’-1′>คุณมีงานทั้งหมด [ $num ] งาน <br />”;
$old_work = mysql_query(“select * from it_work where w_user =’$_COOKIE[yourusername]’ and w_status = ‘รอซ่อม’ limit 0,3 “);
while ($view_old_work = mysql_fetch_array($old_work) ) {
echo “คิวงาน = $view_old_work[w_id]<br />”;
echo “สถานะ = $view_old_work[w_status] <br />”;
echo “ผู้รับผิดชอบ = $view_old_work[w_response] <br /><hr />”;
}
echo “<br /><a  id=’link’ onClick=’all_history()’ title=’ประวัติงานของคุณทั้งหมด’>ประวัติทั้งหมด</a>”;
echo “</font>”;
?></td>

Code เป็นการดึงข้อมูลจากฐานข้อมูลขึ้นมาแสดงนะครับ

 

รูปที่ 5 กรอบแจ้งงานภายในหน้า index2.php
รูปที่ 5 กรอบแจ้งงานภายในหน้า index2.php

กรอบนี้เป็นส่วนของการแจ้งงานเข้าไปใหม่นะครับ มีให้เลือกทั้งหมด 3 ช่องและสามารถใส่ คำอธิบายเพิ่มเติมได้ด้วย

 

รูปที 6 กรอบสำหรับdownload ภายในไฟล์ index2.php

รูปที 6 กรอบสำหรับdownload ภายในไฟล์ index2.php

ตรงนี้ตั้งใจจะให้เป็น Link download driver เท่านั้นนะครับ แต่ยังคิดไม่ออกเลยลงแบบนี้ไปก่อน ไฟล์เป็น HTML ธรรมดานะครับ

 

รูปที่ 7 กรอบสำหรับแก้ไขข้อมูลดึงจาก editprofile.php

รูปที่ 7 กรอบสำหรับแก้ไขข้อมูลดึงจาก editprofile.php

ตรงนี้ใช้ Ajax เข้ามาช่วยในการเรียกไฟล์ให้ปรากฏขึ้นมาโดยไม่ต้องเปลี่ยนหน้านะครับ

ตัวอย่าง Code

function editprofile()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“editprofile”).innerHTML=xmlhttp.responseText;
document.getElementById(“head_editprofile”).innerHTML=”<b>แก้ไขข้อมูลส่วนตัว</b>”;
}else {
document.getElementById(“editprofile”).innerHTML=xmlhttp.responseText;
document.getElementById(“head_editprofile”).innerHTML=”<img src=’images/indicator.gif’>”;
}
}
xmlhttp.open(“GET”,”editprofile.php”,true);
xmlhttp.send();
}

 

รูปที่ 8 เปลี่ยนรหัสผ่าน จากไฟล์ changepassword.php

รูปที่ 8 เปลี่ยนรหัสผ่าน จากไฟล์ changepassword.php

ตรงนี้เหมือนกันกับกรอบแก้ไขข้อมูลส่วนตัวนะครับ แค่เปลี่ยนตรงไฟล์ที่เรียกเท่านั้นเอง

 

รูปที่ 9 ติดต่อเจ้าหน้าที่ จากไฟล์ contact.php

รูปที่ 9 ติดต่อเจ้าหน้าที่ จากไฟล์ contact.php

ตรงนี้ก็ยังเหมือนกันกับกรอบแก้ไขข้อมูลส่วนตัวนะครับ แค่เปลี่ยนตรงไฟล์ที่เรียกเท่านั้นเอง แต่อย่าลืมเรื่องของ ID ด้วยนะครับ

 

รูปที่ 10 ค้นหาข้อมูลปัญหาคอมพิวเตอร์ จากไฟล์ search.php

รูปที่ 10 ค้นหาข้อมูลปัญหาคอมพิวเตอร์ จากไฟล์ search.php

ตรงนี้ก็จะแสดงข้อมูลจากในส่วนของการค้นหาข้อมูลนะครับ และแสดงแนวทางในการแก้ไขปัญหาเบื้องต้นที่ผู้ใช้สามารถทำได้ด้วยตัวเอง

หน้าสุดท้าย

 

รุปที่ 11 ออกจากระบบ จากหน้า logout.php

รุปที่ 11 ออกจากระบบ จากหน้า logout.php

หน้านี้ก็เป็นการล้างค่า Cookie นะครับ

เพียงเท่านี้ก่อนนะครับในส่วนของผู้ใช้ทั่วไป แล้วในส่วน back-end ของ Admin ขอติดไว้ก่อนเพราะตอนนี้บทนี้ยาวมากแล้ว
ตอนนี้ผมทำ Video ไว้แล้วนะครับแต่มีปัญหาเรื่อง Upload ขึ้น youtube ยังไม่ได้ เดี๋ยวจะรีบ up ให้ย้อนหลังนะครับ

หวังว่านี่คงพอเป็นตัวอย่างที่จะทำให้ผู้อ่านสามารถเห็นแนวทางในการนำเอา ภาษา PHP และ MySQL มาใช้เป็นระบบงานจริงได้
และสามารถใช้ Ajax เข้ามาเพิ่มลูกเล่นเพื่อเพิ่มความสวยงามให้กับระบบ

ขอบคุณที่ติดตามครับ

Update Video ครับ

ติดตามวิดีโอต่างๆเพิ่มเติมได้ที่ teerapuchchanel