How to Create a CRUD App with jQuery?

บทนำ คู่มือนี้จะพาคุณไปสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) แบบครบวงจรโดยใช้ jquery เราจะใช้ back4app เป็นบริการแบ็กเอนด์ของเราเพื่อทำให้การจัดการข้อมูลง่ายขึ้น ในบทเรียนนี้ คุณจะได้สำรวจวิธีการตั้งค่าโปรเจกต์ back4app ออกแบบสคีมาที่ยืดหยุ่น และนำฟังก์ชัน crud ไปใช้กับ jquery ผ่านการเรียก rest api เราจะเริ่มต้นด้วยการตั้งค่าโปรเจกต์ back4app ที่ชื่อว่า basic crud app jquery โปรเจกต์นี้ให้โซลูชันการจัดเก็บข้อมูลที่ไม่สัมพันธ์กันและสามารถขยายได้ คุณจะกำหนดโมเดลข้อมูลของคุณโดยการสร้างคลาสและฟิลด์โดยตรงภายใน back4app ไม่ว่าจะด้วยตนเองหรือด้วยความช่วยเหลือจาก ai agent ของ back4app หลังจากนั้น คุณจะได้เรียนรู้การจัดการข้อมูลของคุณโดยใช้ back4app admin app—อินเทอร์เฟซที่ใช้งานง่ายและสามารถลากและวางได้ สุดท้าย คุณจะเชื่อมต่อส่วนหน้าที่ขับเคลื่อนด้วย jquery กับ back4app ผ่านการเรียก rest api เพื่อให้แน่ใจว่าการเข้าถึงที่ปลอดภัยยังคงอยู่ เมื่อสิ้นสุดบทเรียนนี้ คุณจะมีแอปพลิเคชัน jquery ที่พร้อมสำหรับการผลิตซึ่งสามารถดำเนินการ crud ขั้นพื้นฐานพร้อมกับการตรวจสอบสิทธิ์ผู้ใช้ที่ปลอดภัยและการจัดการข้อมูล ข้อสรุปสำคัญ สร้างแอปพลิเคชัน crud ที่ใช้ jquery โดยใช้แบ็คเอนด์ที่มีความสามารถสูง เข้าใจวิธีการออกแบบแบ็คเอนด์ที่สามารถขยายได้และรวมเข้ากับส่วนหน้าของ jquery ของคุณ เรียนรู้การใช้แอป back4app admin ที่ใช้งานง่ายสำหรับการจัดการข้อมูลอย่างมีประสิทธิภาพ ค้นพบกลยุทธ์การปรับใช้รวมถึงการทำให้เป็นคอนเทนเนอร์เพื่อเปิดตัวแอปพลิเคชันของคุณอย่างราบรื่น ข้อกำหนดเบื้องต้น ก่อนที่จะเริ่มต้น ให้แน่ใจว่าคุณมี บัญชี back4app และตั้งค่าโครงการใหม่ ต้องการคำแนะนำ? เยี่ยมชม เริ่มต้นใช้งานกับ back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนาเว็บที่ใช้งานได้ ใช้โปรแกรมแก้ไขโค้ดเช่น vscode, sublime text หรือโปรแกรมที่คล้ายกัน และตรวจสอบให้แน่ใจว่าคุณมีเบราว์เซอร์ที่ทันสมัยสำหรับการทดสอบ ความรู้พื้นฐานเกี่ยวกับ jquery, javascript และ rest apis หากต้องการทบทวน ให้ตรวจสอบ เอกสาร jquery https //api jquery com/ ขั้นตอนที่ 1 – การตั้งค่าโครงการ สร้างโปรเจกต์ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “new app” บนแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app jquery และทำตามคำแนะนำบนหน้าจอเพื่อเสร็จสิ้นการตั้งค่า สร้างโปรเจกต์ใหม่ หลังจากสร้างแล้ว โปรเจกต์ของคุณจะปรากฏบนแดชบอร์ด ซึ่งเป็นการวางรากฐานสำหรับการกำหนดค่าด้านหลังของคุณ ขั้นตอนที่ 2 – การออกแบบโมเดลข้อมูล การกำหนดโครงสร้างข้อมูลของคุณ สำหรับแอปพลิเคชัน crud นี้ คุณจะสร้างหลายคลาส (คอลเลกชัน) ใน back4app ด้านล่างนี้คือคลาสหลักและฟิลด์ที่จำเป็นสำหรับการดำเนินการ crud 1\ คลาสรายการ คลาสนี้เก็บข้อมูลเกี่ยวกับแต่ละรายการ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อของรายการ คำอธิบาย สตริง คำอธิบายสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่รายการถูกเพิ่มเข้ามา อัปเดตเมื่อ วันที่ เวลาที่มีการแก้ไขล่าสุด 2\ ประเภทผู้ใช้ คลาสนี้จัดการข้อมูลประจำตัวผู้ใช้และรายละเอียดการตรวจสอบสิทธิ์ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลของผู้ใช้ รหัสผ่านแฮช สตริง รหัสผ่านที่เข้ารหัสสำหรับการเข้าสู่ระบบอย่างปลอดภัย สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตบัญชีล่าสุด คุณสามารถเพิ่มคลาสและฟิลด์เหล่านี้ด้วยตนเองผ่านแดชบอร์ด back4app สร้างชั้นเรียนใหม่ ในการเพิ่มฟิลด์ ให้เลือกประเภทข้อมูล ป้อนชื่อฟิลด์ ตั้งค่าเป็นค่าเริ่มต้นหากจำเป็น และทำเครื่องหมายว่าจำเป็นหากต้องการ สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema back4app ai agent ที่รวมเข้าด้วยกันสามารถสร้าง schema ของคุณโดยอัตโนมัติตามคำอธิบายสั้น ๆ ซึ่งช่วยให้การเริ่มต้นโครงการง่ายขึ้นและรับรองว่าโมเดลของคุณรองรับการดำเนินการ crud วิธีการใช้ ai agent เปิด ai agent เข้าสู่ระบบในแดชบอร์ด back4app ของคุณและไปที่ส่วน ai agent ภายใต้การตั้งค่าโปรเจกต์ อธิบาย schema ของคุณ ให้ข้อมูลรายละเอียดเกี่ยวกับคลาสและฟิลด์ที่ต้องการ ตรวจสอบและยืนยัน เมื่อ ai agent ประมวลผลข้อมูลของคุณ มันจะแนะนำ schema ตรวจสอบและอนุมัติเพื่อทำให้การตั้งค่าของคุณเสร็จสมบูรณ์ ตัวอย่างคำสั่ง create these classes in my back4app project 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) class users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) กระบวนการที่ช่วยด้วย ai นี้ไม่เพียงแต่ประหยัดเวลา แต่ยังช่วยให้แน่ใจว่า schema ข้อมูลมีความสอดคล้องและได้รับการปรับให้เหมาะสม ขั้นตอนที่ 3 – เปิดใช้งาน admin app & จัดการ crud operations เริ่มต้นใช้งานแอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app มีโซลูชันที่ไม่ต้องเขียนโค้ดสำหรับการจัดการข้อมูลแบ็กเอนด์อย่างมีประสิทธิภาพ อินเทอร์เฟซที่ใช้งานง่ายแบบลากและวางช่วยให้กระบวนการดำเนินการ crud เช่น การเพิ่ม การดู การแก้ไข และการลบระเบียนเป็นเรื่องง่ายขึ้น การเปิดใช้งานแอปผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” บนแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” และคลิกที่ “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบของคุณ โดยการสร้างบัญชีผู้ดูแลระบบเริ่มต้น ซึ่งจะกำหนดบทบาท (เช่น b4aadminuser ) และคลาสระบบ เปิดใช้งานแอปผู้ดูแลระบบ เมื่อเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลระบบเพื่อจัดการข้อมูลแอปพลิเคชันของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การใช้แอปผู้ดูแลระบบสำหรับการดำเนินการ crud ภายในแอปผู้ดูแลระบบ คุณสามารถ แทรกรายการ คลิก “เพิ่มรายการ” ภายในคลาส (เช่น รายการ) เพื่อเพิ่มข้อมูลใหม่ ดูและแก้ไขรายการ เลือกรายการเพื่อตรวจสอบรายละเอียดหรือแก้ไขฟิลด์ ลบรายการ ลบรายการที่ไม่จำเป็นอีกต่อไป เครื่องมือนี้ช่วยให้การจัดการข้อมูลเป็นเรื่องง่าย ทำให้คุณสามารถมุ่งเน้นไปที่ตรรกะด้านหน้า ขั้นตอนที่ 4 – การเชื่อมโยงแอป jquery ของคุณกับ back4app ตอนนี้ที่แบ็กเอนด์ของคุณถูกกำหนดค่าแล้ว ถึงเวลาที่จะเชื่อมต่อแอปพลิเคชันที่ใช้ jquery ของคุณกับ back4app การทำ ajax calls ด้วย jquery แทนที่จะใช้ parse sdk คุณจะทำการเรียก rest api โดยตรงโดยใช้วิธี ajax ของ jquery ด้านล่างนี้คือตัวอย่างวิธีการทำ crud operations การดึงข้อมูลรายการ $ ajax({ url 'https //parseapi back4app com/classes/items', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(response) { console log('items retrieved ', response results); }, error function(error) { console error('error fetching items ', error); } }); การสร้างรายการ $ ajax({ url 'https //parseapi back4app com/classes/items', method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data json stringify({ title 'new item', description 'a brief description of the new item ' }), success function(response) { console log('item created ', response); }, error function(error) { console error('error creating item ', error); } }); การอัปเดตรายการ $ ajax({ url 'https //parseapi back4app com/classes/items/your item id', method 'put', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data json stringify({ title 'updated title', description 'updated description ' }), success function(response) { console log('item updated ', response); }, error function(error) { console error('error updating item ', error); } }); การลบรายการ $ ajax({ url 'https //parseapi back4app com/classes/items/your item id', method 'delete', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(response) { console log('item deleted ', response); }, error function(error) { console error('error deleting item ', error); } }); รวม ajax calls เหล่านี้เข้ากับสคริปต์ jquery ของคุณตามที่ต้องการเพื่อจัดการ crud operations ในแอปพลิเคชันของคุณ ขั้นตอนที่ 5 – การรักษาความปลอดภัยแบ็กเอนด์ของคุณ การกำหนดค่ารายการควบคุมการเข้าถึง (acls) ปกป้องข้อมูลของคุณโดยการตั้งค่า acls สำหรับวัตถุของคุณ ตัวอย่างเช่น เพื่อสร้างรายการที่เจ้าของเท่านั้นที่สามารถอ่านและเขียนได้ var acl = { " " { "read" false, "write" false }, "owner user id" { "read" true, "write" true } }; $ ajax({ url 'https //parseapi back4app com/classes/items', method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data json stringify({ title 'private item', description 'this item is only accessible by its owner ', acl acl }), success function(response) { console log('private item created ', response); }, error function(error) { console error('error creating private item ', error); } }); การตั้งค่าการอนุญาตระดับคลาส (clps) ใช้แดชบอร์ด back4app เพื่อกำหนดค่า clps โดยมั่นใจว่าผู้ใช้ที่ผ่านการตรวจสอบแล้วเท่านั้นที่มีสิทธิ์เข้าถึงคลาสที่ละเอียดอ่อน ขั้นตอนที่ 6 – การดำเนินการตรวจสอบผู้ใช้ การจัดการบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ที่สร้างขึ้นในตัวเพื่อจัดการการตรวจสอบ ในแอป jquery ของคุณ คุณสามารถจัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้ด้วยการเรียก rest api การลงทะเบียนผู้ใช้ใหม่ $ ajax({ url 'https //parseapi back4app com/users', method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data json stringify({ username 'newuser', password 'securepassword', email 'newuser\@example com' }), success function(response) { console log('user registered ', response); }, error function(error) { console error('registration error ', error); } }); การเข้าสู่ระบบผู้ใช้ $ ajax({ url 'https //parseapi back4app com/login', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, data { username 'newuser', password 'securepassword' }, success function(response) { console log('user logged in ', response); }, error function(error) { console error('login error ', error); } }); การเข้าสู่ระบบผู้ใช้ คุณสามารถขยายวิธีการเหล่านี้เพื่อจัดการเซสชัน การรีเซ็ตรหัสผ่าน และฟีเจอร์การตรวจสอบสิทธิ์อื่น ๆ ได้ ขั้นตอนที่ 7 – การปรับใช้แอปพลิเคชัน jquery ของคุณ back4app มีขั้นตอนการปรับใช้ง่าย ๆ คุณสามารถปรับใช้แอปพลิเคชัน jquery ของคุณโดยใช้วิธีการต่าง ๆ รวมถึงการโฮสต์เว็บไซต์แบบสแตติกหรือการทำคอนเทนเนอร์ 7 1 การเตรียมแอปพลิเคชันของคุณ สร้างและบีบอัด ใช้เครื่องมือเช่น webpack หรือ gulp เพื่อรวมและบีบอัดสคริปต์ jquery ของคุณ ตรวจสอบทรัพย์สิน ตรวจสอบให้แน่ใจว่าไฟล์ html, css และ javascript ทั้งหมดของคุณถูกคอมไพล์อย่างถูกต้อง 7 2 การจัดระเบียบโครงสร้างโปรเจกต์ของคุณ รูปแบบโปรเจกต์ทั่วไปอาจมีลักษณะดังนี้ basic crud app jquery/ \| index html \| css/ \| | styles css \| js/ \| | app js \| | jquery min js \| assets/ \| | images/ \| | logo png \| readme md ตัวอย่าง ajax crud ใน app js $(document) ready(function() { // fetch and display items function loaditems() { $ ajax({ url 'https //parseapi back4app com/classes/items', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(response) { $('#itemscontainer') empty(); $ each(response results, function(index, item) { $('#itemscontainer') append('\<div>' + '\<h3>' + item title + '\</h3>' + '\<p>' + item description + '\</p>' + '\</div>'); }); }, error function(error) { console error('error loading items ', error); } }); } // call the function on page load loaditems(); }); 7 3 การปรับใช้แอปพลิเคชันของคุณ การโฮสต์แบบสแตติก อัปโหลดไฟล์โปรเจกต์ของคุณไปยังผู้ให้บริการโฮสติ้งแบบสแตติก เช่น github pages, netlify หรือ vercel การทำให้แอปพลิเคชันของคุณเป็น docker หากคุณชอบการทำให้เป็นคอนเทนเนอร์ ให้รวม dockerfile ไว้ในรากโปรเจกต์ของคุณ \# use an official node image to serve static files from node 14 alpine \# set the working directory workdir /app \# copy your project files into the container copy \# install a simple static server run npm install g serve \# expose the port used by the static server expose 3000 \# command to run the server cmd \["serve", " s", " "] หลังจากตั้งค่าสภาพแวดล้อม docker ของคุณแล้ว ให้เชื่อมโยงที่เก็บ github ของคุณในแดชบอร์ด back4app ภายใต้ การปรับใช้เว็บ กำหนดคำสั่งการสร้างหากจำเป็น และปรับใช้แอปพลิเคชันของคุณ ขั้นตอนที่ 8 – สรุปและขั้นตอนถัดไป ขอแสดงความยินดี! คุณได้สร้างแอปพลิเคชัน crud ที่ใช้ jquery ซึ่งรวมเข้ากับ back4app สำเร็จแล้ว ในบทแนะนำนี้ คุณได้ตั้งค่าโปรเจกต์ชื่อ basic crud app jquery , กำหนดสคีมาข้อมูลของคุณสำหรับ items และ users และจัดการข้อมูลของคุณผ่าน back4app admin app นอกจากนี้ คุณได้เชื่อมต่อส่วนหน้าของ jquery ของคุณผ่านการเรียก rest api และดำเนินการมาตรการด้านความปลอดภัยที่จำเป็น ขั้นตอนถัดไป ขยายแอปพลิเคชัน เพิ่มฟีเจอร์เช่นการกรองขั้นสูง, มุมมองรายละเอียด, หรือการอัปเดตแบบสด เพิ่มความสามารถของ backend สำรวจฟังก์ชันคลาวด์, รวม api ของบุคคลที่สาม, หรือดำเนินการเข้าถึงตามบทบาท พัฒนาทักษะของคุณ ดำดิ่งสู่ เอกสาร back4app https //www back4app com/docs และสำรวจบทแนะนำเพิ่มเติมสำหรับฟังก์ชันการทำงานที่ซับซ้อนมากขึ้น ขอให้สนุกกับการเขียนโค้ดและโชคดีในแอปพลิเคชัน crud ของคุณที่ใช้ jquery!