หลักสูตรความผิดพลาด 101
10 โมดูล
5 สัปดาห์ที่ผ่านมา

เว็บเพจและโมดอล

คลิกเพื่อคัดลอก

วิธีสร้างหน้าใหม่และหน้าต่างโมดอลในเว็บแอปพลิเคชัน


ขั้นตอนที่สำคัญที่สุดในการสร้างเว็บแอปพลิเคชันส่วนใหญ่คือการจัดระเบียบงานกับฐานข้อมูล วิธีรับข้อมูลจากฐานข้อมูล วิธีแสดงบนหน้าจอของผู้ใช้ และวิธีจัดการและลบข้อมูลนี้

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

  • สร้างตารางเพื่อส่งออกข้อมูลจากฐานข้อมูล
  • เรียนรู้วิธีเพิ่มข้อมูลลงในฐานข้อมูล ตลอดจนลบข้อมูลเหล่านั้น
  • เรียนรู้วิธีการทำงานของหน้าต่างโมดอลเพื่อสร้างส่วนต่อประสานที่ใช้งานง่าย
  • ทำความเข้าใจวิธีการทำงานของตารางที่เชื่อมโยง

หน้า

เริ่มจากส่วนเตรียมการกันก่อน แอปของเราใหญ่ขึ้นเรื่อยๆ และหน้าเดียวก็คับแคบ เราต้องสร้างอย่างน้อยหนึ่งขึ้น เพิ่มไปที่เมนูด้านซ้าย


เรียกหน้าที่สร้างขึ้นว่า " World " และตั้งค่าไอคอนและ URL ที่ชัดเจน


หน้าต่างโมดอล

เราต้องการความสามารถในการเพิ่มประเทศใหม่ในหน้าที่สร้างขึ้น ในการทำเช่นนี้เราต้องการหน้าต่างโมดอลที่เราจะป้อนข้อมูลที่จำเป็นและปุ่มที่จะเปิดหน้าต่างโมดอลนี้

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


จำเป็นต้องตั้งชื่อที่เหมาะสมและเมื่อกดปุ่มให้กำหนดการกระทำง่ายๆ หนึ่งอย่าง - การแสดงหน้าต่างโมดอลนี้


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

ฐานข้อมูลจะบันทึกข้อมูลพื้นฐานที่สุดเกี่ยวกับประเทศต่างๆ นี่คือชื่อของพวกเขา ( ประเภท String ) และคำอธิบายทั่วไป ( Text ) นี่คือช่องป้อนข้อมูลที่คุณต้องเพิ่ม


Was this article helpful?
ยังคงมองหาคำตอบ?