webstencils demo

การสาธิต webstencils

Delphi 12.2 แนะนำ WebStencils ซึ่งเป็นวิธีที่ใช้สคริปต์ในการประมวลผลข้อความคล้ายกับเทคโนโลยี ASP.NET Razor การใช้งานหลักคือการสร้าง HTML แบบไดนามิกจากแอปพลิเคชันเซิร์ฟเวอร์ WebBroker แต่สามารถใช้ในวิธีอื่น ๆ ในการสร้าง XML, JSON หรือเอาต์พุตข้อความใด ๆ จากเทมเพลต

พื้นที่เก็บข้อมูลนี้มีแอพพลิเคชั่น Delphi 12.2 WebBroker ที่ง่ายมาก (เรียกใช้เป็นโปรแกรม Windows VCL ที่เปิดเว็บ TWebStencilsProcessor ราว์เซอร์) เพื่อเปรียบเทียบเทมเพลตที่ทำกับแท็กสไตล์ HTML ที่ใช้ในส่วนประกอบ TPageProducer กับแท็กสัญลักษณ์ "@" ใหม่ที่ใช้ ไฟล์โครงการและ HTML ทั้งหมดอยู่ในโฟลเดอร์เดียวและทั้งสองโครงการแบ่งปันโมดูลข้อมูลสำหรับการเข้าถึงฐานข้อมูล Chinook SQLite (ไม่รวมอยู่)

มีห้าหน้าในแต่ละแอปพลิเคชันที่มีลักษณะเหมือนกันเพื่อให้คุณสามารถมีสมาธิกับเทคโนโลยีเทมเพลต:

1. ดัชนี (แสดงหน้าเข้าสู่ระบบ)
2. ข้อผิดพลาดในการเข้าสู่ระบบ
3. รายชื่อลูกค้า (แสดงรายการลูกค้าในตาราง)
4. การแก้ไขลูกค้า (แสดงหน้าแก้ไขสำหรับลูกค้าที่เลือก)
5. หน้าข้อผิดพลาด (สำหรับการป้องกันการเข้าถึงที่ไม่ได้รับอนุญาต)

ไฟล์ HTML ที่อ้างอิงโดยทั้งสองโครงการได้รับการเสนอชื่อเพื่อให้ชัดเจนว่าโครงการ/เทคโนโลยีที่พวกเขาทำงานด้วย:

เทมเพลต PageProducer แบบดั้งเดิมไฟล์ HTML:

• index-wbroker.html
• loginfailed-wbroker.html
• custlist-wbroker.html
• custedit-wbroker.html
• accessdenied-wbroker.html

เทมเพลต WebStencils ใหม่ไฟล์ HTML:

• index-wStencils.html
• login-failed-wStencils.html
• custlist-wStencils.html
• custedit-wStencils.html
• accessdenied-wStencils.html
• custlistframework1.html

ขอให้สังเกตว่ามีอีกหนึ่งไฟล์ในคอลเลกชัน WebStencils มันเป็นเทมเพลตเฟรมเวิร์กสำหรับแต่ละหน้าเว็บที่สร้างขึ้นจากการกระทำของ WebStencils และรวมกันจากส่วนหัวและสตริงส่วนท้ายที่ฝังอยู่ในผู้ผลิตหน้าเว็บที่ใช้ในโครงการ WebBroker ดั้งเดิม

การสร้างโครงการ

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

เมื่อคุณมี chinook.db ในโฟลเดอร์เดียวกับโครงการคุณจะต้องเปิดโมดูลข้อมูล (ใช้โดยทั้งสองโครงการ), udmCust และแก้ไขส่วนประกอบ TFDConnection เพื่อระบุตำแหน่งของไฟล์ฐานข้อมูล ฉันขอแนะนำให้ใช้เครื่องมือฐานข้อมูลหรือ Data Explorer ของ Delphi เพื่อดูตารางในฐานข้อมูล

Delphi 12.2 ถูกใช้เพื่อสร้างและทดสอบโปรแกรมเหล่านี้ (ซึ่งใช้ส่วนประกอบของบุคคลที่สาม)

เรียกใช้การสาธิต

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

หน้าแรกที่ระบุไว้คือหน้าเข้าสู่ระบบ ต้องป้อนเข้าสู่ระบบที่ถูกต้องก่อนที่จะนำคุณไปยังรายชื่อลูกค้า การเข้าสู่ระบบที่ถูกต้องคือผู้ใช้ในตารางพนักงานที่:

• ชื่อผู้ใช้ เป็น FirstName ที่ไม่รู้สึกตัว
• รหัสผ่าน คือการเชื่อมต่อของ EmployeeId และ LastName กรณี ที่มีความละเอียดอ่อน

ตัวอย่างเช่นรายการแรกในฐานข้อมูลตัวอย่างที่ฉันดาวน์โหลดมีพนักงานคนแรกต่อไปนี้:

• ID : 1
• FirstName : Andrew
• LastName : อดัมส์

ดังนั้นเพื่อเข้าสู่ระบบกับพนักงานคนนี้:

• ชื่อผู้ใช้: ANDREW (กรณีบนหรือต่ำหรือต่ำหรือผสม)
• รหัสผ่าน: 1Adams (แน่นอน)

เมื่อลงชื่อเข้าใช้รายการลูกค้าจะปรากฏขึ้น ID ของลูกค้าแต่ละคน (คอลัมน์ซ้ายสุด) เป็นลิงค์ที่จะนำคุณไปยังหน้าจอ "แก้ไข" ที่แสดงรายการฟิลด์ลูกค้าทั้งหมดในกล่องแก้ไข ปุ่มส่งไม่บันทึกการเปลี่ยนแปลงหรือทำสิ่งอื่นใดนอกจากนำคุณกลับไปที่รายการลูกค้า

ชื่อตาราง

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

ทำไมต้องใช้ตาราง HTML?

รายชื่อลูกค้าถูกสร้างขึ้นโดยใช้แท็กตาราง HTML เก่า ( <table> , <tr> , <td> ฯลฯ ) เนื่องจากเป็นวิธีที่ง่ายและเริ่มต้นที่แอพเซิร์ฟเวอร์ WebBroker เก่าที่สร้างขึ้นโดยใช้ส่วนประกอบ TDataSetTableProducer เวอร์ชัน WebStencils ใหม่สร้างผลลัพธ์ HTML เดียวกันเพื่อให้คุณสามารถเปรียบเทียบวิธีการทำและหน้าเว็บผลลัพธ์จะเกือบจะเหมือนกัน โดยทั่วไปแล้วเว็บไซต์ที่ทันสมัยจะสร้างตารางสไตล์ CSS ซึ่งเป็นประโยชน์ที่สามารถรับรู้ได้โดยการเปลี่ยนจาก DataSettableProducers เป็น WebStencils

บล็อก

อ่านบล็อก "แนะนำ WebStencils" ของฉันเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับเทคโนโลยีที่อยู่เบื้องหลังโปรแกรมเหล่านี้และสาเหตุที่ WebStencils เจ๋งมาก!