วันเสาร์, ธันวาคม 5

การพัฒนาเว็บไซต์

7-5 การจัดการสมาชิก (User) บนเว็บไซต์ Joomla
การพัฒนาเว็บไซต์

7-5 การจัดการสมาชิก (User) บนเว็บไซต์ Joomla

ส่วนต่อไปที่เราจะพูดถึงการจัดการของ User หรือว่าผู้ใช้งานว่าจะมีอะไรกันบ้าง ไปที่สมาชิกและไปที่การจัดการสมาชิก ตอนนี้ที่เราเห็นอยู่ก็จะเป็น Superuser ที่เราใช้ลองคลิ๊กเข้าไปดูก่อนก็ได้ ก็จะเป็น User ที่เราสร้างไว้ตั้งแต่ตอนแรกเลยในการติดตั้ง ต่อไปเดี๋ยวผมจะลองสร้าง User ขึ้นมาสัก 1 คน ต้องการจะสร้างลองดูให้มีความแตกต่างกันดังนี้ ต้องกำหนดเป็นตามตัวอย่างคือเป็นการสมัครเองด้วยตัวเราแล้วก็บันทึก ในหน้าซื้อขายลองล็อกอินเข้าดูว่าเป็นยังไง ก็จะเป็นสวัสดี user1 แสดงว่า user1 ได้ล็อกอินเข้ามาแล้ว สามารถเข้ามาช็อปปิ้งอะไรได้ตามเว็ปไซต์ต่างๆนะครับ ผมจะลองเพิ่ม user อีกสักคนนึง แต่เป็นประเภทอื่นลองเป็น Manager บ้าง เห็นถึงความแตกต่างไหมครับ ผู้บริหารเว็ปก็สามารถทำต่างๆดังกล่าวมาได้เพียงเท่านี้ ส่วนอื่นๆก็ไม่สามารถที่จะทำได้ก็เป็นฟังก์ชั่นจะทำงานได้น้อยลงนั้นเอง ก็เป็นหลักของเว็บไซต์ที่จะต้องมีการ...
แนะนำเนื้อหาสัปดาห์ที่ 6 : รู้จักและติดตั้ง Joomla และ VirtueMart เพื่อพัฒนาเว็บไซต์
การพัฒนาเว็บไซต์

แนะนำเนื้อหาสัปดาห์ที่ 6 : รู้จักและติดตั้ง Joomla และ VirtueMart เพื่อพัฒนาเว็บไซต์

สวัสดีครับ มาถึงสัปดาห์นี้นักศึกษาได้เรียนรู้เกี่ยวกับการออกแบบกราฟิก การใช้สีการออกแบบสัญลักษณ์รวมถึงได้เรียนรู้เกี่ยวกับ HTML5 และ CSS3 มาแล้วด้วยนะครับ ซึ่งในการเขียนเว็บไซต์ที่ดีจะต้องมีองค์ประกอบที่ครบถ้วน จากที่นักศึกษาได้เรียนมาในการเขียนโปรแกรมจะมีความยากมากนะครับ ในสัปดาห์นี้ ผมจะสอนให้รู้จักเครื่องมือที่ใช้ในการสร้างเว็บไซต์ e-Commerce ได้อย่างง่าย ๆ เลย โดยใช้ระบบบริหารจัดการที่เรียกว่า CMS นั่นเอง โดยในระบบ e-Commerce นะครับ ที่ได้รับความนิยมก็คือ Joomla เป็นเว็บ e-Commerce ที่ได้รับความนิยมมาก ณ เวลานี้ซึ่งในบทเรียนนี้จะมีเนื้อหา 4 หัวข้อได้แก่ 1. ทำความรู้รัก Joomla และ VirtueMart เราจะมาเรียนรู้กันว่า Joomla และ VirtueMart มีข้อดีอย่างไรมีประโยชน์อย่างไรนั่นเอง 2. การติดตั้ง Joomla และ VirtueMart ก่อนที่เราจะติดตั้ง Joomla และ VirtueMart เราจะต้องติดตั้งจำลองเว็บเซิร์ฟ...
6-6 วิธีการสำรอง (Backup) และกู้คืน (Restore) ข้อมูลเว็บไซต์
การพัฒนาเว็บไซต์

6-6 วิธีการสำรอง (Backup) และกู้คืน (Restore) ข้อมูลเว็บไซต์

หัวข้อต่อไปก็คือ วิธีการสำรองข้อมูลBackup ข้อมูลนะครับ มาดูว่ามีสิ่งที่เราจะต้องสำรองข้อมูลในเว็บไซต์มีอะไรบ้างนะครับ ตรงนี้ในการสำรองข้อมูลของเว็บไซต์ Joomla &Virtuemart นะครับ ประกอบด้วย 2 ส่วนส่วนแรกก็คือข้อมูลเว็บไซต์นั่นเอง เว็บไซต์ของ Joomla & Virtuemart เราต้องทำการ Backup อีกส่วนหนึ่งก็คือจะเป็นฐานข้อมูลของ Mysql มาดูวิธีการ Backup กันเลยละกัน ว่าเราจะต้องทำอย่างไรบ้าง อันดับแรกเว็บไซต์ของ Joomla นะครับ เราก็ต้อง เราก็ต้องไปที่ MyComputer นะครับ Disk (C:) แล้วก็เลือกที่ Xampp นะครับ แล้วก็ htdocs ตรงนี้ได้กล่าวไปแล้วคือตัวที่เก็บเว็บไซต์นั่นเองนะครับ ก็ทำการ Copy เว็บไซต์ที่เราต้องการไปพักไว้หรือสำรองไว้ ก็ตรงนี้เราจะทำการ Backup ของตัว Mysql แล้วก็คลิกขวา Copy มานะครับ ผมจะเอาไว้ที่ Disk (C:) แล้วก็สร้าง folder ไว้ด้วยกันนะครับ folderใหม่ว่า ว่า A...
แนะนำเนื้อหาสัปดาห์ที่ 7 :  การปรับแต่งส่วนการใช้งานต่างๆ บนเว็บไซต์ Joomla
การพัฒนาเว็บไซต์

แนะนำเนื้อหาสัปดาห์ที่ 7 : การปรับแต่งส่วนการใช้งานต่างๆ บนเว็บไซต์ Joomla

สวัสดีครับ หลังจากสัปดาห์ที่แล้วเราได้เรียนรู้เกี่ยวกับการติดตั้งการปรับค่าเบื้องต้นและการ Backup ข้อมูล การกู้คืนข้อมูลของ Joomla Virtuemart ไปแล้วนะครับ ในสัปดาห์นี้เราก็จะมาเพิ่มประสิทธิภาพให้กับเว็ปไซต์ของเรา เช่น การปรับ แต่ง Template การกำหนดสิทธิ์ผู้ใช้งานการเขียนบทความเพิ่มเข้าไปใน Joomla และ Virtuemart ว่าจะทำอย่างไรกันบ้างในสัปดาห์นี้หัวข้อที่เราจะเรียนก็ก็ประกอบด้วยทั้งหมด 5 หัวข้อเรื่องแรกก็คือเรื่องการปรับ แต่งรูปแบบของ Template นั้นเองเราจะใช้ Template มาเปลี่ยนให้มันสวยงามและน่าสนใจได้อย่างไร เรื่องที่ 2 คือการใช้งานหรือการเขียนบทความลงบน Joomla และ Virtuemart มาดูว่าเราจะเพิ่มบทความลงไปจะแจ้งข่าวสารอะไรให้กับลูกค้าอย่างไรกันบ้าง เรื่องที่ 3 คือการปรับ แต่งเมนูจะปรับ แต่งเมนูได้อย่างไร ส่วนเรื่องที่ 4 คือเรื่องการจัดการพวก Component , Module ต่างๆ ของเว็ปไซต์ เราจะเพิ...
5-8 การจัด Layout ด้วยตาราง
การพัฒนาเว็บไซต์

5-8 การจัด Layout ด้วยตาราง

สวัสดีครับ หัวข้อนี้ก็เป็นหัวข้อสุดท้าย ของเนื้อหาในสัปดาห์ที่5กันแล้วนะครับ ซึ่งในหัวข้อนี้นักศึกษาจะได้เรียนรู้การนำเอาตาราง เข้าไปช่วยในการจัด Layout ของเนื้อหาบนหน้าเว็บ หลังจากที่เราเรียน การใช้ CSS ในการจัด Layout มาแล้ว ซึ่งลักษณะของการใช้ตารางเข้ามาช่วยในการจัด Layout ก็จะใช้ประกอบกับแท็ก พื้นฐานต่างๆที่ใช้ในการจัดLayout ไม่ว่าจะเป็น header footer nav หรืออื่นๆ ซึ่งเราจะต้องอาศัยการ ออกแบบ ว่าเราต้องการแบ่งเนื้อหาเป็นกี่แถวกี่คอลัมน์ แล้วเราก็จะสร้างตารางลักษณะไหนเข้าไป ซึ่งนักศึกษาจะได้ ฝึกปฎิบัติเเละทำความเข้าใจกัน ถ้านักศึกษาพร้อมแล้วเข้าโปรแกรมNetBeansได้เลย พอเราเข้ามาในโปรแกรมNetBeansกันแล้ว โดยอันดับแรกอาจารย์จะใส่ รูปภาพเป็นพื้นหลังให้กับตัวเว็บไซต์ก่อน ก็คือใช้แท็ก body แล้วก็ใส่ Background - images url จากนั้นก็ใส่ชื่อรูปภาพ แล้วก็ save แล้วก็ลองรันดู นี่คือภาพพื้นห...
5-7 การสร้างตาราง
การพัฒนาเว็บไซต์

5-7 การสร้างตาราง

สวัสดีครับ ในหัวข้อนี้จะเป็นหัวข้อเกี่ยวกับการสร้างตาราง ซึ่งตารางก็เป็นก็เป็นตัวหนึ่งที่ถูกนิยมนำมาใช้ในเว็บไซต์เป็นจำนวนมาก ไม่ว่าจะเป็นการใส่ข้อมูลงลงในตารางหรือแม้ แต่การนำตารางไปช่วยในการจัดวาง Layout ของเนื้อหา ซึ่งนักศึกษาควรทำความเข้าใจและฝึกปฏิบัติให้เป็นนะครับ ซึ่งใน หัวข้อการสร้างตารางนะครับ สิ่งที่เราจะเรียนรู้ก็คือ การสร้างแถว สร้างคอลัมน์นะครับ แล้วก็การรวมแถว รวมคอลัมน์รวมถึงการปรับ แต่งตารางสามารถทำได้อย่างไงบ้าง ถ้านักศึกษาพร้อมแล้วเข้าไปในโปรแแกรมNetBeansกันได้เลยนะครับ ในการสร้างตารางนะครับ เราจะใช้<table>มาช่วยในการสร้าง นักศึกษาก็พิมพ์<table>ลงไปซึ่ง <table เราสามารถกำหนดรายละเอียดเข้าไปได้ ว่าต้องการในตารางเรามีเส้นขอบขนาดเท่าไหร่ สมมุติอาจารย์ตั้งเป็น border="1" นะครับ ซึ่ง<table>เป็นแ...
5-6 การจัด Layout ด้วย CSS3
การพัฒนาเว็บไซต์

5-6 การจัด Layout ด้วย CSS3

สวัสดีครับ ในหัวข้อนี้นะครับ จะเป็นการใช้คำสั่ง CSS3 ในการจัด Layout ของเนื้อหาที่เราใส่ลงเว็บไซต์นะครับ ซึ่งในการจัด Layout ของเนื้อนะครับ มันมีหลาย คำสั่งที่สามารถใช้ในการจัด Layout ได้นะครับ ซึ่งอาจารย์หยิบยกมา 2คำสั่ง ถ้านักศึกษาพร้อมแล้วในไปในโปรเเกรม NetBeans ได้เลยนะครับ เมื่อเข้ามาในโปรเเกรม NetBeans กันแล้วนะครับ เราจะลองใส่เนื้อหาที่เป็นข้อความกันก่อนนะครับ เพื่อฝึกในการจัด Layout กันนะครับ ซึ่งข้อความเราก็จะอาศัยข้อความ lorem เหมือนเดิมนะครับ ก็ไปที่เมนู source นะครับ เลือกที่ insert code แล้วก็คลิกที่ข้อความ lorem นะครับ สมมุติอาจารย์เอาเเค่ 1 paragraphก่อนนะครับ เป็น tag div แล้วก็ Generate ไป จากนั้นเราจะไปปรับเเต่งตัว tag div ตัวนี้กันก่อนนะครับ อาจารย์ต้องการให้ความกว้างของตัวนี้มีเเค่ 30% ของหน้าจอนะครับ แล้วก็ใส่ Background color นะครับ เป็นสี...
5-5 การตกแต่งแบบฟอร์ม
การพัฒนาเว็บไซต์

5-5 การตกแต่งแบบฟอร์ม

สวัสดีครับ ในหัวข้อนี้นะครับ จะเป็นการปรับ แต่งรูปแบบของฟอร์มที่เราสร้างขึ้นมานะครับ ซึ่งเป็นหัวข้อสุดท้ายของการปรับ แต่งส่วนแสดงผลด้วยภาษา CSS3 นะครับ ซึ่งในการตก แต่งฟอร์มนะครับ เราก็สามารถตก แต่งได้หลายรูปแบบนะครับ ซึ่งนักศึกษาจะได้เรียนรู้และฝึกปฎิบัติกัน ถ้านักศึกษาพร้อมแล้วเข้าโปรแกรมใน NetBeans กันได้เลยนะครับ เมื่อเข้ามาในโปรแกรม NetBeans แล้วนะครับ เราก็จะมาลองสร้างฟอร์มตัวอย่างขึ้นมานะครับ อันดับแรกก่อนนะครับ ในลักษณะของการสร้างแบบฟอร์มก็คือจะเกี่ยวข้องกับ Tag ฟอร์มที่เราสร้างขึ้นมา ดังนั้น ถ้าเราต้องการเปลี่ยนสีพื้นหรือแม้ แต่ใส่รูปพื้นหลังให้กับตัวแบบฟอร์มนะครับ เราก็สามารถทำได้ โดยเรียกใช้ CSS ของตัวอ้างอิง Tag ฟอร์มขึ้นมาก่อนนะครับ จากนั้น เช่นอาจารย์ต้องการใส่สีพื้นอาจารย์ก็เรีบกใช้คำสั่ง Background-color นะครับ สมมุติให้เป็นสีชมพูนะครับ เรา...
5-4 การตกแต่งรูปภาพ และวีดีโอ
การพัฒนาเว็บไซต์

5-4 การตกแต่งรูปภาพ และวีดีโอ

สวัสดีครับ ในหัวข้อนี้จะเป็นการปรับ แต่งรูปภาพและVDO โดยใช้คำสั่ง CSS3ในการปรับ แต่งเราจะมาดูว่ารูปภาพและ video เราสามารถปรับ แต่งอะไรได้บ้าง ซึ่งการปรับ แต่งเราก็สามารถใส่เส้นกรอบของรูปภาพ video ได้ นะครับ สามารถปรับส่วนโค้งในการแสดงเส้นกรอบขึ้นมาได้นะครับ ว่าเราต้องการให้ แต่ละมุมของเส้นกรอบมีความโค้งเท่าไร หรือสามารถใส่แสงเงาให้กับตัวเส้นกรอบของตัว video และรูปภาพ ที่เราใส่ลงไปได้ว่าต้องการให้มีแสดงเงาประมาณไหนและก็สามารถประยุกต์และสามารถนำไปประยุกต์ใช้กับเรื่องอื่นได้ ได้เช่นกันนะครับ ถ้านักศึกษาพร้อมแล้วเข้าโปรแกรม NetBeans ได้เลยนะครับ ในการใส่เส้นขอบหรือเส้นกรอบให้กับตัวรูปภาพหรือ video เพื่อให้มันมีความสวยงามมากยิ่งขึ้น เราก็สามารถใช้คำสั่ง CSS3 ในการจัดการได้ ดังนั้นเราเข้าไปใน เราเข้าใน CSS3 เหมือนเดิม ต้องการใส่เส้นกรอบให้กับรูปภาพหรือ video ในที่นี้ อาจารย์ ขออ...
5-3 การตกแต่ง Tag พื้นฐานของภาษา HTML5
การพัฒนาเว็บไซต์

5-3 การตกแต่ง Tag พื้นฐานของภาษา HTML5

สวัสดีครับ ในหัวข้อนี้นะครับ เรายังอยู่กับการแสดงผลด้วย CSS3 ซึ่งในส่วนนี้จะเป็นการปรับ แต่งโดยใช้ Tag พื้นฐานของภาษา HTML5 ว่าเราสามารถปรับ แต่งอะไรได้บ้างสำหรับเนื้อหาที่เราใส่ไปในเว็บไซต์ ซึ่งในการปรับ แต่งนะครับ เราสามารปรับ แต่งเนื้อหาได้หลายรูปแบบไม่ว่าจะเป็น การใส่สีพื้นหรือรูปภาพพื้นหลังให้กับหน้าเว็บเพจ การปรับตำแหน่งนะครับ การ แต่งสีตัวอักษร รูปแบบตัวอักษรหรือแม้ แต่ขนาดนะครับ เราก็สามารถปรับ แต่งได้ซึ่งนะศึกษาจะได้เรียนรู้ได้ในหัวข้อนี้ และทำความเข้าใจพร้อมฝึกปฏิบัติตามกัน ถ้านักศึกษาพร้อมแล้วเข้าที่โปรแกรม NetBeans กันได้เลยนะครับ เมื่อเข้ามาที่โปรแกรม NetBeans กันแล้วนะครับ ให้นักศึกษา ลองใส่เนื้อหาลงในหน้า เว็บเพจดูซึ่ง ถ้าอาจารย์ลองรันโปรกรมดูนะครับ ก็จะเห็นว่าเนื้อหาที่อาจารย์ใส่ก็จะมีตั้งแต่ รูปภาพ ลิงค์เชื่อมโยง มีวิดิโอ และก็มีข้อความต่างๆ ที่อาจารย์...