สวัสดีครับพบกันอีกแล้วกับบทความ Django + React นี้ก็มาถึงบทความที่ 3 แล้วเราได้สร้าง API โดยใช้ Django REST Framework จากนั้นได้ดึงข้อมูลที่เก็บไว้ใน Database มาแสดงผลบน Website แล้วถ้ามันนอกเหนือจากนั้นละถ้าเราต้องการเพิ่มข้อมูลใน Database เราจะทำมันได้อย่างไร นั้นละเป็นสิ่งที่เราจะมาเรียนรู้ในบทความนี้ซึ่งบทความนี้จะพาเขียน React ล้วนๆเพราะในส่วนของ API เราได้ตั้งค่าจบไปแล้วใน Ep. 1 และ Ep. 2 เหลือแต่นำมาใช้โดยที่เราจะต้องเขียนโค้ดเพื่มในส่วนของ Frontend เพื่อที่จะทำให้ผู้ใช้เว็บสามารถเพิ่มข้อมูลของ hero ได้ผ่านทางเว็บที่เป็นส่วนของผู้ใช้เองไม่ต้องไปเพิ่มในหน้า admin เกริ่นมาพอสมควรแล้วเรามาเริ่มลงมือทำกันเลยดีกว่า
Note: ควรอ่าน
Django REST Framework + React.js [Ep.1]
Django REST Framework + React.js [Ep.2]
ก่อนที่เราจะส่งข้อมูลเพิ่มไปใน Database เราจะต้องรู้ว่าข้อมูลที่จะส่งไปมีรูปแบบอย่างไรตามที่ API กำหนดเพื่อให้สามารถเพิ่มข้อมูลลงใน Database ได้แล้วเราจะรู้ได้อย่างไรละว่า API นั้นต้องการอะไรบ้างในส่วนของ Django REST Framework นั้นเราสามารถที่จะดูผ่าน Browser ได้ทำให้ง่ายต่อการ dev เพื่อที่จะดูเราต้องรันเซิร์ฟเวอร์ Django ขึ้นมา
python manage.py runserver
แล้วไปที่หน้า http://127.0.0.1:8000/api/ เลื่อนไปข้างล่างสุดเราจะเห็นข้อมูลที่ API นั้นต้องการให้ส่งมาเพิ่มข้อมูลโดยเราจะต้องกดเลือกไปที่ Raw data ทำให้ดูง่ายเหมือนกับมี API Document เลยแค่นี้เราก็สามารถดูได้แล้วครับว่าในการเพิ่มข้อมูล Hero นั้นต้องมีข้อมูล name, description
ในการพัฒนาเว็บด้วย Django REST Framework นั้นทำได้อย่างรวดเร็วเพราะเราสามารถลดขั้นตอนที่ยุ่งยากบางอย่างไปได้เช่นเรื่องการเขียน API Document แต่ท้ายที่สุดก็ต้องเขียนอยู่ดีแต่ถ้าเป็นโปรเจกต์ที่เร่งรีบต้องทำงานไปพร้อมกันในส่วนนี้ก็ลดภาระให้กับ Backend ได้เยอะและยังสามารถเขียนคนเดี่ยวง่ายขึ้นด้วย
เอาหล่ะโม้มาพอแล้วหลังจากนี้เราจะมาเขียน form ที่จะเป็นตัวรับ input จากผู้ใช้เพื่่อที่จะเพิ่ม hero ใหม่เข้าไปใน database สามารถเขียน html ธรรมดาเลยใน app.js ตามนี้
<form>
<div>
<label>Name : </label>
<input
type="text"
/>
</div>
<div>
<label>Description : </label>
<textarea
rows="4"
/>
</div>
<input id="submit" type="submit" value="Add Hero"/>
</form>
Note: ควรรัน django project ด้วยเพื่อให้ API ที่เขียนไว้ทำงานได้
โดยเราจะทดลองรัน Frontend โดยพิมคำสั่ง
yarn start
ก็จะได้ form แบบนี้
โดยสามารถที่จะปรับเปลี่ยนรูปแบบ form ได้ตามที่ต้องการเลยนะครับอันนี้ผมก็แต่งไปบ้างแต่ไม่ได้แต่งเยอะ (สามารถเพิ่ม css ใน App.css)
เราได้ Input Field มาแล้วสอง fields เพื่อที่จะให้ User กรอกข้อมูล hero และเพิ่ม hero เข้าไปใน Database โดยขั้นตอนถัดไปคือเราต้องเก็บค่า Input ที่รับมาจาก User แล้วเอาไปเก็บอยู่ในตัวแปร อันดับแรกต้องสร้างตัวแปรขึ้นมาโดยเราจะใช้ useState() เช่นเดิม
const [newHero, setNewHero] = useState({
name: "",
description: "",
});
จะเห็นว่าตัวแปรที่สร้างขึ้นมานั้นเป็น Object ที่รองรับการเก็บข้อมูล hero เพื่อที่จะเตรียมส่งข้อมูลไปเก็บใน Database ตามที่ api กำหนดซึ่งจะมี name, description อยู่ด้านในโดยการที่เราจะนำข้อมูลที่ User กรอกไปเก็บในตัวแปร newHero เราจะต้องใช้ setNewHero โดยจะดัก even ผ่านทาง function onChange ใน input tag และ textarea จะเขียนได้ตามนี้
<form>
<div>
<label>Name : </label>
<input
type="text"
value={newHero.name}
onChange={(e) => setNewHero({ ...newHero, name: e.target.value })}
/>
</div>
<div>
<label>Description : </label>
<textarea
rows="4"
value={newHero.description}
onChange={(e) =>
setNewHero({ ...newHero, description: e.target.value })
}
/>
</div>
<input id="submit" type="submit" value="Add Hero"/>
</form>
เมือเราทดลอง console.log(newHero) แล้วกด inspect ดูแล้วทดลองกรอกข้อมูลลงใน input เราก็จะเห็นข้อมูลที่อยู่ใน newHero แบบนี้
ขั้นตอนถัดไปคือการเอาข้อมูลที่ได้จาก User ส่งไปหา Backend โดยผ่าน API เราจะใช้ Fetch API ในการส่งข้อมูลผ่านทาง API (สามารถใช้ axios ได้) การส่งข้อมูลนั้นเราต้องใช้ method POST ส่วนการดึงข้อมูลมาแสดงนั้นเราจะใช้ method GET ซึ่งมีความแตกต่างกันอยู่อยากให้ทุกคนลองไปหาอ่านเพิ่มเติมกันนะครับ โดยเราจะสร้าง handleSubmit() ขึ้นมาเป็นตัวที่เมื่อเรากดปุ่ม Add submit จะทำให้ handleSubmit() ทำงานโดยเขียนได้ตามนี้ครับ
function handleSubmit(e) {
e.preventDefault();
let url = "http://127.0.0.1:8000/api/";
fetch(url, {
method: "POST",
headers: { "Content-type": "application/json" },
body: JSON.stringify(newHero),
})
.then((response) => {
fetchHeros();
setNewHero({name: '', description: ''})
})
.catch((err) => console.log(err));
}
จะเห็นว่า Fetch() นั้นมีการกำหนด method POST ซึ่งถามว่าเป็น GET ได้ไหม ก็ได้นะครับแต่ถ้าต้องการความปลอดภัยควรจะกำหนดเป็น POST และทุกครั้งที่เรามีการส่งข้อมูลจำเป็นต้องกำหนด headers ของเราเสมอเพื่อบอกว่าข้อมูลที่เราส่งไปนั้นอยู่ในรูปแบบอะไรไม่งั้นจะขึ้น error 415 จะเห็นว่าข้อมูลที่ User กรอกนั้นถูกส่งผ่านทาง Body เพื่อความปลอดภัยของข้อมูล เมื่อส่งเสร็จแล้วผมก็เขียนให้มันเคลียร์ค่าใน newHero ด้วยและทำการดึงข้อมูล hero ใหม่อีกครั้งทำให้หน้าเว็บมีการอัพเดท hero ใหม่โดยไม่ต้อง Refresh
แต่ยังไม่เสร็จนะครับเราต้องเพิ่ม handleSubmit() ลงใน form tag ด้วยครับตามนี้
<form onSubmit={handleSubmit}>
เสร็จแล้วครับเรามาทดลองเพิ่ม hero คนใหม่เข้าไปใน database ผ่านเว็บที่เราสร้างกันดีกว่าเริ่ม run server frontend และ backend
backend (Django)
python manage.py runserver
frontend (React)
yarn start
เข้าไปที่หน้าเว็บ http://localhost:3000/ แล้วทดลองเพิ่ม Hulk เข้าไปจะเห็นว่า Hero จะเพิ่มมาอีก 1 คนแบบนี้
แล้วถ้าเราไปดูใน django ที่หน้า admin ก็จเห็นว่ามีข้อมูล Hulk ขึ้นมาดังนี้
จบแล้วนะครับในบทความนี้ผมหวังว่าจะเป็นประโยชน์ให้กับผู้อ่านไม่มากก็น้อยนะครับยังไงก็ใครที่ชอบบทความเกี่ยวกับ react ก็สามารถเรียกร้องมาได้นะครับผมอาจจะทำบทความ react แบบเพรียว ๆ มาให้อ่านกันเลยก็ได้ครับถ้าเกิดมีคำถามอะไรสงสัยก็สามารถคอมเม้นได้แล้วถ้าจะติชมแนะนำก็สามารถคอมเม้นมาได้เช่นกันครับในส่วนของโค้ดในหน้า app.js ผมจะเอามาให้ดูนะครับเพื่อให้สับสนว่าโค้ดแต่ละส่วนวางตรงไหน
สามารถติดตามเราได้ที่
Facebook: stackpython
Youtube: stackpython
Source code in app.js : Github Gist
หนึ่งในบทความที่รวบรวมเอาการประยุกต์ใช้งาน Python Chatbot ไว้ครบครันโดยประยุกต์เข้ากับ Line, DialogFlow, Flask และ Heroku
March 4, 2021
PyCharm เรียกได้ว่าเป็นหนึ่งในเครื่องมือที่ใช้สำหรับเขียน Python ที่ดีที่สุด บทความนี้จะมารีวิวระหว่างตัว Free และ Pro กันครับ
March 3, 2021
สร้าง GUI ด้วยภาษา Python โดยใช้ Tkinter และในบทความนี้นอกจากเราจะมาทำความ เข้าใจกับ Tkinter แล้ว ยังจะมีการอธิบาย widgets และ layouts ต่าง ๆ ด้วย
March 1, 2021
คอร์สนี้เป็นหนึ่งในคอร์สที่มาแรงที่สุดของปีนี้ในส่วนของ Python Web Development
฿ 2,500 1,250 บาท
คอร์สนี้เป็นหนึ่งในคอร์สที่มาแรงที่สุดของปีนี้ในส่วนของ Python Web Development
฿ 9,900 บาท
คอร์สนี้เป็นหนึ่งในคอร์สที่มาแรงที่สุดของปีนี้ในส่วนของ Python Web Development
฿ 2,500 บาท