20
บบบบบบบบบบ 3 บบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบ เเเเเเเ (template) เเเเเเเเเเเเเเเเเเเ เเเเเเเเเเเ เเเเเเเเเเเเเเเเเเเเเเเเเเเเเเ เเเเเเเเเเเเเเเเเเเเเเเเเเเ เเเเเเเเ เเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเ เเเเเเเเ เเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเ เเเเเเเเเเเเ เเเเเเเเเเเเเเเเเเเเเเ เเเเ เเเเเเเเเเเเเเเเเเเเ เเเเเเเเเเเเเเเเเเเเ เเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเ เเเเ เเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเ เเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเ เเเเเเเ เเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเ เเเเเเเเ

บทเรียนที่ 3 การปรับเปลี่ยนหน้าเว็บไซต์ด้วยเทมเพลต

Embed Size (px)

Citation preview

บทเรี�ยนท�� 3 การีปรี บเปลี่��ยนหน�าเว็�บไซต์�ด้�ว็ยเทมเพลี่ต์ท�าคว็ามรี��จั กก บเทมเพลี่ต์

เทมเพลต (template) เปรียบเสม�อนหน�ากากของเว็�บไซต� หรี�อรี�ปแบบเว็�บไซต�ส�ารี�จรี�ปท ย!งไม"มการีใส"เน�$อหาเข�าไป โดยแต"ละเทมเพลตจะปรีะกอบไปด�ว็ยรี�ปแบบการีแสดงเน�$อหาต!ว็อ!กษรี และการีจ!ดว็างต�าแหน"งโมด�ลท แตกต"างก!นออกไป ซ) งง"ายต"อการีปรี!บแต"ง หรี�อเล�อกใช้�งานหรี�อม�ได� ท!$งน$การีใช้�เทมเพลตคว็รีเล�อกใช้�ให�เหมาะสมก!บเน�$อหาของเว็�บไซต� เช้"น เว็�บไซต�เก ยว็ก!บเทคโนโลยคว็รีเล�อกใช้�เทมเพลตท เก ยว็ก!บเทคโนโลยคอมพ,ว็เตอรี� เป-นต�น เพ� อส� อถึ)งเน�$อหาท น�าเสนอในเว็�บไซต�

หล!งจากน!$นก�จะเข�าส�"หน�าเว็�บเพจส�าหรี!บจ!ดการีเว็�บไซต�ของผู้��ด�แลเว็�บไซต� (adminstator) หรี�อ หน�าคว็บค0มหล!ก (control panel)

• หน�าคว็บค�มหลี่ ก (Control Panel)• หน�าคว็บค0มหล!ก เป-นหน�าเว็�บเพจท รีว็บรีว็มเครี� องม�อท ใช้�จ!ดการี

ส"ว็นต"างๆ ของเว็�บไซต�ท สรี�างข)$นด�ว็ย Joomla ซ) งปรีะกอบด�ว็ย 4 ส"ว็นด!งน$

• เป-นเมน�หล!ก (Menu Bar)• แถึบเฮดเดอรี� (Header Bar)• แผู้งไอคอนทางล!ด (Quick Icon panel)• สถึ,ต,การีใช้�งาน

A: แถบเมน�หลี่ ก (Menu Bar)• แถึบเมน�หล!ก เป-นแถึบท รีว็บรีว็มกล0"มเครี� องม�อปรีะเภทเด$ย

ว็ก!นของ Joomla ไว็�ในเมน�เดยว็ก!น ท�าใหใช้�งานได�ง"ายข)$น ปรีะกอบด�ว็ย 7 เมน� ด!งน$

• เมน� Site ปรีะกอบด�ว็ยเครี� องม�อจ!ดการีเว็�บไซต�• Control Panel : หน�าคว็บค0มหล!ก• My Profile : ต!$งค"าโ)รีไฟล�• Global Configuration : ต!$งค"าการีท�างานของรีะบบโดย

รีว็ม• Maintenance : จ!ดการีเก ยว็ก!บ Checkin,ยกเล,กการีล5

อกเคลยรี�แคช้• System Information : จ!ดการีเก ยว็ก!บเซ,พเว็อรี� เช้"น ค"า

คอนฟ6กของรีะบบ• Login : ออกจากรีะบบ

เมน� Users ปรีะกอบด�ว็ยเครี� องม�อจ!ดการีผู้��ใช้�เว็�บไซต�• User Manager : จ!ดการีสมาช้,กหรี�อผู้��ใช้�งาน• Groups : จ!ดการีกล0"มผู้��ใช้�งาน• Access Levels : จ!ดการีรีะด!บการีเข�าถึ)งเน�$อหาหรี�อ

บทคว็าม• User Notes : เขยนบ!นท)กไว็�ส�าหรี!บผู้��ใช้�งาน• Mass Mail Users: ส"งเมล�ให�ก!บกล0"มสมาช้,ก

เมน� Menus ปรีะด�ว็ยเครี� องม�อจ!ดการีเก ยว็ก!บเมน�ของเว็�บไซต�• Menu Manager : จ!ดการีรีะบบเมน�• Main Menu : จ!ดการีเมน�หล!กเมน� Content ปรีะกอบด�ว็ยเครี� องม�อจ!ดการีเก ยว็ก!บบทคว็ามของเว็�บไซต�• Article Manager : จ!ดการีเน�$อหาบทคว็าม• Category Manager : จ!ดการีหมว็ดหม�"• Featured Articles : จ!ดการีเน�$อหาท แสดง

หน�าแรีก• Medie Manager : จ!ดการีไฟล�มเดย

เมน� Components ปรีะกอบด�ว็ยเครี� องม�อจ!ดการีเก ยว็ก!บคอมโพเนนต�ต"างๆท ต,ดต!$งเพ� อใช้�งานใน Joomla• Banners : จ!ดการีแบนเนอรี�โฆษณา• Contacts : จ!ดการีรีายช้� อผู้��ต,ดต"อ• Joomla Update : แจ�งเต�อนการีอ!พเดตเว็อรี�ช้! น

Joomla• Messaging : จ!ดการีข�อคว็ามท ส�งมาถึ)งเรีา• Newsfeeds : จ!ดการีข"าว็สารีแบบ RSS• Redirect : จ!ดการีล,งค� URL• Search : จ!ดการีเก ยว็ก!บการีค�นหา• Smart Search : จ!ดการีรีะบบการีค�นหาข�อม�ลอ!จฉรี,ยะ

ในเว็�บไซต� • Weblinks : จ!ดการีก!บรีายช้� อล,งค�

เมน� Extensions ปรีะกอบด�ว็ยเครี� องม�อจ!ดการีต,ดต!$งและถึอนการีต,ดต!$งโปรีแกรีม โมด�ล ปล!:กอ,น เทมเพลต และเครี� องม�อจ!ดการีภาษาบน Joomla• Extension Manager : จ!ดการีก!บโปรีแกรีม

เสรี,ม• Module Manager : จ!ดการีก!บโมด�ล• Plug-in Manager : จ!ดการีก!บเทมเพลต• Language Manager : จ!ดการีก!บภาษาเมน� Help ปรีะกอบด�ว็ยเครี� องม�อเก ยว็ก!บการีช้"ว็ยเหล�อ

B: แถบเฮด้เด้อรี� (Heder Bar)• แถึบเฮดเดอรี� เป-นแถึบท แสดงรีายละเอยดต"างๆ

ซ) งอย�"ทางด�านม0มขว็าหน�าคว็บค0มหล!ก ปรีะกอบด�ว็ย

C : แผงไอคอนทางลี่ ด้• เป-นพ�$นท รีว็บรีว็มเครี� องม�อท ใช้�บ"อยๆ เพ� อให�ด�แลเว็�บไซต�สามารีถึเป6ดใช้�งานได�

ท!นท ซ) งปรีะกอบด�ว็ย 14 เครี� องม�อ ด!งน$• Add New Article : เพ, มเน�$อหาบทคว็ามใหม"• Article Manager : จ!ดการีก!บเน�$อหาบทคว็าม• Category Manager : จ!ดการีก!บหมว็ดหม�"• Medie Manager : จ!ดการีก!บไฟล�มเดย• Menu Manager : จ!ดการีก!บเมน�• User Manager : จ!ดการีก!บสมาช้,ก• Module Manager : จ!ดารีก!บโมด�ล• Extension Manager จ!ดการีก!บโปรีแกรีมเสรี,ม• Language Manager จ!ดการีก!บภาษา• Global Configuration : ต!$งค"าการีท�างานรีะบบ• Template Manager : จ!ดการีก!บเทมเพลต• Edit Profile : แก�ไขข�อม�ลส"ว็นต!ว็• Joomla is up-to-date : แจ�งเต�อนการีอ!พเดตเว็อรี�ช้! น Joomla• All extensions are ip-to-date : แจ�งเต�อนการีอ!พเดตโปรีแกรีมเสรี,ม

ต"างๆ

D : สถ&ต์&การีใช้�งาน• ผู้��ด�แลเว็�บไซต�สารีถึเรียกด�ข�อม�ลการีเรียกใช้�งานต"างๆ ของ

รีะบบได�ด!งน$

• Last 5 Logged-in Users : ผู้��ด�แลเว็�บไซต�ท ล�อกอ,นเข�ารีะบบล"าส0ด 5 อ!นด!บแรีก

• Top 5 Popular Articles : เน�$อหาบทคว็ามท ถึ�กเป6ดด�ท ส0ด 5 อ!นด!บแรีก

• Last 5 Added Articles : เน�$อหาบทคว็ามท สรี�างข)$นมาล"าส0ด 5 อ!นด!บ

การีก�าหนด้ค)าการีท�างานพ*+นฐานของเว็�บไซต์� (Global Configuration)

เป-นการีปรี!บแต"งหรี�อก�าหนดค"าการีท�างานพ�$นฐานของรีะบบภายในของเว็�บไซต� เช้"น ก�าหนดค"าในการีแสดงเน�$อหาบนเว็�บไซต�, การีก�าหนดค"า SEO เป-นต�น โดยสามารีถึเข�าถึ)งหน�าการีก�าหนดค"ารีะบบได� 2 ว็,ธี ด!งน$• - คล,กเมน� Site > Global Configuration• - คล,กไอคอน Global Configuration ท แผู้ง

คว็บค0มหล!ก

จากน!$นจะเข�าส�"หน�าการีก�าหนดค"าการีท�างานพ�$นฐานของเว็�บไซต� ซ) งแบ"งออกเป-น 4 ส"ว็น ค�อ Site, System, Server, Permissions และ Text Filter ด!งภาพ

การีก�าหนด้ค)าในส)ว็น Site• ส"ว็นน$จะเป-นการีปรี!บแต"งการีท�างานของส"ว็นท เก ยว็ข�องก!บหน�าเว็�บไซต�

Site Settings เป-นการีก�าหนดค"าในการีแสดงเน�$อหาบนหน�าเว็�บไซต� โดยมรีายละเอยดด!งน$• Site Name : ก�าหนดช้� อของเว็�บไซต� ซ) งจะแสดงในไตเต,ลบารี�ของหน�าต"างผู้��ด�แลรีะบบ• Site Offline : ก�าหนดเป6ด/ป6ดเว็�บไซต�ช้! ว็ครีาว็• Offline Message : เล�อกก�าหนดข�อคว็ามท ใช้�แสดงแทนเน�$อหาบทคว็ามขณะป6ดเว็�บไซต�ช้! ว็ครีาว็• Custom Message : ก�าหนดข�อคว็ามท ใช้�แสดงขณะท ป6ดเว็�บไซต�ช้! ว็ครีาว็• Default Editor : เล�อกเอด,เตอรี�ในการีสรี�างเน�$อหาบทคว็าม• Default Access Level : เล�อกรีะด!บของผู้��ท สามารีถึเข�าช้มเว็�บไซต� • Default List Limit : ก�าหนดจ�านว็นรีายการีข�อม�ลท ให�แสดงในแต"ล"ะหน�าของเว็�บไซต�• Default Feed Limit : ก�าหนดจ�านว็นห!ว็ข�อของเน�$อหาท แสดงใน feed ในเว็�บไซต�ท ถึ�กด)งไปแสดง

บนเว็�บอ� นๆ

NoteSearch Engine เป-นเครี� องม�อปรีะเภทเว็�บไซต�ท ใช้�ส�าหรี!บ

ค�นหาข�อม�ล โดยใช้�โปรีแกรีมอ!ตโนม!ต,ท เรียกว็"า Spider หรี�อ Robot ในการีเก�บรีว็บรีว็มคย�เว็,รี�ด (Keyword) และรีายละเอยด (description) เก ยว็ก!บเว็�บไซต�ต"างๆการีก�าหนด้ค)าในส)ว็น System

ในส"ว็นน$จะก�าหนดค"าให�ก!บรีะบบ (ซ) งบางส"ว็นไม"จ�าเป-นต�องปรี!บแก�ไขค"าใดๆ) โดยแบ"งเป-น 4 ส"ว็นด!งน$

System settings เป-นการีก�าหนดค"าให�ก!บรีะบบ• Path to Log Folder : ก�าหนดพาธีส�าหรี!บเก�บบ!นท)กค"า Login ในการีใช้�งาน• Help Server : เล�อกเซ,รี�ฟเว็,อรี�ของข�อม�ลส�าหรี!บช้"ว็ยเหล�อการีใช้�งานDebug Settings เป-นการีก�าหนดค"าเก ยว็ก!บจ0ดบกพรี"องการีท�างานให�ก!บรีะบบ • Debug System : ก�าหนดให�แสดงจ0ดบกพรี"องการีท�างานบรี,เว็ณส"ว็นล"างส0ดของ

หน�าเว็�บไซต�หรี�อไม"• Debug Lanquage : ก�าหนดให�แสดงจ0ดบกพรี"องการีท�างานของภาษาบรี,เว็รีส"ว็น

ล"างส0ดของหน�าเว็�บไซต�หรี�อไม"•  Cache Setting เป-นการีก�าหนดค"าเก ยว็ก!บการีใช้�งานหน"ว็ยคว็ามจ�าแคช้ โดยมลายละเอยดด!งน$• Cache : เล�อกให�เป6ดใช้�งานหน"ว็ยคว็ามจ�า Cache หรี�อไม" ซ) งจะท�าให�การีด)งข�อง

ม�ลออกมาแสดงผู้ลท�าได�เรี�ว็ย, งข)$น• Cache : Handler : เล�อกก�าหนดท อย�"ส�าหรี!บเก�บ Cache• Cache : ก�าหนดเว็ลาในการีใช้�งานแคช้ (ค"าปกต,ค�อ 15 )Session Settings เป-นการีก�าหนดรีะยะเว็ลาการีใช้�งาน • Session Lifertime : ก�าหนดรีะยะเว็ลาการีเข�าใช้�งานในรีะบของผู้��ด�แลรีะบบ (ค"า

ปกต,ค�อ 15)• Session Handler : ก�าหนดท อย�"ส�าหรี!บเก�บข�อม�ลการีเข�าใช้�งาน

การีก�าหนด้ค)าในส)ว็น Serverส"ว็นน$เป-นการีก�าหนดค"าให�ก!บรีะบบของเซ,รี�ฟเว็อรี�ท!$งหมด

โดยแบ"งการีก�าหนดค"าออกเป-น 5 ส"ว็นด�ว็ยก!น

• Sever Settings เป-นการีก�าหนดค"ารีะบบเซ,รี�ฟเว็อรี� โดยมรีายละเอยดด!งน$• Location Settings เป-นการีก�าหนดเว็ลาให�เซ,รี�ฟเว็อรี�• FTP Settings เป-นการีก�าหนดรีายละเอยดการีใช้�งาน FTP• Database Settings ก�าหนดรีายละเอยดการีท�างานเก ยว็ก!บฐานข�อม�ล• Mail Settings เป-นการีก�าหนดรีายละเอยดการีใช้�งานเก ยว็ก!บอเมล�

การีก�าหนด้ค)าในส)ว็น Permission Settings

ส"ว็นน$เป-นการีก�าหนดรีะด!บการีเข�าถึ)งและจ!ดการี เพ, ม ลบ แก�ไขข�อม�ลในส"ว็นต"างๆ ของเว็�บไซต�ในแต"ละส"ว็นส�าหรี!บผู้��ใช้�งานท!$งหมด ไม"ว็"าจะเป-นสมาช้,กหรี�อบ0คคลท! ว็ไป โดยการีก�าหนดรีะด!บการีเข�าถึ)งในแต"ละส"ว็นมรีายละเอยดด!งน$

• Site Login : ก�าหนดการีเข�าถึ)งการีล5อกอ,นจากหน�าเว็�บไซต�• Admin Login : ก�าหนดการีเข�าถึ)งการีล5อกอ,นของผู้��ด�แล

รีะบบจากหน�าเว็�บไซต�• Offline Access : ก�าหนดการีเข�าถึ)งการีก�าหนดค"ารีะด!บ

Super Admin• Access Administration Interface : ก�าหนดการีเข�า

ถึ)งการีจ!ดการีในส"ว็นการีท�างานต"างๆของผู้��ด�แลรีะบบ• Create : ก�าหนดการีเข�าถึ)งเก ยว็กล!บการีสรี�างใหม" เช้"น

สรี�างบทคว็าม• Delete : ก�าหนดการีเข�าถึ)งเก ยว็ก!บการีลบ เช้"น การีลบ

บทคว็าม• Edit : ก�าหนดการีเข�าถึ)งเก ยว็ก!บการีไข เช้"น แก�ไขบทคว็าม 

การีก�าหนด้ค)าในส)ว็น Text Filtersในส"ว็นน$เป-นการีจ�าก!ดหรี�ออน0ญาตการีใช้�งานบางอย"างให�

แต"ละกล0"มผู้��ใช้�งาน เช้"น การีอน0ญาตให�ผู้��ด�แลรีะบบหรี�อ Super users สามารีถึใส"แท�ก<script> หรี�อ <iFrame> เป-นต�น