หมวดหมู่ การฝึกพัฒนาซอฟต์แวร์ | เขียนโดยคุณ ทำเว็บไปกับคุณพ่อ

ทำระบบเว็บหนังออนไลน์ด้วย DJANGO: สร้างเว็บหน้าแรก

โพสต์เมื่อ 1 ปี, 10 เดือน ago | มีผู้อ่านทั้งหมด 1,107 คน

บทความอื่นๆ ของ ทำเว็บไปกับคุณพ่อ

เตรียมตัวสร้าง Project แรก ในบทความที่แล้วกันไปแล้วนะครับ บทความนี้เราจะมาเริ่มสร้างเว็บแรกให้สามารถเข้าถึงได้กัน โดยหากเราทำการติดตั้งใน เตรียมตัวสร้าง Project แรก ในบทความก่อนแล้ว กลับมาอ่านในบทความนี้ให้เราเข้าไปที่ env ของเราก่อนครับ 

C:\movieproject>env\Scripts\activate 
(env) C:\movieproject> #หลังจากเปิดใช้งานสำเร็จจะขึ้นคำว่า (env) ด้านหน้า PATH ของเราครับ

จากนั้นให้เราเริ่มสร้างโปรเจคแรกโดยพิมพ์คำสั่งตามนี้ เพื่อให้ตัว DJANGO สร้างโครงสร้างของโปรเจคเราขึ้นมา

C:\movieproject>django-admin startproject moviesite .
### อย่าลืมใส่ . ด้านหลังด้วยนะเพราะไม่เช่นนั้นอาจจะงงกับ เนื้อหาหลังๆ แล้วต้องไล่แก้กัน ###

หลังจากพิมพ์คำสั่งเสร็จแล้วจะเห็นว่ามีฟอเดอร์ชื่อว่า moviesite เพิ่มขึ้นมา ซึ่งเจ้าโฟลเดอร์ตัวนี้แหละจะเป็นตัวที่เราต้องเข้าไปจัดการกันก่อน

 Directory of C:\movieproject
07/29/2021  11:58 PM    <DIR>          .
07/29/2021  11:58 PM    <DIR>          ..
07/29/2021  11:57 PM                 0 django-admin
07/29/2021  12:18 AM    <DIR>          env
07/29/2021  11:58 PM               687 manage.py
07/29/2021  11:58 PM    <DIR>          moviesite
07/29/2021  12:35 AM                33 requirements.txt
               3 File(s)            720 bytes
               4 Dir(s)   9,380,524,032 bytes free

หลังจากสร้างโปรเจคกันเสร็จแล้วให้เราเข้าไปที่ moviesite/setting.py โดยใช้ Code Editor ของเราครับ ส่วนตัวแนะนำให้ใช้ VS Code เพราะสะดวกดี โดยสิ่งที่เราจะปรับกันในตัว setting.py จะเป็น TIME_ZONE , LANGUAGE_CODE  และ STATIC_URL เพื่อให้สามารถใช้งานได้ง่ายขึ้น

สิ่งที่เราจะแก้ไขใน moviesite/setting.py

TIME_ZONE = 'Asia/Bangkok' 
## สามารถดูโซนเวลาต่างๆได้จาก ลิงค์นี้ ##

LANGUAGE_CODE = 'th-TH' 
## ในกรณีที่อยากให้เว็บหลังบ้านเป็นภาษาไทย ##

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static') 
## เพิ่มโฟลเดอร์สำหรับเก็บไฟล์ภายในเว็บไซต์ของเรา เช่นพวก CSS , Javascripts , Images ##

ALLOWED_HOSTS = ['127.0.0.1','*']
## 127.0.0.1 ใช้สำหรับการทดลองบนเครื่องของเรา และ '*' หมายความว่าจะเปิดให้โดเมนไหนสามารถเรียกใช้เว็บของเราก็ได้##

ตั้งค่าฐานข้อมูลที่จะใช้ในโปรเจคของเรา 

โดยเราสามารถกด CTRL+F เพื่อหาได้หาก เราหามันไม่เจอจริงๆนะ 

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'moviedb.sqlite3'), #ส่วนนี้แต่เดิมมันเป็น db ผมแก้ไขเป็น moviedb
    }
}

หลังจากเราตั้งค่าทุกอย่างเสร็จแล้วให้กลับไปที่แถบ CMD กันอีกครั้งเพื่อพิมพ์ชุดคำสั่งให้ Django เริ่มไปสร้างฐานข้อมูลเบื้องต้นให้กับเรา โดยการทำงานผ่าน Django ส่วนใหญ่ เราจำเป็นที่จะต้องเรียกใช้ไฟล์ manage.py เป็นตัวกลางแล้วตามด้วยคำสั่งต่างๆ ครับ ยกตัวอย่างเช่น python manage.py migrate เป็นต้น

(env) C:\movieproject>python manage.py migrate #คำสั่งในการสร้างฐานข้อมูล

โดยผลลัพท์ที่ได้จะออกมาประมาณนี้ครับ 

(env) C:\movieproject>python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying auth.0012_alter_user_first_name_max_length... OK
  Applying sessions.0001_initial... OK

เพียงเท่านี้เว็บไซต์หน้าแรกของเราก็พร้อมใช้งานแล้ว เราลองไปดูหน้าแรกกันเลยดีกว่า ว่าเว็บไซต์มันจะออกมาหน้าตาแบบไหน..

เริ่มใช้คำสั่งเพื่อเปิดเว็บเซิร์ฟเวอร์

ยังจำได้ไหมครับว่าในโปรเจคที่พัฒนาด้วย Django เราจำเป็นที่จะต้องทำอะไรก็ตามผ่านตัว manage.py แน่นอนว่าในเว็บเซิร์ฟเวอร์ก็เช่นกัน สามารถใช้งานได้โดยการพิมพ์คำสั่ง python manage.py runserver

(env) C:\movieproject>python manage.py runserver
## คำสั่งที่ป้อนเข้าไป ##
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
July 30, 2021 - 00:36:25
Django version 3.2.5, using settings 'moviesite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
## ผลลัพท์ที่ออกมาจะเป็นประมาณนี้ ##

หลังจากขึ้นข้อความดังกล่าวแล้วเราสามารถเปิดบราวเซอร์ของเราและพิมพ์  http://127.0.0.1:8000/ เพื่อเข้าสู่หน้าของเราได้เลยครับ โดยหน้าตาที่เราจะได้เห็นก็จะเป็นแบบนี้

คิดเห็นยังไงกับบทความของ ทำเว็บไปกับคุณพ่อ