Restaurant Ordering Template

ร้านอาหาร-สั่งซื้อ

เทมเพลต FMX สำหรับการสั่งซื้อร้านอาหารออนไลน์

จุดประสงค์ในการสร้างเทมเพลตนี้คือคุณในฐานะนักพัฒนาแอปพลิเคชันการสั่งซื้อออนไลน์แล้วมีการออกแบบแอปพลิเคชันหลักที่มีฟังก์ชั่นพื้นฐานพร้อม คุณเพียงแค่ต้องเชื่อมต่อแบ็กเอนด์ของคุณกับแอปพลิเคชันและกำหนดค่าเอาต์พุตของเนื้อหาของคุณในวิธีการที่มีอยู่สำหรับการส่งออกข้อมูลไปยังการควบคุมกราฟิกโดยใช้สไตล์ของเรา นอกจากนี้แน่นอนว่ามีความสามารถในการใช้งานส่วนที่เหลืออย่างอิสระซึ่งเหมาะสำหรับร้านอาหารของคุณโดยเฉพาะ

เทมเพลตประกอบด้วย dataModuls, 10 รูปแบบการทำงานและรูปแบบหลักซึ่งแสดงรูปแบบการทำงานส่วนใหญ่ภายใน

รูปแบบ

เมื่อแอปพลิเคชันเริ่มต้นฟอร์มเริ่มต้น ( ufrmGetStarted ) จะเปิดตัว มันแสดงชื่อร้านอาหารและข้อมูลการติดต่อขั้นพื้นฐานของคุณ ทางด้านขวาของข้อมูลการติดต่อมีปุ่มที่อนุญาตให้ผู้ใช้โทรออกจากหนึ่งในรายการแอปพลิเคชันที่มีอยู่ นอกจากนี้ยังมีความสามารถในการส่งอีเมลไปยังที่อยู่ทางไปรษณีย์ของร้านอาหารของคุณโดยใช้หนึ่งในแอปพลิเคชันที่เสนอ ที่ด้านล่างของแบบฟอร์มมีปุ่มเริ่มต้นใช้งาน เมื่อคลิกปุ่มนี้คุณจะถูกเปลี่ยนเส้นทางไปยังแบบฟอร์มหลัก ( ufrmMain ) ของแอปพลิเคชัน

รูปแบบหลักของแอปพลิเคชันเมื่อเริ่มต้นโหลดทันทีและแสดงรูปแบบแผงควบคุม ( ufrmDashboard ) รูปแบบทั้งหมดที่โหลดจากเมนูด้านข้างของรูปแบบหลักหรือผ่านปุ่มซ้ำของแบบฟอร์มแดชบอร์ดจะแสดงบนหน้าของส่วนประกอบ TTabControl สิ่งนี้ช่วยให้คุณสามารถใช้เมนูหลักของโปรแกรมในทุกรูปแบบที่จำเป็น นอกจากนี้ยังช่วยให้คุณจัดการรูปแบบที่เปิดกว้างและการเปลี่ยนระหว่างพวกเขาจากรูปแบบเดียวผ่านกลไกเดียว วิธีการหลักที่ใช้ในการสร้างฟอร์มแสดงเนื้อหาของพวกเขาในหน้า TTabControl ของรูปแบบหลักรวมถึงกำหนดฟังก์ชั่นการควบคุมของแบบฟอร์มเหล่านี้จะดำเนินการในวิธี LoadScreenByName() ศึกษาและวิธีการที่เรียกว่าจากมันและคุณจะทราบว่าตรรกะสำหรับการแสดงแบบฟอร์มในแอปพลิเคชันถูกสร้างขึ้นอย่างไร

แบบฟอร์มที่ใช้ในเทมเพลตนี้:

• GUI (ภาพหน้าจอ)
  • ufrmMain - รูปแบบหลัก
  • ufrmCart - รูปแบบรถเข็น
  • ufrmCoupons - แบบฟอร์มคูปองส่วนลด
  • ufrmDashboard - แบบฟอร์มแผงควบคุม
  • ufrmGallery - รูปแบบแกลเลอรี่ของร้านอาหาร
  • ufrmGetStarted - หน้าจอต้อนรับ
  • ufrmAboutUs - เกี่ยวกับเราแบบฟอร์ม
  • ufrmMenu - รูปแบบของข้อมูลรายละเอียดเกี่ยวกับจานที่เลือกจากแบบฟอร์มเมนู
  • ufrmAccount - แบบฟอร์มการเพิ่ม/แก้ไขบัญชีผู้ใช้
  • ufrmAddToCart - แบบฟอร์มสำหรับการเพิ่ม/ลบตัวดัดแปลงของจานที่เลือกไป/กลับจากเมนู
  • ufrmOptionsList - เป็นรูปแบบที่แสดงและอนุญาตให้ไคลเอนต์เลือกตัวดัดแปลงจานเพิ่มเติม (สารเติมแต่ง) เช่นซอสมัสตาร์ด ฯลฯ
• orm
  • uDMUnit

การใช้งาน

ตอนนี้เราจะวิเคราะห์รายละเอียดเพิ่มเติมว่าการจัดระเบียบข้อมูลแอปพลิเคชันมีการจัดระเบียบอย่างไร นอกจากนี้เราจะพิจารณาวิธีการส่งออกข้อมูลไปยังกล่องรายการและองค์ประกอบกราฟิกอื่น ๆ ของแบบฟอร์มแอปพลิเคชัน สำหรับตัวอย่างการทดสอบแอปพลิเคชันจะถูกนำมาใช้โดยใช้ส่วนประกอบ TFDMEMTABLE ในกรณีนี้รายการฟิลด์ไม่ จำกัด และคุณไม่จำเป็นต้องใช้ส่วนประกอบนี้ในโครงการของคุณ TQUERY หรือ TDATASET ใด ๆ ควรจะดี เทมเพลตรุ่นนี้จะถือว่าความสามารถในการเรียกใช้แอปพลิเคชันบนแพลตฟอร์มใด ๆ

ในโมดูลข้อมูล uDMUnit ของแอปพลิเคชันมีการสร้างวิธีการจำนวนหนึ่งซึ่งจำเป็นต่อการเติมส่วนประกอบ TFDMemTable ด้วยข้อมูลการทดสอบ คุณจะไม่ต้องการวิธีการเหล่านี้และคุณจะลบออก อย่างไรก็ตามในระหว่างการศึกษาเทมเพลตของเราพวกเขาจะช่วยให้คุณเข้าใจว่าข้อมูลใดและข้อมูลประเภทใดที่คุณจะต้องได้รับจากแบ็กเอนด์ของคุณหรือคุณสามารถเลือกจากฐานข้อมูลของคุณเพื่อใช้ในเทมเพลต เพื่อให้แม่แบบจะทำงานได้อย่างถูกต้องกับข้อมูลที่คุณส่ง

สไตล์ของส่วนประกอบทั้งหมดที่นำเสนอใน Stylebook ในรูปแบบหลักของเทมเพลต frmmain สามารถเปลี่ยนแปลงได้ตามที่คุณต้องการ ดังนั้นหากจำเป็นหรือหากคุณต้องการแสดงข้อมูลเพิ่มเติมในองค์ประกอบเฉพาะคุณสามารถสร้างสไตล์ที่มีอยู่ใหม่ได้อย่างง่ายดายและเตรียมแอปพลิเคชันสำหรับความต้องการของคุณ

เพื่อให้ข้อมูลของคุณแทนที่จะเป็นข้อมูลการทดสอบที่จะแสดงในองค์ประกอบภาพ TListBox คุณต้องอัปโหลดข้อมูลของคุณไปยัง TFDMemTable ที่อยู่บนโมดูลข้อมูลหรือทำการเปลี่ยนแปลงวิธีการกรอกข้อมูลเมื่อโมดูลข้อมูลเริ่มต้น (ใช้วิธีการรับข้อมูลจากแบ็กเอนด์ ต่อไปนี้เป็นวิธีการทั้งหมดที่เติม TFDMemTables ด้วยข้อมูลการทดสอบเมื่อเริ่มต้นแอปพลิเคชัน:

• InsertTestDataForTheMenu ();
• InsertTestDataForTheCoupons ();
• InsertTestDataForTheGallery ();
• InsertTestDataForTheOptions ();
• InsertTestDataForAboutUs ();
• InsertTestDataForContactInfo ();

จากชื่อของวิธีการเป็นที่ชัดเจนว่าอันไหนที่รับผิดชอบในการกรอกแบบฟอร์มหนึ่งแบบหรือแบบฟอร์มอื่นด้วยข้อมูลการทดสอบ เมื่อศึกษาวิธีการใด ๆ มันก็จะกลายเป็นชัดเจนว่า TFDMemTable ใดที่ใช้สำหรับรูปแบบใด -

• MenuListTable - ใช้ในรูปแบบ UFRMMENU และ UFRMCART
• CouponsListTable - ใช้ในรูปแบบ UFRMCOUPONS
• GalleryListTable - ใช้ในรูปแบบ UFRMGALLERY
• OptionsListTable - ใช้ในรูปแบบ ufrmoptionslist และ ufrmaddtocart
• AboutUsTable - ใช้ในรูปแบบ UFRMABOUTUS และ UFRMGETSTARTED
• AboutUsDesciptionTable - ใช้ในรูปแบบ UFRMABOUTUS และ UFRMGETSTARTED

ในการเพิ่มรูปภาพให้กับ TFDMemTables ให้ใช้ TImageLists กับรูปภาพที่โหลดไว้แล้ว สิ่งนี้ทำเพื่อสาธิตวิธีการโหลดภาพลงในส่วนประกอบของตระกูล TQuery และเพื่อแสดงวิธีการโหลดภาพจากฟิลด์ประเภท TBlob ลงในองค์ประกอบของการควบคุมกราฟิกในแบบฟอร์ม ตัวอย่างเช่นเช่น TListBox

การโหลดข้อมูลจาก TFDMemTables ไปยังองค์ประกอบการควบคุมกราฟิกจะถูกนำมาใช้ในแต่ละรูปแบบแยกกัน รายการชื่อวิธีการแสดงด้านล่าง:

• TfrmAboutUs.BuildAboutUsInfo ();
• TfrmAboutUs.BuildContsctInfoList ();
• TfrmAddToCart.BuildForm ();
• TfrmAddToCart.BuildOptionsList ();
• TfrmCart.BuildCartList ();
• TfrmCoupons.LoadCouponsList ();
• TfrmGallery.LoadGalleryList ();
• TfrmGetStarted.ShowInfoAboutRestaurant ();
• TfrmGetStarted.BuildContsctInfoList ();
• TfrmMenu.LoadMenuList ();
• TfrmOptionsList.BuildOptionsList ();

ตะกร้าสินค้าถูกนำไปใช้โดยใช้อาร์เรย์ของบันทึกซึ่งนำเสนอเป็นคลาส TCartList จานและตัวดัดแปลงของพวกเขาจะถูกเพิ่มเข้าไปในอาร์เรย์นี้ด้วย TCartItemType หนึ่งชนิดหรืออื่น และการเชื่อมต่อระหว่างจานและตัวดัดแปลงจะถูกจัดระเบียบผ่าน Index พารามิเตอร์ OwnerIndex ของคลาส TCartList

เพื่อความสะดวกในการทำงานกับรถเข็นมีการใช้วิธีการหลายวิธี:

• AddItemToCart(
  • aItemId: int64 = 0;
  • aOwnerID: int64 = 0;
  • const aItemName: string = '';
  • aItemType: TCartItemType = citItem;
  • aQuantity: Extended = 1;
  • aItemPrice: Extended = 0;
  • aOwnerIndex: Integer = -1): Integer;
• DelItemFromCart(aItemIndex: Integer = 0); ClearCart();
• GetCartTotalAmount(): Extended;

ไม่ว่าในกรณีใดคุณสามารถเปลี่ยนวิธีการเหล่านี้ตามที่คุณต้องการหรือเขียนวิธีการของคุณเองเพื่อกรอกแบบฟอร์มและส่วนประกอบภาพด้วยข้อมูล วิธีการที่ให้ไว้ในเทมเพลตจะแสดงเฉพาะการกรอกข้อมูลของเทมเพลตแบบฟอร์มองค์ประกอบภาพที่มองเห็นได้อย่างไรรวมถึงการแก้ไขข้อมูลนี้ วิธีการข้างต้นมีวิธีในการกำหนดวิธีการประมวลผลคลิกให้กับ tlistboxItems หรือปุ่มที่อยู่ภายใน tlistboxItems หลังจากวิเคราะห์วิธีการเหล่านี้คุณจะสังเกตเห็นว่าคุณสมบัติแท็กใช้ในการถ่ายโอนตัวระบุของบันทึกหรือรายการ

องค์ประกอบกราฟิก

แต่ละเทมเพลตในการใช้งานปัจจุบันแสดงถึงเอฟเฟกต์โวหารกราฟิกและภาพเคลื่อนไหวเท่านั้น และข้อมูลการทดสอบจะถูกนำเสนอเพื่อทำความเข้าใจกระบวนการของการกรอกองค์ประกอบกราฟิกของแบบฟอร์มเท่านั้น

ไอคอนขององค์ประกอบกราฟิกที่ใช้ในเทมเพลตนั้นนำมาจากทรัพยากร:

• https://material.io/tools/icons/?style=baseline

ด้านล่างเป็นรายการทรัพยากรอินเทอร์เน็ตที่ภาพถูกดาวน์โหลดเพื่อออกแบบลักษณะที่ปรากฏของแอปพลิเคชัน GetStarted Form BG Image:

• https://www.pexels.com/uk-ua/photo/2762942/
• https://www.pexels.com/photo/clean-coffee-shop-2467287/
• https://www.pexels.com/photo/bottle-bread-food-garlic-301539/
• https://www.pexels.com/photo/plate-of-bread-with-spread-3535380/
• https://www.pexels.com/photo/basil-leaves-and-avocado-on-sliced-bread-on-white-ceramic-plate-1351238/
• https://www.pexels.com/photo/food-998244/
• https://www.pexels.com/photo/pasta-with-vegetable-dish-on-gray-plate-beside-tomato-fruit-on-white-table-769969/
• https://www.pexels.com/search/strudel/
• https://www.pexels.com/uk-ua/photo/918328/
• https://www.pexels.com/uk-ua/photo/93451/

ไอคอนสังคม:

• https://icon-icons.com/icon/social-media-facebook-circle/83091 (ฟรีสำหรับการใช้งานเชิงพาณิชย์)
• https://icon-icons.com/icon/social-media-twitter-circle/83078 (ฟรีสำหรับการใช้งานเชิงพาณิชย์)
• https://icon-icons.com/icon/social-media-circle-instagram/83102 (ฟรีสำหรับการใช้งานเชิงพาณิชย์)
• https://icon-icons.com/icon/social-media-youtube-circle/83061 (ฟรีสำหรับการใช้งานเชิงพาณิชย์)