หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

CS50 การเขียนโปรแกรมเว็บโครงการสุดท้าย: Coder ถัดไป

วิดีโอโครงการคือ: https://youtu.be/ythhec-bdqa

ความคิดหลัก

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

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

ความแตกต่างและความซับซ้อน

หน้าไม่คล้ายกับสิ่งที่เราสร้างขึ้นมาแล้ว ไม่ใช่แอพโซเชียลมีเดียหรืออีคอมเมิร์ซ มันไม่คล้ายกับโครงการปีอื่น ๆ เช่นกัน

ในแง่ของความซับซ้อนฉันใช้ django กับมากกว่าหนึ่งรุ่น (อธิบายด้านล่าง) และไฟล์ JavaScript หลายไฟล์ไปยังส่วนหน้า ยิ่งกว่านั้นเว็บแอปพลิเคชันทั้งหมดตอบสนองต่อขนาดหน้าจอที่แตกต่างกัน (ส่วนใหญ่โทรศัพท์มือถือและคอมพิวเตอร์)

ข้อมูลไฟล์

  • ในมุมมอง py มีรหัสแบ็กเอนด์ทั้งหมด ฟังก์ชั่นหลักคือ:

    • คลาส newtalkform พร้อมฟิลด์ทั้งหมดสำหรับการสร้างการพูดคุยใหม่
    • Class SearchTalkForm สำหรับการพูดคุยกรอง
    • ฟังก์ชั่นล็อกอินการออกจากระบบและการลงทะเบียนที่คัดลอกมาจากโครงการ 4
    • new_talk สำหรับการบันทึกการพูดคุยใหม่และข้อมูลที่เกี่ยวข้องไลค์แท็ก
    • แท็กสำหรับการดึงแท็กที่มีอยู่และเพิ่มแท็กใหม่
    • แท็กตัวกรอง: เพื่อส่งคืนรายการการเจรจาตามตัวกรองที่ผู้ใช้เลือก
    • get_by_title: การพูดคุยกลับมาซึ่งคำที่ปรากฏในชื่อคำอธิบายหรือแท็ก
    • พูดคุยเพื่อดึงข้อมูลเกี่ยวกับการพูดคุยเฉพาะ
    • ลงทะเบียน: ลงทะเบียนการพูดคุย
    • get_enrolled_talks: เพื่อเรียกคืนการเจรจาที่คุณลงทะเบียน

  • models.py รุ่นที่แตกต่างกันคือ:

    • รุ่นผู้ใช้
    • โมเดลสำหรับแท็ก
    • นางแบบพูดคุยกับรายละเอียดที่แตกต่างทั้งหมดเกี่ยวกับการพูดคุย (และ serializer)

  • talk.js: เพื่อกรองการพูดคุยแสดงการพูดคุยและการเติมข้อความอัตโนมัติเมื่อคุณค้นหาการพูดคุย

  • new_talk.js: สำหรับส่วนที่สองของการสร้างการพูดคุยใหม่ที่เพิ่มแท็ก มันโหลดและแสดงแท็กบันทึกแท็กใหม่และเพิ่มแท็กที่เลือกลงในการพูดคุยใหม่

  • mytalks.js: เพื่อรับการเจรจาที่คุณลงทะเบียนและแสดงพวกเขาใน DOM

  • เทมเพลตสำหรับหน้า HTML ที่แตกต่างกันทั้งหมดที่อธิบายไว้ข้างต้น (ทั้งหมด 8 รายการรวมถึงไฟล์เลย์เอาต์)

  • ไฟล์ CSS พร้อม CSS ทั้งหมดที่ใช้ในเว็บแอปพลิเคชัน ใช้เทคนิคเช่น Flexbox และ Grid

  • ไฟล์ที่สำคัญน้อยกว่าอื่น ๆ เช่น URL, admin, การตั้งค่า, ภาพคงที่ ...

วิธีเรียกใช้แอปพลิเคชัน

  • ติดตั้งการพึ่งพาโครงการโดยเรียกใช้ PIP Install -r rechent.txt
  • ทำและใช้การย้ายถิ่นโดยใช้ Python Manage.py MakeMigrations และ Python Manage.py อพยพ
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด