เรียนรู้การใช้งาน Django Rest Framework with React.js [EP.3]

สวัสดีครับพบกันอีกแล้วกับบทความ 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]

Create Form

ก่อนที่เราจะส่งข้อมูลเพิ่มไปใน 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 แบบนี้

Sending form data with the Fetch API

ขั้นตอนถัดไปคือการเอาข้อมูลที่ได้จาก 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 ขึ้นมาดังนี้

http://127.0.0.1:8000/admin

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

สามารถติดตามเราได้ที่
Facebook: stackpython
Youtube: stackpython

Source code in app.js :  Github Gist