การพัฒนา ASP.NET Web Application

แก้ปัญหาการเรียกใช้ font ผ่าน css แล้วเกิด error Access to font at has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

by

เนื่องด้วยทางทีมงานต้องการใช้ font ผ่าน css ที่อยู่คนละที่ โดยต้องการให้ไปเรียกที่เดียวเพื่อการจัดการง่าย แต่ปัญหาก็เกิดขึ้น เพราะทางต้นทางมีการ block ไม่ให้เข้าถึง วันนี้จึงมีแนวทางการแก้ปัญหาดังนี้ ขั้นตอนที่ 1 ไปตั้งค่าไฟล์ font ที่ต้องการ โดยในที่นี้ เป็น folder fonts โดยไปที่ IIS เลือก folder ที่ต้องการ จากนั้นเลือกเมนู “HTTP Response Headers” จากนั้น กด “Add” ดังรูป ขั้นตอนที่ 2 เพิ่ม Name: Access-Control-Allow-Origin และ Value: * ดังรูป ขั้นตอนที่ 3 ผลลัพธ์จากการเพิ่ม Name: Access-Control-Allow-Origin และ Value: * ดังรูป ขั้นตอนที่ 4 เพิ่ม Name: … Read more

upgrade crystal report version 10 ไปเป็น version 13

by

เนื่องด้วยตอนนี้ crystal report version 10 มันเก่ามากแล้วทางผู้เขียนเลยอยากจะ upgrade crystal report version 10 ไปเป็น version 13 ดังนั้นจึงสรุปขั้นตอนไว้เพื่อเป็นแนวทางการทำงานของคนที่มีปัญหาเดียวกัน ดังนี้ ขั้นตอนที่ 1 แก้ web.config ใน project web application โดยเปลี่ยนเลข version จาก 10.2.3600.0 เป็น 13.0.2000.0 ขั้นตอนที่ 2 copy folder crystalreportviewers13 ใส่ไว้ที่ project web application ขั้นตอนที่ 3 แก้ page ที่เรียกใช้ crystal report โดยเปลี่ยนเลข version จาก 10.2.3600.0 เป็น 13.0.2000.0 ขั้นตอนที่ 4 แก้ … Read more

UX, everything related!

by

เรามักได้ยินคำว่า UI เป็นประจำเมื่อเราพัฒนาระบบแต่ รู้หรือไม่ว่านอกจาก UI แล้วมันมีอีกหนึ่งอย่างที่ควรรู้และสำคัญยิ่งกว่าแต่ถูกมองข้ามไปคือ UX (ย่อมาจาก User experience) หลายๆคนมักจะสับสนว่า UI และ UX มันคือสิ่งเดียวกัน จริงๆแล้วมันคือคนละอย่างกันเลย วันนี้เราจะมาเล่าให้ฟัง UI :: User Interface User Interface คือหน้าตาของระบบที่ผู้ใช้ได้เห็น ได้ตอบสนอง ไม่ใช่ระบบในทางคอมพิวเตอร์อย่างเดียวที่มี UI ถ้าเทียบกับขวดซอสมะเขือเทศ ขวดก็คือหนึ่งใน UI เช่นกันหรืออาหาร 1 จาน หน้าตาของอาหารก็ถือว่าเป็น UI ด้วย “UI เป็นสิ่งที่สามารถมองเห็นได้หรือจับต้องได้“ UX :: User Experience User Experience คือ Experience หรือประสบการณ์ของผู้ใช้ที่เราได้ส่งมอบให้ มากกว่า Interface ที่ผู้ใช้งานได้ตอบสนอง เราจะไป focus ที่ผู้ใช้ใช้สินค้าเราแล้วมีความรู้สึกอย่างไร ผู้ใช้ใช้สินค้าเราแล้วได้บรรลุวัตถุประสงค์ของเราหรือไม่ “UX … Read more

สร้างเงาให้กับวัตถุด้วย SmoothShadow

by

Layer of shadows คือจำนวนชั้นของเงา ปกติโดยทั่วไปเราจะใช้งานกันประมาณ 1-2 layer ซึ่งจำนวนของชั้นเงานี้จะสัมพันธ์กับตัวปรับแต่งด้านล่าง เช่นในรูปตั้งไว้ที่ 4 layers หรือเงา 4 ชั้น เราก็จะสามารถปรับกราฟการไล่เงาซึ่งจะแบ่งไว้ 4 ช่วงของแสงไล่ตั้งแต่ขาวไปดำ 4 ระดับ ถ้าปรับเป็น 7 layers ระบบก็จะซอยช่วงเทาเพิ่มมามากขึ้น ก็จะไล่จากขาวไปดำ 7 ระดับ Final transparency คือความเข้ม/ความโปร่งใสของเงา ค่ายิ่งน้อยเงาของเราจะยิ่งโปร่งแสง(จางขึ้น) ค่ายิ่งมากเงาของเราก็จะยิ่งทึบแสง(เข้มขึ้น) ส่วนของกราฟจะแสดงถึงการไล่แสงของเงา โดยเราจะสามารถดึงจุดวงกลมสีชมพูได้ เพื่อปรับความโค้งของกราฟ เงาก็จะมีการไล่แสงที่ต่างกันออกไป และส่วนของ Reverse alpha คือการกลับกันของเงา ไล่จากขาวไปดำ Final vertical distance คือการไล่แสงในแนวตั้ง ซึ่งจะสามารถไล่แสงได้แค่ทิศทางเดียวคือ แสงจากบนลงล่าง เงาด้านล่างของวัตถุ ยิ่งเพิ่มค่ามากเงาก็จะเพิ่มมาด้านล่างมากขึ้น ค่าลดลงเงาในแนวตั้งก็จะน้อยลง ส่วนกราฟจะแสดงปริมาณของเงาในแต่ละ layer สามารถดึงวงกลมสีชมพูเพื่อปรับแต่งได้ Final blur strength … Read more

การย่อ-ยุบแถวข้อมูลบน GridView โดยประยุกต์ใช้ร่วมกับ jQuery และ Collapse ใน Bootstrap (C#)

by

           จากความเดิมตอนที่แล้ว เราได้พูดถึงวิธีการจัดการข้อมูลจำนวนมากด้วยการจัดกลุ่มหมวดหมู่ของข้อมูลใน GridView กันไปแล้ว ซึ่งหากผู้อ่านท่านใดต้องการทราบวิธีการจัดหมวดหมู่สามารถตามดูเนื้อหาในบทความได้จาก การจัดหมวดหมู่แถวของข้อมูลบน GridView ด้วย C# และในส่วนของบทความนี้จะเป็นเนื้อหาต่อยอดการทำงานจากการจัดหมวดหมู่ดังกล่าว โดยเพิ่มความสามารถให้หมวดหมู่หรือกลุ่มเหล่านั้นสามารถย่อ-ยุบได้ เพื่ออำนวยความสะดวกให้กับผู้ใช้ในการดูข้อมูลแยกส่วนกันชัดเจนมากยิ่งขึ้น หรือเพื่อตอบโจทย์ให้กับผู้ใช้บางท่านที่อาจมีความต้องการดูข้อมูลทีละส่วนได้ โดยจะนำ Component ที่ชื่อว่า Collapse ใน Bootstrap มาประยุกต์ใช้ในการแสดงผลร่วมกับ GridView และยังมี jQuery มาเป็นอีกหนึ่งตัวช่วยเพื่อให้สามารถแสดงผลตามที่ต้องการได้ โดยการอธิบายในบทความนี้ ทางผู้เขียนจะขอตัดตอนในส่วนของรายละเอียดขั้นตอนวิธีการจัดหมวดหมู่ไป และข้ามมาพูดถึงขั้นตอนที่ต้องจัดทำเพิ่มเติมในการทำย่อ-ยุบเลยละกันนะคะ            ก่อนจะไปเริ่มในส่วนของการเขียนโค้ด เรามาทำความรู้จักกับ ค่าที่จำเป็นต้องใช้ในการระบุให้กับแถวหลัก(parent)เพื่อให้สามารถย่อยุบได้ กันก่อนนะคะ data-toggle=”collapse” data-target=”.multi-collapse” เพื่อกำหนด target ที่เราต้องการให้ย่อยุบได้ โดยใช้สไตล์ชีทเป็นตัวช่วยเพื่อแยกแต่ละกลุ่มออกจากกัน ซึ่งในที่นี้จะตั้งชื่อสไตล์ชีท multi-collapse ตามด้วยรหัสของประเภทกลุ่มนั้น โดยต้องระบุสไตล์ชีทนี้ให้กับแถวย่อย(child)ด้วย aria-controls=”demo1 demo2 demo3 demo4 demo5” เพื่อกำหนดพื้นที่ที่จะย่อยุบ โดยสามารถกำหนดได้มากกว่า 1 พื้นที่ ซึ่งจะแยกด้วยการเว้นวรรคชื่อ id ของแถวย่อย(child) … Read more