วิธีการทำ Rate stars จากคนที่ไม่เคยทำมาก่อน (เห้อมมม -..-)
ก่อนเราจะเริ่มเรียนรู้กัน เราต้องยิ้มให้กับมันค่ะ เเล้วบอกกับตัวเองว่า เห่ยย มันง่ายฝุดๆเลยเอาะ (ให้กำลังใจตัวเอง 55555+) Positive Thinking ค่ะ ง่ายๆสบายๆ :)
โอเคงั้นมาเริ่มกันเล้ย พอดีครีมได้มีโอกาสมาฝึกงานที่ บริษัท IBG หรือ บริษัทเเสนรู้ อันโด่งดังของเราค่ะ เเล้วมีโปรเจคที่เราต้องทำ ครีมก็ได้มาลองทำ Rate stars ค่ะซึ่งอาจจะเป็น basic ของใครหลายคนเเล้ว5555+ ตอนเเรกครีมก็ไม่รู้ค่ะว่า ไอ Rate stars อ่ะมันทำไงก็เลยลอง search google ดู ก็เลยมาเจอ “http://rateyo.fundoocode.ninja” เว็บนี้ค่ะ มีให้เลือกหลายเเบบเลย ตอนเเรกก็นั่งก่งก๊งว่ามันใช้ยังไง ครีมก็เลยงัดสกิลภาษาอังกฤษขึ้นมาใช้ค่ะ (ซึ่งมีน้อยมาก)+ขอความช่วยเหลือจากพี่ๆค่ะ ต่อไปเป็นขั้นตอนวิธีการทำกัน
- ก่อนอื่นต้อง bower install rateyo ก่อนค่ะ ง่ายๆค่ะไปรันใน node.js command
- เมื่อ bower สำเร็จเเล้วเราสามารถตรวจหาโฟลเดอร์ของไฟล์ที่เรา install ได้ค่ะ ชื่อไฟล์ก็คือ rateYo (บอกก่อนค่ะครีมใช้เป็น mean stack เมื่อเรา install เเล้วเราสามารถหาชื่อไฟล์ rateYo นี้ได้ในเลยไฟล์ bower) โดยในไฟล์ rateYo จะมีให้เราหมดเลยค่ะไม่ว่าจะเป็น css js หรือ ไฟล์ json มันจะมีให้หมดเลยค่ะ ง่ายมากๆ
- จากนั้นเราก็นำโค้ดมาใส่ได้เลยค่ะ โดยจะเเบ่งเป็น 2 ส่วนคือ ส่วน html เเละ js ถ้าเป็น <div id=”rateYo”></div> ใส่ส่วนที่เราต้องการที่จะใส่เลยค่ะ ต่อไปคือ โค้ดที่เราจะนำไปใส่ใน controller.js คือ
$(function () {
$(“#rateYo”).rateYo({
rating: 3.2,
readOnly: true
});
});
4. จากนั้นก็ Runเลยค่ะ เเต่ปัญหาที่ครีมพบคือ เหมือน css จะไม่ทำงาน เลยต้องไปเเก้ที่โฟลเดอร์ rateYo เข้าไปที่ไฟล์ bower.json ปรากฎว่า css ของ rateYo ยังไม่เข้าก็เลยต้องเข้าไปเพิ่ม ในส่วนของ “mian” ก็เเก้เป็น “main”: [“src/jquery.rateyo.js”,”src/jquery.rateyo.css”], เพียงเท่านี้ เราก็ได้ดาว ทั้ง 5 ดวงของเราเเล้วว วู้วๆๆ
ปล. ดาวของครีมที่ทำนี้ไม่ใช่ Rate ที่ให้คะเเนนได้นะคะ ที่ครีมเอามาคือ Read ได้อย่างเดียวค่ะ เเต่ไม่ต้องกังวล ในเว็บที่ครีมเเปะไว้ให้ก่อนหน้านี้มีทุกเเบบเลยค่ะ เเค่ทำตามวิธีที่ครีมเเนะนำก็ทำได้เหมือนกันนะ อิอิ