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 และตั้งค่าโครงการใหม่ ต้องการคำแนะนำ? เยี่ยมชม https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนาเว็บที่ใช้งานได้ ใช้โปรแกรมแก้ไขโค้ดเช่น vscode, sublime text หรือโปรแกรมที่คล้ายกัน และตรวจสอบให้แน่ใจว่าคุณมีเบราว์เซอร์ที่ทันสมัยสำหรับการทดสอบ ความรู้พื้นฐานเกี่ยวกับ jquery, javascript และ rest apis หากต้องการทบทวน ให้ตรวจสอบ 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 ของบุคคลที่สาม, หรือดำเนินการเข้าถึงตามบทบาท พัฒนาทักษะของคุณ ดำดิ่งสู่ https //www back4app com/docs และสำรวจบทแนะนำเพิ่มเติมสำหรับฟังก์ชันการทำงานที่ซับซ้อนมากขึ้น ขอให้สนุกกับการเขียนโค้ดและโชคดีในแอปพลิเคชัน crud ของคุณที่ใช้ jquery!