Module 2: The Web Server 1. Overview The Web Server Overview of IIS Overview of Apache 2.
Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5...
Transcript of Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5...
![Page 1: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/1.jpg)
MR. NATTAVUT SRIWIBOON
Department of Computer Science, Faculty of Liberal Arts and Sciences,
Kalasin Rajabhat University
https://isan.msu.ac.th/sak/
![Page 2: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/2.jpg)
AGENDA
Overview
Web Server
Install Wordpress on Web Server
HTML 5
Wordpress Wordpress
Overview, Control Menu, Show My Web Page
Themes, Menu, Page Link
Media, Link, Promote, Link to Social Media
Etc.
Workshop
2
![Page 3: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/3.jpg)
WEB APPLICATIONS / WEB APPS
โปรแกรมที่ทํางานบนฝงเซิรฟเวอร เรยีกวา Web Server (Server Side)
เขาไปใชงานโปรแกรมโดยโปรแกรม Web Browser เชน Internet Explorer, Firefox, Chrome, Safari เรยีกวา Client Side
ฝง Client ไมตองติดตั้งโปรแกรมเพิ่มเติม สามารถเขาใชงานไดทันทโีดยพิมพ URL ฝง Client ไมตองติดตั้งโปรแกรมเพิ่มเติม สามารถเขาใชงานไดทันทโีดยพิมพ URL ของโปรแกรมนัน้ๆ เชน http://www.facebook.com
ขอมูลทุกอยางจะเก็บอยูท่ี Server Side เปนหลัก (Remote Storage)
เวลาใชตองตออนิเทอรเน็ต (สวนใหญ)
พัฒนาโดยใช HTML/CSS/JavaScript แตตองมีภาษา Script เขาชวยเชน PHP และ ASP (หรืออ่ืนๆ) 3
![Page 4: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/4.jpg)
NATIVE APPLICATION
ติดตั้ง Program และใชงานในลักษณะ Standalone เชน MS Word
ตอง Load โปรแกรมมาติดตั้งท่ีเครือ่ง Smart ตอง Load โปรแกรมมาติดตั้งท่ีเครือ่ง Smart Phone ผาน Apps Store / Google Play
ทํางานไดเร็ว และเขียนโปรแกรมท่ีซับซอนได 4
![Page 5: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/5.jpg)
การพัฒนา WEB APPLICATIONS
5
![Page 6: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/6.jpg)
เราจะเรียนรูอะไรกันเกี่ยวกับ HTML5
HTML5 คืออะไร
มีอะไรใหมใน HTML5
แนวโนมการใชงานและกํารสนับสนุนมาตรฐาน HTML5 แนวโนมการใชงานและกํารสนับสนุนมาตรฐาน HTML5
การทดสอบการรองรับ HTML5 ดวยตัวคุณเอง
HTML5 กับอุปกรณ Mobile
6
![Page 7: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/7.jpg)
HTML5 คืออะไร
HTML คืออะไร
ยอมาจาก “HyperText Markup Language”
ภาษาคอมพิวเตอรท่ีใชสั่งใหแสดง “ขอมูลหรือเนื้อหา” ภาษาคอมพิวเตอรท่ีใชสั่งใหแสดง “ขอมูลหรือเนื้อหา” (Content) บนหนาเว็บเพจ
ทุกหนาเวบ็เพจบนอินเทอรเน็ตจะตองมีภาษา HTML อยู
7
![Page 8: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/8.jpg)
HTML5 คืออะไร
ภาษา HTML เวอรชั่นใหมลาสุด แตยังไมเปน Final Version
มีคุณสมบัติเพ่ิมข้ึนจาก HTML เดิม ทําใหเขียน HTML งายข้ึน
สนับสนุนการแสดงผลบนอุปกรณต่ํางๆ ไดเชน PC, Mac, iPhone, iPad, สนับสนุนการแสดงผลบนอุปกรณต่ํางๆ ไดเชน PC, Mac, iPhone, iPad, Android Phone หรือ Tablet เปนตน
เพ่ิมลูกเลนในการทํางาน เชน ทาํงานกบัระบบแผนที่, สรางภาพกราฟกโดยไมตองม ีFlash ฯลฯ
เนนการใชงานรวมกับ CSS (Cascading Style Sheets) และ JavaScript
ทํางานกับภาษาที่ใชพัฒนา Web Application เชน PHP หรือ ASP ไดอยางมีประสิทธิภาพเพ่ิมข้ึน
8
![Page 9: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/9.jpg)
มาตรฐาน HTML5 จะจบลงท่ีใด
คําตอบ คอื “ยังไมรู”
แตอุปกรณ และ Browser ตางๆ ก็เร่ิมสนับสนุนกันไปแลว แมวามาตรฐาน HTML5 ยังไมลงตัว ก็ตาม ไปแลว แมวามาตรฐาน HTML5 ยังไมลงตัว ก็ตาม
ผูพัฒนาสามารถเริ่มศึกษาและพัฒนาได เพราะมีการรองรับเพ่ิมข้ึน
9
![Page 10: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/10.jpg)
ขอดีของ HTML5
รองรับอุปกรณหลากหลายทั้ง Desktop PC, Mac และ Mobile เชน Smart Phone, Tablet
แสดงภาพ เสียง หรือกราฟกอนเิมชั่นต่ํางๆ โดยไมตองติดตั้งซอฟทแวรเพิ่มเติม
สามารถพัฒนาโปรแกรมไดเหมือนกับโปรแกรมทีใ่ชงานทั่วไป ไมใชเพียงแคสราง สามารถพัฒนาโปรแกรมไดเหมือนกับโปรแกรมทีใ่ชงานทั่วไป ไมใชเพียงแคสรางหนาเว็บเพจแสดงขอมูลอยางเดียว
เขียนโปรแกรมงายยิ่งขึ้น โดยเฉพาะบน Mobile ไมตองพัฒนาในลักษณะ Native Apps และไมตองนําโปรแกรมขึ้น App Store หรอื Google Play
เขียนโปรแกรมไดอยางมีประสทิธภิาพ เพราะรองรับการติดตอเพื่อเรยีกใชงานคุณสมบัติตางๆ ของอุปกรณโดยเฉพาะ Mobile ได เชนเรยีกใชงานระบบ GPS (แผนที่)
10
![Page 11: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/11.jpg)
ขอจํากัดของ HTML5
แตละคุณสมบัติยังไมไดมีกํารสนับสนนุจากทุก Browser และอุปกรณ Mobile และอุปกรณ Mobile
ยังไมประกาศเปนมาตรฐานท่ีกาํหนดเสร็จส้ินแลว
การใชในรูปแบบ Offline (ไมไดตออินเทอรเน็ต) จะตองมีการเขียนโปรแกรมเพ่ิมเติม
11
![Page 12: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/12.jpg)
HTML 5 TEMPLATE
http://html5up.net/
![Page 13: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/13.jpg)
WEB APPLICATION WORK
http://isan.msu.ac.th
Web Server
<HTML><Body>
Web Content</Body></HTML>
13
![Page 14: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/14.jpg)
WEB APPLICATION WORK
14
![Page 15: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/15.jpg)
WORDPRESS AND WEB SERVER
1. แตกซปิไฟลต์ดิตั�งลงในไดเรคทอรทีี�ตอ้งการตดิตั�ง2. เปิดไฟลw์p-config-sample.php ดว้ยโปรแกรมแกไ้ขตวัอกัษรอยา่งเชน่ WordPad ดว้ยโปรแกรมแกไ้ขตวัอกัษรอยา่งเชน่ หรอืโปรแกรมอื�นที�คลา้ยกนัและใสข่อ้มูลการเชื�อมตอ่กบัฐานขอ้มูลของคณุ3. บนัทกึไฟลใ์นชื�อใหมว่า่ wp-config.php4. อพัโหลดทกุอยา่งขึ�นโฮสท์
15
![Page 16: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/16.jpg)
WORDPRESS AND WEB SERVER
5. เปิดไฟล ์/wp-admin/install.php ในเบราเซอร์ของคณุ จะปรากฎตารางการตั�งคา่ที�ตอ้งการสาํหรบับล็อกของคณุ ถา้มีบางอยา่งผดิปกต ิใหท้าํการเชค็ไฟล ์wp-config.php อกีครั�งแลว้ลองใหม ่ถา้ยงัผดิพลาดอกี กรุณาไปที� ชุมชนชว่ยเหลือ พรอ้มครั�งแลว้ลองใหม ่ถา้ยงัผดิพลาดอกี กรุณาไปที� ชุมชนชว่ยเหลือ พรอ้มดว้ยขอ้มูลของการลม้เหลวที�คณุทราบมากที�สุด6. เก็บรหสัผา่น (password)ที�ระบบใหก้บัคณุ7. script ควรจะนาํคณุมายงัหนา้ เขา้สูร่ะบบ login page เขา้สูร่ะบบดว้ย username admin และรหสัผา่นที�ได ้ระหวา่งการตดิตั�ง ซึ�งคณุมาสามารถเปลี�ยนมนัภายหลงัไดท้ี�หนา้ Profile
16
![Page 17: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/17.jpg)
WORDPRESS ONLINE
สรา้ง Web Side Online ดว้ย Wordpress
https://th.wordpress.com/
17
![Page 18: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/18.jpg)
การสรา้ง PAGE ใหมแ่ละสรา้ง LINK MENU
18
![Page 19: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/19.jpg)
THEMES
Download: https://th.wordpress.org/themes/
19
![Page 20: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/20.jpg)
MAIN MENU
20
![Page 21: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/21.jpg)
TITLE TEXT
21
![Page 22: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/22.jpg)
HEADER IMAGE
22
![Page 23: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/23.jpg)
MENU
การเพิ�มหนา้ใน Wordpress จะสรา้ง Menu ใหอ้ตัโนมตั ิ
23
![Page 24: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/24.jpg)
MENU
สามารถประตาํแหน่งของ Menu ไดโ้ดยไปท ีปรบัแตง่ เมนู
![Page 25: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/25.jpg)
POST
Post เนื�อหาจะแสดงในหนา้แรก
![Page 26: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/26.jpg)
MOBILE MODE
HTML 5 Enable
26
![Page 27: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/27.jpg)
WORDPRESS WIDGET
วดิเจต็ (WordPress Widget) คอือะไร
สว่นสาํคญัของ Wordpress ที�มือใหเ้ลือกใชเ้พื�อตกแตง่หนา้ Web Page ใหส้วยงาม เครื�องมือก็ตกแตง่หนา้ Web Page ใหส้วยงาม เครื�องมือก็อยา่งเชน่ Calendar
![Page 28: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/28.jpg)
WORDPRESS WIDGET
โดยตาํแหน่งของการกาํหนด Widget เชน่
Header (สว่นหวั)
Sidebar (ดา้นขา้ง)Sidebar (ดา้นขา้ง)
Footer (ดา้นลา่ง)
![Page 29: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/29.jpg)
FOOTER
29
![Page 30: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/30.jpg)
MEDIA
Youtube VDO Example
30
![Page 31: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/31.jpg)
MEDIA
การสรา้งหนา้ Download File เชน่เอกสาร
File ProgramUpload File ที� คลงัไฟลส์ื�อUpload File ที� คลงัไฟลส์ื�อ
แกไ้ข หวัขอ้ เพื�อแสดงในเนื�อหา
สรา้ง Link ไปที� Media โดย Click ที�เพิ�มสื�อ
![Page 32: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/32.jpg)
GOOGLE MAP
32
![Page 33: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/33.jpg)
GOOGLE MAP
33
![Page 34: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/34.jpg)
GOOGLE MAP
34
![Page 35: Overview - WordPress.com · AGENDA Overview Web Server Install Wordpresson Web Server HTML 5 Wordpress Overview, Control Menu, Show My Web Page Themes, Menu, Page Link Media, …](https://reader034.fdocuments.us/reader034/viewer/2022052104/603ef78d89a83f23096e0224/html5/thumbnails/35.jpg)
35