เล่าเบื้องหลังการสร้าง www.psudev.info

“กรุงโรมไม่สร้างแค่วันเดียว” ฉันใดฉันนั้นเพื่อให้เครือข่ายนักพัฒนาแอพพลิเคชั่น (เหล่าโปรแกรมเมอร์) ของมหาวิทยาลัยสงขลานครินทร์ เกิดการร่วมกลุ่มกันอย่างเป็นรูปธรรมกันมากขึ้น จึงมีแนวคิดจะสร้างเว็บไซต์ลักษณะที่เป็นฐานข้อมูลรวบรวมรายชื่อสเหมือนสมุดหน้าเหลือง (เด็กสมัยใหม่อาจจะงง!) www.psudev.info เพื่อเป็นข้อมูลไว้ติดต่อกันสามารถค้นหาได้สะดวก คอนเซปคือต้องพัฒนาได้ง่ายและรวดเร็ว เป็น https ไม่ต้องเสียค่า cert สามารถออนไลน์ได้ทั่วโลก ไม่มีวันล่ม ไม่ต้องดูแลอินฟา และไม่รอช้าานั่นเริ่มกันเลยครับ…

Tools เครื่องมือในการพัฒนา

  1. Google Site (https://sites.google.com/)
  2. Awesome-table (https://awesome-table.com/)
  3. จดชื่อโดเมนเนม (จดเจ้าไหนก็ได้ ผมจดกับ z.com เนื่องจากมีโปรฯลดราคา)

ขั้นตอนการทำ

1.เริ่มจากสร้างตัว AwesomeTable ไปที่ https://awesome-table.com/  แล้ว AwesomeTable คืออะไร?  AwesomeTable เป็นเว็บที่ทำ data table ในรูปแบบต่างๆ ซึ่งจะมี template ให้เลือกใช้งานหลากหลายแบบ โดยที่ตัวตารางจากลิงค์กับฐานข้อมูล Google Sheet เราสามารถแก้ไข css ได้ตามความต้องการ เมื่อทำเสร็จแล้วสามารถนำไปแทรกใน Google Site ได้เลยยย


เลือกรูปแบบ template ของ data table ที่ต้องการ

คลิกแก้ไข Data source เพื่อแก้ไขฐานข้อมูล

ระบบจะเปิดเป็น Google Sheet ขึ้นมาให้นำข้อมูลเพิ่มในแท๊บ Data และตกแต่งหน้าแสดงผลในแท๊บ Template

เมื่อทำเสร็จแล้วให้แชร์ไฟล์ Google Sheet แบบ public แบบทุกคนที่มีลิงค์สามารถเข้าถึงได้ เพื่อให้สามาถแสดง AwesomeTable แบบไม่ต้องลิอกอิน

2.สร้างเว็บไซต์ด้วย Google Site (https://sites.google.com/) ให้ใช้บัญชี gmail ส่วนในการสร้าง เพราะถ้าใช้แบบองค์กร (psu.ac.th) อาจจะมีปัญหาต้องเปลี่ยนโดเมนเนม ทำการแทรก AwesomeTable บนเว็บตามวิธีนี้ครับ https://support.awesome-table.com/hc/en-us/articles/115001545289-Embed-Awesome-Table-on-the-New-Google-Sites

3. การเปลี่ยน URL ชื่อโดเมนเนม ให้ไปซื้อโดเมนที่ต้องการของผมใช้บริการ z.com ข้อดีคือซัพเพอร์เป็นภาษาไทย แต่ข้อเสียคือ dns ออนไลน์ช้าและคอนฟิกยากกว่าเจ้าใหญ่ๆ หากจะแนะนำให้ไปจดกับ GoDaddy.com หรือ Namecheap.com เพราะจะซัพเพอร์ Google site ง่ายกว่า สรุปคือผมได้ทำตามคำแนะนำของทาง z.com แล้วตามลิงค์นี้แต่ Verified ไม่สำเร็จ (ขณะว่ารอนาน 5-6 วัน) https://support.netdesignhost.com/knowledgebase/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD-add-%E0%B8%84%E0%B9%88%E0%B8%B2-google-blogger-g-suite-google-site/

เบื้องต้นในการ Verified URL ให้ท่านทำตามขั้นตอนที่ google แนะนำโดยเลือก ผู้ให้บริการ domain name ที่ท่านซื้อมาและทำตามขั้นตอนวิธีการยืนยัน (แต่ละเจ้าขั้นตอนไม่เหมือนกัน)

เมื่อเสร็จให้รอ DSN update เป็นเวลา 1-24 ชั่วโมง สามารถเข้าไปตรวจสอบได้ที่เว็บไซต์ https://dnschecker.org หากสำเร็จเมื่อกลับไปแก้ไข URL อีกครั้งจะได้เครื่องหมายถูก และที่ Webmater Central จะมีเป็นข้อความ You are already a verified owner of www.psudev.info.

หากไม่สำเร็จมีข้อความแจ้งประมาณว่า Verification failed. Your verification DNS TXT record was not found. You might need to wait a few minutes before Google sees your changes to the TXT records.
ให้ดำเนินการเพิ่มเติมดังนี้ ให้เพิิ่ม DNS TXT record ของ Google Search Console ที่  domain name provider ไปที่ https://search.google.com/search-console


คลิกเพิ่มพร๊อพเพอร์ตี้

พิมพ์ชื่อโดเมนเนม และคลิกปุ่มดำเนินงานต่อ

ก๊อปปี้ TXT ไปใส่ DNS ของผู้ให้บริการ รอประมาณ 1 วัน (ของเก่าไม่ต้องลบ) จากให้มายืนยันที่ Google Search Console อีกครั้ง หากยืนสำเร็จ ให้ไปลองเปลียน URL ที่ Google Site อีกครั้ง
ค่าคอนฟิกสุดท้ายที่ใช้งานได้จะประมาณนี้ (z.com)

สำหรับท่านที่ติดปัญหาสามารถสอบเข้ามาได้ครับ… สุดท้ายอยากฝากเว็บไซต์ www.psudev.info ถึงโปรแกรมเมอร์ของ ม.อ. ขอความอนุเคราะ์เข้าไปลงทะเบียนด้วนนะครับขอบคุณครับ

1 comment for “เล่าเบื้องหลังการสร้าง www.psudev.info

  1. คณกรณ์ หอศิริธรรม
    May 7, 2019 at 4:18 pm

    เยี่ยม

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.