Diagrams ของ Database

หลายครั้งที่เราต้องเริ่ม Project ด้วยการวาด Database diagrams ออกแบบฐานข้อมูล เพื่อให้เห็นภาพรวมทั้งระบบรวมถึงนำไปประกอบในเอกสารของ Project ซึ่งถือเป็นสิ่งสำคัญอันดับแรกๆเลยในการออกแบบ เพราะส่วนใหญ่แล้วเท่าที่ผมเคยเจอมาจะมาตกม้าตายเรื่องการเก็บข้อมูล เพราะมันไม่เข้ากับ Design ของ Front-end ทางที่ดีออกแบบก่อนเริ่มโปรเจคจะทำให้ Developer เจ็บตัวน้อยที่สุดครับ

ขอเสนอ QuickDBD หรือ Quick Database Diagrams เป็นเครื่องมือออกแบบ Database ด้วยการเขียน code แบบ simple มากๆแถมหน้าตาสวยงามตามเทรน โดยการใช้งานแบบ Free นั้นจะจำกัดที่ 1 diagrams และไม่เกิน 10 Tables ซึ่งเพียงพอแล้วสำหรับโปรเจคเล็กๆถึงปานกลางเอาละมาเริ่มกันเลย

ให้เข้าไปที่เว็บไซต์นี้ Quick Database Diagrams

ถ้าใครที่ต้องการ Load simple data ให้เลือกเมนู File > Load Simple Diagrams จากนั้นให้เราดู code ด้านซ้ายขออธิบายง่ายๆแบบนี้

Product as p
--
ProductID PK int
Name varchar(200) UNIQUE
Price int

บรรทัดที่ 1 คือ ชื่อ Table = product และตั้ง Alise(ชื่อย่อ) ให้เป็น p

บรรทัดที่ 2 คือ การบอกว่าข้างล่างจะเป็น column ใน Table

บรรทัดที่ 3, 4, 5 คือ ชื่อ Column หรือ Field มีดังนี้

  • ProductID เป็น Primary มี Type เป็น integer
  • Name มี Type เป็น varchar ขนาด 200 และ UNIQUE(ห้ามซ้ำกัน)
  • Price มี Type เป็น Int

เราสามารถทำ Foreign Key ได้โดยการใช้คำสั่งนี้ ต่อหลังชื่อ Column

FK >- {table_name}.{table_column}

พอรวมร่างกันก็จะได้หน้าตาแบบนี้

ProductID int FK >- product.ProductID

ถ้าเราตั้ง Alise ชื่อ Table ไว้ก็จะสามารถย่อได้แบบนี้

ProductID int FK >- p.ProductID

ลองเขียนเต็มๆก็จะได้ Code หน้าตาประมานนี้

Users as u
--
ID int PK AUTOINCREMENT
Name varchar(100)
Address varchar(200)
Phone varchar(10)

Products as p
--
ID PK int
Name varchar(200) UNIQUE
Price int

Orders as o
--
ID PK int
UserID int FK >- u.ID
CreatedAt timestamp
UpdatedAt timestamp

OrderDetails as od
--
ID PK int AUTOINCREMENT
OrderID int FK >- o.ID
ProductID int FK >- p.ID
Amount int
Price int
demo diagrams ของ database
Database diagrams

เราสามารถดู Column type ได้จากเมนู Doc ด้านบนของเว็บเลย

การ Exports

การ Imports

เราสามารถนำไฟล์ SQL ที่เรามีอยู่มา import เพื่อสร้าง diagrams ได้เช่นกัน

เมนูสำหรับ import database ของ Quick Database Diagrams

Reference

เกี่ยวกับผู้เขียน

Itthipat Thitsarak

สวัสดีครับผม อิทธิพัทธ์ (เป้) เป็น Freelance Web developer ชอบหาเทคนิคต่างๆที่ทำให้ชีวิต Programmer ง่ายขึ้นโดย Blog นี้จะ สอน Laravel, Vuejs, CSS, HTML 5 และอื่นๆ ที่เกี่ยวกับการทำเว็บไซต์

ขอบคุณทุกคนที่ติดตาม และอ่านบทความของผมครับ หากใครมีคำถามหรืออยากให้ผมเขียนเกี่ยวกับเรื่องอะไรเพิ่มเติม สามารถแสดงความคิดเห็นไว้ที่ใต้บทความ หรือส่งเรื่องเข้ามาที่ Email ได้เลยครับ หัวข้อไหนน่าสนใจ ผมจะหยิบมาเขียนบทความให้ได้อ่านกันเรื่อยๆครับ

Scroll to Top
Scroll to Top