มหาวิทยาลัยเทคโนโลยีราชมงคลล้านนาลำปาง
ข้อสอบกลางภาค ประจำภาคเรียนที่ 1 ปีการศึกษา 2560
วิชา 12031204 การเขียนโปรแกรมบนเว็บ คะแนนเต็ม 30 คะแนน ผู้สอน อ.นราวิชญ์ ความหมั่น (0841517164)
คำชี้แจง อนุญาตให้นำกระดาษA4 เขียนสรุปด้วยปากกา สีน้ำเงิน และสีแดง เข้าห้องสอบได้ 1 แผ่น
และนำพร้อมกระดาษเขียนตอบ
1.
หลักการคำนวณทางคอมพิวเตอร์ (แสดงวิธีทำ
: สัญญาลักษณ์ +(บวก) , –(ลบ) , ^(ยกกำลัง) , * (คูณ) , / (หาร) )
10
+ 2 * 8 ^ 2 * 5 - 4
|
(10
+ 2) * 8 ^ 2 * ( 5 -4)
|
10
+ 2 * 8 / (2 * 5 - 4)
|
10+2*64*5-4
10+128*5-4
10+640-4
650-4
646
|
12*8^2*1
12*64*1
768*1
768
|
10+2*8/(10-4)
10+2*8/6
10+16/6
10+2.66
12.66
|
ผลลัพธ์ 646
|
ผลลัพธ์ 768
|
ผลลัพธ์ 12.66
|
2.
อินทราเน็ต(Intranet) คือ ระบบเครือข่ายคอมพิวเตอร์ที่มีการเชื่อมต่อเข้าด้วยกัน
ในระยะหรือบริเวรที่ไม่ไกล หรือบริเวณตึก เพื่อแลกเปลี่ยนข้อมูล ไฟล์
ใช้อุปกรณ์ร่วมกัน เช่น เครื่องพิมพ์ เป็นต้น (LAN)
3.อินเตอร์เน็ต(Internet) คือ ระบบเครือข่ายคอมพิวเตอร์ที่มีการเชื่อมต่อกันเป็นระบบ
WAN สามารถเชื่อมต่อกันทั่วโลก
เพื่อการสื่อสาร แลกเปลี่ยนข้อมูล
บริการบนอินเตอร์เน็ต
1. www การบริการเว็บไซต์
2. FTP (File Transfer Protocol) บริการแลกเปลี่ยนแฟ้มข้อมูล
3. telnet บริการใช้คอมพิวเตอร์ในระยะไกล เช่น remote desktop, teamview
4. บริการด้านการสื่อสารต่างๆ
4.เครือข่ายคอมพิวเตอร์ หมายถึง การเชื่อมต่อคอมพิวเตอร์ตั้งแต่สองเครื่อง
โดยสามารถสื่อสารกันด้วยหมายเลข IP Address
5.1
จากรูปอุปกรณ์ A
เรียกว่า Router
มีหน้าที่ เพื่อเชื่อมต่อเครือข่ายภายนอก
หรือหาเส้นทางการสื่อสารที่ดีที่สุด
5.2 จากรูปอุปกรณ์ B เรียกว่า Switching hub
มีหน้าที่ กระจายหรือขยายสัญญาณ
เพิ่มจุดเครือข่าย 5.3 จากรูปสถาปัตยกรรมของระบบเครือข่าย (Network Architecture) หรือโทโปโลยี (Topology)
แบบ star Topology ต้องมีอุปกรณ์ส่วนกลาง
เพื่อขยายส่งสัญญาณและทุกเครื่องจะมีการเชื่อมต่อผ่านสาย UTP ข้อดี ดูแลและตรวจสอบง่ายเครื่องใดเสียหายไม่กระทบต่อระบบ ข้อเสีย ค่าใช่จ่ายสูง
แต่ถ้าอุปกรณ์ส่วนกลาง hub เสีย
ก็ใช้งานไม่ได้ทั้งหมด
5.4 จากรูป
การสื่อสารเครือข่ายคอมพิวเตอร์ สามารถสื่อสารด้วยใช้หมายเลขที่เรียกว่า
เรียกว่า IP Address ตัวอย่างจากรูปมีหมายเลข 192.168.1.31
2. เว็บเซิร์ฟเวอร์ เช่น Apache (เครื่องเซิร์ฟเวอร์)
ทำหน้าที่รับการร้องขอจากเว็บบราวเซอร์ (web browser เช่น google chrome IE Firefox)
3. เมื่อตรวจสอบนามสกุล php เว็บบราวเซอร์
จะส่งต่อให้ ภาษา php Enging ในการแปล Tag ให้เป็นภาษา HTML
4. ถ้ามีการเชื่อมต่อฐานข้อมูล php Enging ก็เชื่อมต่อข้อมูล
MySQL ผ่านภาษา SQL
5. แล้วส่งผลลัพธ์ที่ได้จากการแปลเป็นภาษา html ส่งคืนให้กับเว็บบราวเซอร์
Client
การจำลองและติดตั้งเครื่องคอมพิวเตอร์เป็น
Web
Server ด้วยการลงโปรแกรม AppServ จะได้โปรแกรมสำหรับการพัฒนา
Web Application ทั้งหมด 4 โปรแกรม คือ
1.
Apache (เครื่องเซิร์ฟเวอร์) ทำหน้าที่รับการร้องขอจากเว็บบราวเซอร์
(web browser เช่น google chrome IE Firefox
2. PHP Script คือภาษา php Enging ในการแปล Tag ให้เป็นภาษา
HTML
3. phpMyAdmin คือโปรแกรม เพื่อใช้ในการบริหารจัดการฐานข้อมูล Mysql แทนการคีย์คำสั่ง
4. MySQL
คือโปรแกรมระบบจัดการฐานข้อมูล เป็นเครื่องมือสำหรับเก็บข้อมูล
เพื่อให้ตรงกับความต้องการของผู้ใช้ เช่นทำงานร่วมกับเครื่องบริการเว็บ (Web
Server)
7. ภาษา
HTML
: ( Hyper Text Markup Language) คือ เป็นภาษาที่ใช้ในการเขียนเว็บไซต์
สามารถแสดงผล ข้อความ รูปภาพ เสียง วีดีโอ
มีโครงสร้าง
2 ส่วน คือ แทก
head กับ Body ตัวอย่างโครงสร้างภาษา
Html เขียนคำสั่งดังนี้
<html>
<head><title>
หัวข้อ </title></head>
<body>
เนื้อหา
</body>
</html>
ตัวอย่าง Tag พื้นฐานภาษา HTML
1.
ทำ Link ไปยังเว็บมหาวิทยาลัย
www.lpc.rmutl.ac.th เขียนคำสั่งอย่างไร
<
a href=”http://www.lpc.rmutl.ac.th”> www.lpc.rmult.ac.th </a>
2.
การใส่รูปภาพ 01.jpg ในเพจ เขียนคำสั่ง อย่างไร <img src=”01.jpg” width=150 hight=150 >
3.
เขียนโครงสร้างของ Tag ตาราง 2 แถว
3 คอลัมน์
<table>
<tr>
<td> ค1 </td> <td> ค3 </td> <td> ค3 </td>
</tr>
<tr>
<td> ค1
</td> <td> ค3 </td> <td> ค3 </td>
</tr>
</table
4.
Tag <p> กับ Tag <br>
ต่างกันอย่างไร
<p> ย่อหน้า </p> ห่าง 1 บรรทัด <br>
ขึ้นบรรทัดใหม่
5.
tag
<H> คือ กำหนดขนาดอักษร <H1><H5>
(ใหญ่, ไปเล็ก) ตัวอย่างใช้งาน
<h1>
ใหญ่สุด </h1
6.
Tag
Form คือ สำหรับการรับค่าจากผู้ใช้ เช่น การป้อนค่า เลือกค่า เลือกไฟล์
ตัวอย่าง การใช้งานหรือรูปแบบ
<form method=post action=file.php>
<input type=text name=code>
</form>
8. Cascading Style Sheets คือ ภาษาสำหรับการจัดรูปแบบจัดรูปแบบเว็บไซต์
ประโยชน์
เพื่อช่วยในการทำงานในการเขียนภาษา
html ให้มีประสิทธิภาพ รูปแบบที่สวยงาม
จัดรูปแบบของเว็บไซต์ให้สวยงาม
และลดขั้นตอนการเขียนคำสั่ง
9.พื้นฐานหลักการเขียนโปรแกรม ภาษา PHP
X=100 , i=1 ,y=5
|
||
While 100<=100
|
ผลลัพธ์
|
|
X=100+5*1
=105
I = 1+1
=2
|
X=105
I=2
|
|
n
= 5 f = 1 k=5 i=0
|
||
k>=
1
5<=
1
|
f=1*5
f=5
K=5-1
k=4
I=0+1
i=1
|
f=5*4
f=20
K=4-1
k=3
I=1+1
i=2
|
f=20*3
f=60
K=3-1
k=2
I=2+1
i=3
|
f=60*2
f=120
K=2-1
k=1
I=3+1
i=4
|
f=120*1
f=120
K=1-1
k=0
I=4+1
i=5
|
10. ร้าน
Big-C ต้นยาง เปิดร้านใหม่ ต้องการส่งเสริมการขายสินค้า
ถ้าลูกค้าซื้อสินค้ารวมเป็นเงินทุกๆ
800
บาท ได้คูปองส่วนลดสำหรับแลกซื้อครั้งต่อไป 50 บาท โดยการกำจัดคูปอง 3 คูปองต่อ 1
ใบเสร็จ ถ้านักศึกษาซื้อสินค้ารวมเป็นเงิน 3500
บาท จะได้คูปองกี่ใบ รวมเป็นเงินกี่บาท
ให้นักศึกษา
1.
วิเคราะห์งาน
รับค่า
ซื้อสินค้า(goodsprice)=3500
ประมวลผล
ส่วนลด prize= goodsprice / 800
=
int (3500/800)
=
4
ตรวจสอบเงื่อนไข
If prize >=3
Prize=3
End
if
Discount
= prize * 50
แสดงผล
ซื้อสินค้า 3500
ส่วนลดจำนวน 3 (prize)
ส่วนลด 150
(discount)
1.
เขียนโปรแกรม
Html
|
php
|
<html>
<head>
<title>
bigc.html </title>
</head>
<body>
<form
method="post" action="bigc.php">จำนวนเงินซื้อสินค้า
<input
type ="text" name="goodsprice">
<input
type="submit">
</form>
</body>
</html>
|
<html>
<head>
<title>
bigc.php </title>
</head>
<body>
<?php
echo
"รับเงินซื้อสินค้า
จำนวน";
$goodsprice
= $_POST[goodsprice];
$prize
= floor($goodsprice / 800);
if
($prize >= 3) {
$prize = 3;
}
$discount
= $prize * 50;
echo
"ซื้อสินค้า " . $goodsprice ;
if
($prize < 3) {
}
else {
echo "จำนวนคูปอง
" . $prize . " ใบ" ;
echo "ส่วนลดครั้งต่อไป
" . $discount . " บาท" ;
}
echo
"ขอบคุณที่ใช้บริการ" . PHP_EOL;
?>
</body>
</html>
|
11.
โปรแกรมที่นักศึกษาใช้สำหรับในการเขียนโปรแกรมภาษา Html และ PHP มีโปรแกรมอะไรบ้าง พร้อมอธิบายข้อดีและข้อเสีย
1. editplus ข้อดีของ Editplus - สามารถใช้กับภาษาไทยได้
- แยกคำสั่งต่างๆ
ด้วยการแสดงสีที่ไม่เหมือนกัน ทำให้เราสามารถตรวจสอบได้ง่ายว่า
เราพิมพ์ผิดที่คำสั่งไหน
- สามารถทำตัวเองเป็น web
browser ได้ด้วย (IE 5.XX Compatible)
2.
Sublimetext
ข้อดี - รองรับหลายภาษา
อาทิเช่น HTML CSS JavaScript JQuery
Moblie ฯลฯ
- เร็วมาก เร็วกว่า IDE อยู่แล้ว เพราะว่าเป็น Text Editor แต่ก็ไม่เฉพาะในแง่ของการพิมพ์ code เท่านั้น แต่ยังรวมไปถึงการอ่าน file, search
ข้อเสีย
ไม่ค่อยเสถียรกับการใช้ภาษาไทยมากนัก
3. dreamweaver ข้อดี -ผู้ใช้ไม่จำเป็นต้องศึกษาภาษา
HTML มาก่อน
ก็สามารถสร้างเอกสารเว็บได้ เพราะตัวโปรแกรมมีฟังก์ชันการทำงานแบบ HTML
Generator
-ทำให้ได้ภาพเคลื่อนไหวบนเบราเซอร์ 4.0
โดยไม่ต้องอาศัย Plugin ใดๆ
- ปุ่มควบคุมการทำงาน ได้จัดแบ่งเป็นหมวดหมู่
ช่วยให้การสั่งงานกระทำได้สะดวก และรวดเร็วแนวทางในการศึกษา
เว็บไซต์ชื่อ www.w3schools.com
อธิบายหน้าที่และประโยชน์ของโปรแกรม 1.
FileZilla เป็นโปรแกรมที่ใช้สำหรับส่งไฟล์จากเครื่องคอมพิวเตอร์ของเรา
ขึ้นไปยังโฮสติ้ง (Server)
และดึงไฟล์จากโฮสติ้งลงมายังเครื่องคอมพิวเตอร์ของเราโดยใช้ FTP
ประโยชน์ของโปรแกรมนี้คือ - มีระบบตรวจสอบ-เปรียบเทียบไฟล์ระหว่างเครื่องเรากับ server พร้อมแสดงผล
-มีระบบ file management ที่ใช้จัดการไฟล์,
จัดลำดับคิว และ resumesupports เอาไว้อัพไฟล์ต่อเนื่องได้
-ระบบการเรียกดูไฟล์ (File Manager) ที่ใช้ง่าย คล้ายๆกับใน Windows เลย
2.
TeamViewer
คือ โปรแกรมควบคุมเครื่องคอมพิวเตอร์ระยะไกล ประโยชน์ของโปรแกรมนี้คือ
สอนการใช้งานคอมพิวเตอร์ดูแลโปรแกรมฯ
ดูแลเครือข่ายคอมพิวเตอร์ บริการอินเทอร์เน็ต Telnet (Remote Desktop Connection)
3. Dream weaver คือโปรแกรมสร้างเว็บเพจแบบเสมือนจริง ประโยชน์ของโปรแกรมนี้คือ ผู้ใช้สามารถจัดวางข้อความ รูปภาพ ตาราง ฟอร์ม วิดีโอ
รวมถึงองค์ประกอบอื่น ๆ ภายในเว็บเพจได้อย่างสวยงามตามที่ผู้ใช้ต้องการ
4. Sniping Tools คือ เป็นเครื่องมือสำหรับ Screenshot หน้าจอคอมพิวเตอร์ ประโยชน์จากโปรแกรมนี้คือ สามารถเลือกรูปแบบในการ
Screenshot ได้ 4 รูปแบบ ประกอบด้วย Free-form,
Rectangular, Window และ Full screen มีเครื่องมือ
Snipping Tool Editor สำหรับคอมเม้น หรือ
ไฮน์ไลน์ข้อความก่อนบันทึกข้อมูล สำหรับชนิดของไฟล์ที่โปรแกรมรองรับได้
12.
ถ้านักศึกษาต้องการให้ตนเอง
มีความรู้เกี่ยวกับวิชาการออกแบบและพัฒนาเว็บไซต์ และสามารถประยุกต์ใช้งานได้
นักศึกษาและอาจารย์ผู้สอน ควรปรับปรุงการจัดการเรียนการสอนอย่างไร
ศึกษาทั้งทฤษฎีและปฏิบัติตามไปเป็นขั้นตอน
ทำซ้ำ ๆ จนอธิบายได้ว่า ขั้นตอนการออกแบบและพัฒนาเว็บไซต์เป็นอย่างไร
และนำวิชาต่าง ๆ มาประยุกต์ใช้ในวิชานี้ด้วย