สวัสดีครับ วันนี้เนื่องในโอกาสพิเศษและเป็นฤกษ์ดี ที่เพจ stackpython มีเแฟนเพจที่กดไลก์ครบ 6,000 ไลก์ พอดิบพอดี ผมเลยจะมอบบทความนี้ Django Special Ep เป็นสิ่งตอบแทนเล็ก ๆ น้อย ๆ เนื่องในวันนี้กันครับ บทความนี้จะไม่มีการแบ่งพาร์ทและลงรายละเอียดแบบเจาะลึกเหมือนพาร์ทที่ผ่านมา เพราะว่าถ้าเขียนแบบเจาะลึกลงในแต่ละหัวข้อคงต้องใช้เวลาหลายวันกันอย่างแน่นอนครับ ซึ่งผมก็จะทยอยเขียนบทความเหล่านั้นในซีรี่ย์ Django Series อยู่แล้วครับ และดังที่หัวข้อของบทความนี้ คือบทความที่เขียนขึ้นมาพิเศษ จะคล้ายเป็นเวิร์คช็อปเล็ก ๆ โดยจะทำตั้งแต่ต้นจนจบกันเลยทีเดียว แต่สิ่งที่จะได้คือ ได้ลงมือเขียนจริง ๆ และเรียนรู้โปรเซสต่าง ๆ ของ Django

โดยในบทความนี้ตัว IDE ที่ผมจะใช้คือ PyCharm (Professional) ซึ่งแน่นอนว่าเวอร์ชั่นนี้เป็นเวอร์ชั่นเสียตังค์ครับ เพราะด้วยตัวฟีเจอร์ต่าง ๆ ที่ถูกออกแบบมาเรียกได้ว่าเอาใจสาวก Django และ Python Web Frameworks ตัวอื่น ๆ ไม่ว่าจะเป็น Flask, Pyramid, Web2Py และยังมีทางด้านเฟรมเวิร์คฝั่ง Frontend ที่ PyCharm จัด Environment มาให้เพรียบพร้อมสำหรับการพัฒนา แต่เพื่อให้ทุกท่านที่เริ่มศึกษาและเขียน Django ได้เริ่มต้นเขียนได้อย่างรวดเร็วโดยไม่มีปัญหาในการคอนฟิกโปรเจคท์ Django ซึ่งเมื่อเขียนคล่องแล้วรู้คอนเซ็ปต์อะไรทุกอย่างแล้ว จะกลับไปใช้ตัว IDE หรือตัว Text Editor ตัวอื่น ๆ ในภายหลัง เช่น Visual Studio Code, Sublime Text, Atom, etc ก็ไม่มีปัญหาครับ ในเวอร์ชั่น Professional จะให้เราทดลองใช้ฟรี 30 วันครับ

ดาวน์โหลด PyCharm Professional

ก่อนเริ่มลุยโปรเจคท์ สำหรับหลายคนที่ยังไม่รู้หรือยังแน่ใจว่าทำไมต้องศึกษา Django บทความนี้มีคำตอบครับ Django 101 Ep.2 Why using Django ?ทำไมถึงต้องใช้ Django

สำหรับเพื่อน ๆ ที่อยากเขียน Django ตั้งแต่การเซ็ตอัพและสร้าง virtual environment เริ่มตั้งแต่ต้นเลย บทความนี้ได้เลยครับ Django 101 Ep.1 ดาวน์โหลด Visual Studio Code พร้อมเซ็ต Virtual Environment สำหรับเริ่มโปรเจคท์

ในบทความนี้ผมจะไม่ได้มีการก็อปปี้โค้ดมาวางไว้ เพราะว่าเพื่อน ๆ จะได้สามารถลงมือเขียนตามเองได้ด้วยตัวเอง เพราะโค้ดที่จะใช้เขียนแต่ละส่วนไม่ได้ยาวมากมายอะไร เป็นโค้ดสั้น ๆ สามารถลงมือเขียนเองได้เลยครับ

สร้างโปรเจคท์

File → New Project

เลือก Django → newsweb → create

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

ซึ่งใน PyCharm จะทำการสร้างตัว Virtual Environment และติดตั้ง Django มาให้เรียบร้อย ซึ่งสำหรับมือใหม่จะเห็นได้ว่าสะดวกมาก ๆ และสามารถเริ่มสร้างโปรเจคท์ได้อย่างรวดเร็ว โดยที่ไม่ต้องกังวลในเรื่องของการคอนฟิกให้ปวดหัว

จากนั้นผมจะเปิดโปรเจคท์ในหน้าต่างใหม่

เปิดโปรเจคท์ในหน้าต่างใหม่

รอโปรแกรมติดตั้งไลบรารี่และโมดูลต่าง ๆ พร้อมกับสร้าง Virtual Environment จนเสร็จ โดยใช้เวลาประมาณ 1 นาที

โปรแกรมกำลังติดตั้งไลบรารี่และสร้าง Virtual Environment สำหรับเขียน Django

เมื่อโปรแกรมติดตั้งอะไรเสร็จทุกอย่างเรียบร้อยแล้ว ก็จะพบกับหน้านี้ ซึ่งคือหน้า urls.py ซึ่งจะเป็นหน้าที่เอาไว้ใช้สำหรับใช้เป็นเส้นทางเมื่อ client มีการ request เข้ามา

ให้ทำการ Double Click ที่โฟลเดอร์โปรเจคท์ (newsweb) ด้านซ้ายมือ ซึ่งตัวโปรเจคท์จะประกอบไปด้วยไฟล์ต่าง ๆ และผมจะขออธิบายคร่าว ๆ ดังนี้

manage.py → ไฟล์ที่เอาไว้ใช้สำหรับรัน Django Project

1. __init__.py → เป็นไฟล์เปล่า ๆ ซึ่งจะไม่มีการเขียนโค้ดใด ๆ ในไฟล์นี้ บอกให้โปรแกรมรู้ว่าเป็นไฟล์ของโฟลเดอร์ที่ใช้เก็บ Python Packages ต่าง ๆ
2. asgi.py (เพิ่งถูกเพิ่มเข้ามาใน Django เวอร์ชั่น 3) ในไฟล์นี้จะยังไม่ได้มีการเขียนโค้ดใด ๆ ในโปรเจคท์นี้
3. settings.py → ใช้คอนฟิกค่าต่าง ๆ ของโปรเจคท์
4. urls.py → ใช้สำหรับสร้าง urls หรือ route เพื่อสร้างเส้นทางให้กับ request ที่เรียกเข้ามาจากฝั่ง client และจะมีการ response ตอบกลับไปตามเส้นทางเดิมนี้
5. wsgi.py → ใช้ในการติดต่อกับ Web Server เมื่อถึงเวลาที่ต้องมีการ Deploy โปรเจคท์ของเราครับ โดยตอนนี้เรายังไม่ได้ Deploy ก็ยังไม่ต้องทำอะไรกับไฟล์นี้

ซึ่งขั้นตอนถัดไป ผมจะต้องทำการสร้าง app ขึ้นมา 1 app ซึ่งจะเป็น app ที่ใช้สำหรับสร้างเว็บไซต์ข่าว

สร้างแอป

คลิ๊กที่ Terminal ด้านล่างซ้ายของโปรแกรม โดยอีกฟีเจอร์อีก 1 ตัวที่ผมชื่นชอบมาก ๆ ของ PyCharm นั่นก็คือเจ้า Terminal นี่แหละครับ เราสามารถรันโปรเจคท์จาก Terminal ของ PyCharm ได้โดยตรงเลย โดยไม่จำเป็นต้องรันใน Terminal หรือตัว Power Shell ข้างนอก

ตัว Terminal ที่มีมาให้ใน PyCharm คืออีก 1 ฟีเจอร์ที่ผมชอบมาก

จากนั้นทำการสร้างแอปได้เลยครับ โดยใช้คำสั่ง

py manage.py startapp newsapp

โฟลเดอร์ newsapp ซึ่งเป็นโฟลเดอร์แอปของผมก็จะถูกสร้างขึ้นมา พร้อมด้วยไฟล์และโฟลเดอร์ต่าง ๆ และผมจะขออธิบายคร่าว ๆ ดังนี้

• migrations → คือโฟลเดอร์ที่ใช้สำหรับเก็บล็อกของตัวไฟล์ models.py ที่ผมจะใช้สร้างตาราง โดยการสร้างตาราง เราไม่ได้เขียนภาษา SQL เข้าไปตรง ๆ แต่จะใช้ ORM(Object Relational Mapper) ในการเขียนและเข้าถึงข้อมูลใน Database แทน
• __init__.py → เป็นไฟล์เปล่า ๆ ซึ่งจะไม่มีการเขียนโค้ดใด ๆ ในไฟล์นี้ บอกให้โปรแกรมรู้ว่าเป็นไฟล์ของโฟลเดอร์ที่ใช้เก็บ Python Packages ต่าง ๆ
• admin.py → ไฟล์ที่ใช้สำหรับเขียนเพื่อใช้สำหรับการ Cuztomize หรือปรับแต่งหน้า Admin
• apps.py → เป็นไฟล์ที่เอาไว้ใช้ในการคอนฟิกแอปของเรา ซึ่งในโปรเจคท์นี้ก็ปล่อยเป็นค่า Default เลยครับ จะไม่มีการเขียนโค้ดใด ๆ ในไฟล์นี้
• models.py → ไฟล์ที่ใช้สำหรับเขียนเพื่อสร้างตารางลงใน Database และติดต่อกับ Database
• tests.py → ไฟล์ที่ใช้สำหรับเขียนทดสอบการทำงานของโปรเจคท์
• views.py → ไฟล์ที่สำหรับเอาไว้ใช้เขียนฟังก์ชันและลอจิกต่าง ๆ ของโปรเจคท์

จากนั้นทดสอบการทำงานของ server ก่อนว่าทำงานได้ถูกต้องหรือไม่ โดยใช้คำสั่ง py manage.py runserver

รันโดยใช้คำสั่ง py manage.py runserver

ซึ่งเมื่อรันเสร็จแล้วจะปรากฏลิ้งค์ของหมายเลขไอพีแอดเดรส นั่นก็คือ 127.0.0.1 ซึ่งก็คือ localhost ของเครื่องคอมพิวเตอร์ของเรานั่นเอง ส่วนหมายเลข 8000 ก็คือพอร์ตที่รัน (พอร์ต default)

คลิ๊กลิ้งค์นี้เพื่อเข้าดูหน้าเว็บได้เลย

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

ทางสะดวกโยธิน เว็บของเรารันได้ไม่มีปัญหาครับ

I am ready !!

เปิดไปที่ไฟล์ settings.py ซึ่งผมจะพาเข้ามาดู Database กันครับ

โดยแน่นอนครับว่าการที่เราจะสร้างเว็บไซต์นั้น ถ้าเราจะต้องมีการโพสต์ข้อมูล ข่าวสารต่าง ๆ เคยสงสัยไหมครับว่าข้อมูลเหล่านั้นถูกเก็บไว้ที่ไหน คำตอบก็คือ Database นี่แหละครับ

settings.py

ไม่ต้องคอนฟิกค่า ใช้ตามนี้ได้เลยครับสำหรับ sqlite3

ส่วน Database ที่ผมจะใช้ในโปรเจคท์นี้ก็คือ sqlite3 ซึ่งเป็นตัว Database ที่เก็บข้อมูลในรูปแบบของไฟล์ มันมีความเบา(Light Weight) และมีมาให้เรียบร้อยพร้อมใช้งานแล้วกับ Django ด้งนั้นมันจึงสะดวกมาก ๆ ที่จะเอาไว้ทดสอบในระหว่าง Development กันใน Localhost ของเรา ซึ่งถ้าเวลาที่เราสร้างตัวโพรโตไทป์เสร็จเรียบร้อยทดสอบอะไรเรียบร้อยแล้วทุกอย่าง จากนั้นเราสามารถเลือกตัว Database ตัวอื่น ๆ ที่เหมาะสมกับ Production ได้ อย่างเช่น PostgreSQL, MySQL, Oracle, MariaDB โดยตัวที่ผมแนะนำที่สุดเลยก็คือ PostgreSQL ครับ เพราะว่า Database ตัวนี้ Full Options ที่สุดสำหรับ Django

จากนั้นไปที่ models.py เพื่อที่จะเริ่มทำการสร้างตารางกันครับ

models.py

สร้างตาราง

โดยในไฟล์ models.py ผมจะทำการสร้างตารางเพื่อใช้สำหรับเก็บข้อมูล โดยจะเห็นว่าผมไม่ได้เขียน SQL เลยซักตัว ซึ่งปกติการสร้างตารางลงในฐานข้อมูลเราจะต้องเขียน SQL เข้าไปตรง ๆ กันใช่ไหมครับ แต่ Django มีตัว ORM มาให้แล้วไม่ต้องดาวน์โหลดจากไลบรารี่ข้างนอก ซึ่งตรงนี้ตัว ORM มันช่วยลดงานของเราลงไปได้เยอะเลยครับ โดยเมื่อเราเขียนเสร็จและก่อนที่จะมีการ migrate ตารางลงในฐานข้อมูล ตัว ORM ที่เราเขียนก็จะถูกแปลงไปเป็นภาษา SQL ให้โดยอัตโนมัติครับ แทบจะเรียกได้ว่าเรากำลังเขียนภาษาไพธอนในการสร้างตารางลงในฐานข้อมูล…บ้าไปแล้ว ?? แต่ว่ามันคือเรื่องจริงครับ โดยผมจะขออธิบายรายละเอียดคร่าว ๆ ในไฟล์นี้

1. class (ชื่อตาราง) ซึ่งชื่อตารางในที่นี้คือ NewsPost
2. object (ชื่อคอลัมน์) ซึ่งชื่อคอลัมน์ในที่นี้คือ title, post, และ date_published
3. field (ชนิดของข้อมูล) ซึ่งชนิดของข้อมูลในตารางนี้จะมี 2 ชนิดคือ CharField(ข้อมูลแบบสตริง) และ DateTimeField(ข้อมูลวันที่และเวลา)

ส่วนฟังก์ชัน __str__ ด้านล่าง จะมีการรีเทิร์น title หรือชื่อเรื่องออกไปที่หน้า Admin เพื่อให้ง่ายต่อการอ่านนั่นเอง ซึ่งโดยปกติถ้าไม่เขียนฟังก์ชันนี้ ตัว models จะรีเทิร์น Object ออกไป อย่างเช่น object1, object2 ทำให้ยากต่อการอ่านและคาดเดา ว่าบทความนี้เป็นบทความเรื่องอะไรกันแน่ เวลาจะทำการแก้ไขในหน้าแอดมิน จะทำให้มีความยุ่งยากเป็นอย่างมาก

models.py

ตามกฎ pep8 ซึ่งเป็นมาตรฐานในการเขียนโค้ดของภาษาไพธอน การตั้งชื่อ class จะเป็นแบบ CamelCase คือขึ้นต้นด้วยตัวพิมพ์ใหญ่ของแต่ละคำและเขียนติดกันไม่มี underscore คั่น ส่วน object หรือตัวแปรจะเขียนด้วยตัวพิมพ์เล็กทั้งหมด และเมื่อมีคำที่ไม่เหมือนกันจะคั่นด้วย underscore

เมื่อทำการสร้างตารางเสร็จแล้วจากนั้นก็ทำการ make migration เพื่อเช็คหรืออัปเดตว่าเราได้ทำอะไรไปกับตัว model ของเราบ้างหรือมีอะไรเปลี่ยนแปลงบ้างในไฟล์นี้ ซึ่งแน่นอนครับว่าผมได้ทำการสร้างตาราง

โดยขั้นตอนในการ migrate ตารางไปที่ Database ก็จะมี 2 ขั้นตอน 2 คำสั่งดังนี้

1. py manage.py makemigrations
2. py manage.py migrate

โดยคำสั่งแรกจะเป็นการตรวจเช็คและอัปเดต ส่วนคำสั่งที่สองจะเป็นการ migrate ตารางไปในฐานข้อมูล

ทำการรันคำสั่งได้เลย โดยก่อนที่จะรันก็กดออกจากเซิร์ฟเวอร์มาเสียก่อน โดยกด ctrl + c โดยก่อนรัน ไม่จำเป็นต้อง save ครับ เพราะว่า PyCharm จะ auto save

รัน

py manage.py makemigrations

No change detected

เมื่อทำ migrations จะเห็นว่าเกิดเออเร่อ “No changes detected” ซึ่งหมายถึงตัวโปรแกรมตรวจไม่พบ app ของเรานั่นเอง ซึ่งเราจำเป็นต้องทำการ Register แอปก่อนครับ ทุกครั้งที่มีการสร้างแอปใหม่ โดยในโปรเจคท์นี้ ก็เป็นโปรเจคท์เล็ก ๆ ดังนั้น 1 แอปก็เพียงพอแล้ว ดังนั้นจึงติดตั้งเพียงแค่ครั้งเดียวครับ ไปที่ไฟล์ settings.py จากนั้นทำการ register ชื่อแอปลงไปได้เลย ซึ่งชื่อแอปของผมก็คือ newsapp

ทำการ register ชื่อแอปของเราลงไปได้เลยครับ

มาถึงขั้นตอนนี้ก็น่าจะไม่มีปัญหาแล้วครับ ทำการ make migrations ลองดูอีกครั้ง

py manage.py makemigrations

ตรวจพบตารางเรียบร้อย

จากนั้นทำการ migrate ไปที่ฐานข้อมูลได้เลย

ตารางต่าง ๆ ถูก migrate ไปที่ฐานข้อมูลเรียบร้อย

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

เรียกดูข้อมูล

โดยทำการคลิ๊กที่ “Database” ด้านขวาบน ของโปรแกรม

สามารถเปิดดูฐานข้อมูลในโปรแกรม PyCharm ได้เลย

คลิ๊ก + → Data Source → SQLite

เลือกชื่อ Database ซึ่งในที่นี้คือ db ซึ่งก็คือชื่อ default ของ SQLite3

จากนั้นทำการสังเกตที่ path แสดงว่า path ถูกต้องไม่มีปัญหา และตัว root ของ path คือไฟล์ db.sqlite3 จากนั้นทำการทดสอบการเชื่อมต่อ โดยคลิ๊ก “Test Connection”

ติดตั้ง Driver Files ก่อน คลิ๊กเพื่อดาวน์โหลดได้เลย

เมื่อติดตั้ง Driver Files เสร็จเรียบร้อย ตอนนี้ผมก็สามารถเชื่อมต่อเพื่อดูข้อมูลใน Database ของ SQLite ได้แล้ว

เชื่อมต่อเพื่อดูข้อมูลใน Database ของ SQLite ได้เรียบร้อย

คลิ๊กเข้าไปดูข้อมูลในตารางตาม path ในรูปได้เลยครับ เมื่อลองนับดูจะเห็นว่ามีตารางทั้งสิ้น 13 ตาราง ซึ่งแบ่งเป็น ตารางที่มีมาให้สำเร็จพร้อม Django 10 ตาราง เช่นตาราง auth_user, django, session, etc ตารางที่เป็นตัว Default ติดมากับ SQLite3 2 ตารางล่างสุด และสุดท้ายคือตาราง model ที่ผมได้สร้างไว้ใน model ของผมนั่นก็คือตาราง newspost

จะเห็นได้ว่า ผมติดตั้งเพียงแค่ PyCharm Professional ผนวกกับความสะดวกรวดเร็วของ SQLite3 ก็สามารถเชื่อมต่อและดูข้อมูลใน Database ได้เสร็จสรรพ โดยที่ผมแทบไม่ต้องติดตั้งซอฟต์แวร์อะไรเพิ่มเลย

เมื่อผมคลิ๊กเข้าไปดูในตาราง newspost ข้อมูลในตารางก็จะปรากฎขึ้นมาทางด้านซ้ายมือ ซึ่งจะมีทั้งหมด 4 คอลัมน์ โดยคอลัมน์ id ซึ่งเป็น Unique Key หรือ Primary Key อันนี้เราไม่ต้องกำหนดเองครับ Django จะสร้างให้อัตโนมัติ ส่วนอีก 3 คอลัมป์ที่เหลือก็คือ title, post, และ date_published ซึ่งจะเห็นว่าตอนนี้ยังไม่มีข้อมูลใด ๆ ยังเป็นตารางเปล่า ๆ ก็เพราะว่าผมยังไม่ได้บันทึกข้อมูลอะไรลงไปในตารางนั่นเอง

ต่อมาเมื่อสามารถเชื่อมต่อและดูข้อมูลใน Database ได้แล้ว ผมก็จะเรียกใช้งานหน้า admin ของ Django โดยไปที่ Terminal แล้วพิมพ์คำสั่งดังต่อไปนี้

py manage.py createsuperuser

ซึ่งคำสั่งนี้จะเป็นการสร้าง superuser นั่นก็คือคนที่มีสิทธิสูงสุดในการใช้งานหน้า Admin

จากนั้นทำการกรอกข้อมูลดังนี้

username: stackpython → ชื่อ username

email: [email protected] → ชื่ออีเมล์ (สามารถเป็นค่าว่างได้ หรือใช้เมล์อะไรก็ได้ เป็นเมล์ที่ make ขึ้นมาก็ได้ครับยังไม่ต้องซีเรียสในจุดนี้)

จากนั้นตั้งรหัสผ่านได้ตามต้องการเลยครับ แล้วทำการยืนยันรหัสผ่านอีกรอบ โดยผมจะตั้งเอาให้จำง่ายในระหว่างการพัฒนาใน localhost

password: 1234

confirm password: 1234

สร้าง superuser เพื่อเข้าใช้งานหน้า admin

เมื่อตั้งรหัสผ่านและยืนยันเรียบร้อย Django ก็จะถามเราว่า รหัสผ่านนี้ง่ายเกินไปและเป็นตัวเลขทั้งหมด(ซึ่งจริง ๆ ควรจะเป็นตัวเลขผสมตัวหนังสือ) และยังยืนที่จะใช้รหัสผ่านนี้หรือไม่ จากนั้นผมก็กด y(yes) เพื่อยืนยันว่าใช้รหัสผ่านนี่แหละ

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

เมื่อได้ username และ password ตามตั้งการแล้ว ตอนนี้ผมก็สามารถเข้าใช้งานหน้า admin ได้เรียบร้อยแล้วครับ ไปดูกันเลยว่าหน้า admin ของ Django มีรูปร่างหน้าตาแบบไหน โดยรันเซิร์ฟเวอร์ได้เลย

py manage.py runserver

เปิดหน้า Admin

จากนั้นในช่อง url ของหน้าเว็บบราวเซอร์ ผมจะทำการกรอกที่อยู่ของหน้า admin นั่นก็คือพิมพ์คำว่า admin ต่อท้าย หมายเลขไอพีแอดเดรสและพอร์ตได้เลย

127.0.0.1:8000/admin

ทำการล็อกอินเข้าใช้งานหน้า admin

เมื่อล็อกอินเข้าใช้งานหน้าแอดมินแล้ว จะปรากฎตารางอยู่ 2 ตาราง นั่นก็คือ Groups และ Users

หน้า Admin

ซึ่งผมทำการคลิ๊กเข้าไปดูข้อมูลในตาราง Users จะปรากฎชื่อ Username ของผมที่ได้ทำการสร้างไว้ก่อนหน้านี้ในขั้นตอนการสร้าง superuser

ตาราง Users

ซึ่งในตารางนี้ผมยังสามารถที่จะสร้าง User ขึ้นมาใหม่เพื่อแจก Username และ Password ให้กับ staff ได้อีกด้วย

สร้าง Username ใหม่ให้แก่ staff ได้

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

The Web framework for perfectionists with deadlines.

เมื่อทำการสำรวจหน้า admin กันพอหอมปากหอมคอกันแล้ว จากนั้นผมก็จะกลับไปที่โฟลเดอร์ app ของผม นั่นก็คือ newsapp

views.py

ซึ่งอย่างที่ได้กล่าวไปก่อนหน้านี้ครับว่า หน้านี้ใช้สำหรับการเขียน Business Logic หรือฟังก์ชันต่าง ๆ นั่นเอง

โดยจากโค้ดด้านล่างผมจะทำการสร้างฟังก์ชันที่มีชื่อว่า home โดยในฟังก์ชันนี้ตอนนี้ยังไม่ได้เขียนอะไรมากมาย จะมีเพียงแค่การ render template นั้นก็คือส่งหน้า html ออกไปแสดงผลนั่นเอง โดยปกติฟังก์ชัน render( ) จะรับ Arguments 3 ตัว นั่นก็คือ

ตัวแรก → request → ทำหน้าที่รับส่งข้อมูลระหว่าง client และ server

ตัวที่ 2 → template → ฝั่งหน้าบ้าน ที่ใช้แสดงผลหน้าเว็บเพจ ประกอบไปด้วยไพล์ html

ตัวที่ 3 → context(variable) → ตัวแปรที่ถูกส่งออกไปจากทางหน้า view แล้วส่งต่อไปยัง template เพื่อแสดงผล โดยชนิดข้อมูลในตัวแปรนี้จะเป็นแบบ dictionary

views.py

โดยในโค้ดด้านบนผมยังไม่ได้ส่งข้อมูลใด ๆ ออกไปผ่าน context(เพราะยังไม่ได้บันทึกข้อมูลลงไปในตาราง) จะมีเพียงการ render หน้า home.html ออกไป ซึ่งตอนนี้หลายคนอาจจะงงว่าแล้วไฟล์ html อยู่ไหน ยังไม่เห็นสร้างเลย ใช่ครับ เราจะสร้างไปพร้อม ๆ กันครับ

โดย path จะมีหน้าตาดังนี้

newsapp/templates/newsapp/home.html

home.html

โดยเหตุผลที่สร้างโฟลเดอร์และมีการจัดวางโครงสร้างที่ซ้อนกันแบบนี้ หลายคนอาจสงสัยว่า มันจะฟุ่มเฟือยไปหรือเปล่าหรือทำไปเพื่ออะไร แต่จงจำไว้ว่านี่คือ Best Practice เลยครับ เพราะว่าจริง ๆ ตัว Django จะกำหนดให้ templates เป็นที่เก็บไฟล์ html ซึ่งตัว templates จะถูกคอนฟิกไว้ที่ไฟล์ settings.py แล้วครับ ให้เป็น root directory เพราะว่าในฟังก์ชัน render( ) ในหน้า views.py จะไปมองหาไฟล์ html ในโฟลเดอร์ templates ครับ จินตนาการว่า ถ้าเรามี app หลาย ๆ ตัวในโปรเจคท์นี้โปรเจคท์เดียว และบาง app อาจมีหน้า html ที่ซ้ำกันเช่นหน้า home.html ตัว Django จะสับสนว่าจะไปเลือกเอาไฟล์ home.html ของตัวไหนกันแน่ ดังนั้นจึงไปเอาตัวแรกสุดก่อนเลยครับ ดังนั้นจึงเกิดปัญหาคือทุกครั้งที่มีการ render ตัวไฟล์ html ของแอปตัวที่ 2 จะไม่ถูกเรียกใช้งานเลย ดังนั้นเราจึงต้องมีการกำหนดตัวเครื่องหมายเพื่อให้ฟังก์ชัน render ไปค้นหาไฟล์ html ให้ถูก path และครบไม่มีขาดตกบกพร่องหรือลืมตัวไหนไปนั่นเองครับ

โดยผมได้สร้างไฟล์ html ที่มืชื่อว่า home.html ขึ้นมา แล้วทำการเขียนเพื่อแสดงผลคำว่า “Hello, home page” ในแท็ก h1

ตอนนี้ผมได้หน้า html ที่จะเอาไว้ใช้แสดงผลเรียบร้อยแล้วใช่ไหมครับ ในฝั่งของ views.py ผมก็ได้ render หน้า home.html ออกมาแสดงผลเรียบร้อย

แต่คำถามคือจะรู้ได้อย่างไรว่าจะต้องไปแสดงที่ url ไหน ?

แน่นอนครับ เราก็ต้องสร้าง route เพื่อรองรับ request จากฝั่ง client เมื่อมีการ request เข้ามาจะได้รู้ที่อยู่ของฟังก์ชัน home ที่เขียนไว้ใน views.py แต่อย่างที่บอกครับตอนนี้ฟังก์ชันนี้เรายังไม่ได้มีการ query หรือดึงข้อมูลใด ๆ มาจาก database

ไปสร้าง url กันได้เลยครับ

ไปที่ newsapp โฟลเดอร์ จากนั้นทำการคลิ๊กขวาที่โฟลเดอร์นี้ แล้วเลือก new → python file

สร้างไฟล์ไพธอนขึ้นมาอีก 1 ไฟล์

ตั้งชื่อไฟล์ว่า urls

newsapp.urls.py

ในไฟล์ urls.py(app) ในฟังก์ชัน path จะประกอบไปด้วย Arguments 3 ตัว

• url name
• function name
• url reference name

e.g. → path(‘url name’, function name, ‘url reference name’)

urls.py(app)

update 1

เพิ่ม Bootstrap เข้ามาใช้ในเว็บ

ไปที่หน้าเว็บไซต์ของ Bootstrap

เรียกใช้งาน Bootstrap CSS โดย

• คัดลอก CDN ของ Bootstrap ตรง CSS Only ไปวางไว้ในไฟล์ home.html ด้านล่าง <title> Home </title> คัดลอก CDN ของ Bootstrap CSS
• คัดลอก Navbar Template ของ Bootstrap เข้ามาในไฟล์ home.html โดยนำไปวางไว้ในส่วนบนสุดของ body tag คัดลอก Navbar Templateเมื่อทำการอิมพอร์ต Bootstrap CDN และ Navbar Template เข้ามาใช้

home.html (old version)

<!DOCTYPE html> <html lang="en"> <head>

<meta charset="UTF-8">  
<title>Home</title>

</head>  

<h1> Hello, home page </h1>

home.html (new version)

<!DOCTYPE html> <html lang="en"> <head>

<meta charset="UTF-8">  
<title>Home</title>  
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">  

navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>  

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">  
  <li class="nav-item active">  
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">Link</a>  
  </li>  
  <li class="nav-item dropdown">  
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">  
      Dropdown  
    </a>  
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">  
      <a class="dropdown-item" href="#">Action</a>  
      <a class="dropdown-item" href="#">Another action</a>  
      <div class="dropdown-divider"></div>  
      <a class="dropdown-item" href="#">Something else here</a>  
    </div>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link disabled" href="#">Disabled</a>  
  </li>  
</ul>  
<form class="form-inline my-2 my-lg-0">  
  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">  
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>  
</form>  

<h1> Hello, home page </h1>

Navigation bar พร้อมใช้งานแล้วครับ

ตอนนี้ Navigation bar template ที่ผมคัดลอกมาจาก Bootstrap จะเป็นแบ็คกราวน์สีขาว ซึ่งดูไม่ค่อยชัด ดังนั้นผมจะเปลี่ยนเป็นโทน dark เพื่อให้ดูง่าย ผมก็ทำการเปลี่ยนสีแบ็คกราวน์ของ nav class จาก light เป็น dark

เป็นแบ็คกราวน์ของ Navigation Bar จาก light เป็น dark

จากนั้นทำการรีเฟรชหน้าเว็บที่เปิดอยู่ได้เลย

แบ็คกราวน์ของ Navigation Bar ก็จะเปลี่ยนเป็นโทน dark ซึ่งจะดูง่าย

สำหรับบทความนี้ขอจบเพียงเท่านี้ก่อนครับ ซึ่งบอกตรง ๆ ว่าบทความนี้ผมเขียนตั้งแต่ตี 5 แล้วก็มีพักบ้าง เขียนบ้างจนตอนนี้ยังไม่เสร็จ ฮ่า ๆ(เหลืออีกประมาณ 30%) แต่อยากให้ทุกท่านได้อ่านกันก่อนครับ ซึ่งยอมรับว่าเป็นบทความที่เขียนยาวนานมากกกกก (ไก่ล้านตัว) เดี๋ยวผมมาอัปเดตและเขียนต่อให้จบครับ ซึ่งผมรับรองได้เลยว่าถ้าทุกท่าน ตั้งใจอ่านและทำตามบทความนี้ ท่านจะต้องเข้าใจคอนเซ็ปต์และโพรเซสการทำงานของ Django พอสมควรอย่างแน่นอนครับ

ถ้าท่านใดที่ต้องการศึกษา Django ผมแนะนำว่าให้ศึกษาคอนเซ็ปต์ เพื่อมองภาพรวมให้ออก จากนั้นเมื่อรู้คอนเซ็ปต์แล้ว ศึกษาได้ใน Official Website ของ Django ได้เลยครับ เพราะว่า Django สำหรับผม ยอมรับได้เลยว่า เป็นหนึ่งในเฟรมเวิร์คที่เขียน Documents ออกมาได้ดี ละอ่านเข้าใจได้ง่ายและละเอียดที่สุด