สวัสดีครับ ในบทความนี้จะแสดงการทำงานของ To-do list Ui ออกแบบโดยใช้ bootstrap5.3 และจะแจก Code ให้เอาไปศึกษาและพัฒนาต่อยอดครับ
โปรโมชั่นพิเศษ ลดสูงสุด 70%!
ขาย Source Code พร้อมใช้งาน นำไปต่อยอดได้ทันที
ดูสินค้าทั้งหมด ได้ที่ : https://devbanban.com/?p=4425
ซื้อแล้วปรึกษาได้ตลอด
สนใจติดต่อ inbox ที่แฟนเพจ
☎️ โทร: 094-861-6709
Line OA : https://lin.ee/v8VwivgC
รวมคลิปสอน PHP PDO MySQL (ฟรีคอร์ส) เข้าเรียน คลิก
ขอแนะนำระบบห้องสมุด มีโปร (ทักมาสอบถามที่ fanpage คลิก)
ระบบห้องสมุด ระบบฐานข้อมูลหนังสือ พัฒนาด้วย PHP PDO MySQL เหมาะสำหรับเอาไปใช้งานในห้องสมุดโรงเรียน, ชุมชน, วัด, มหาวิทยาลัย, ไว้สำหรับยืม-คืนเล่มสารนิพนธ์ในสาขาวิชาต่างๆ หรือห้องสมุดขนาดเล็กไปจนถึงขนาดกลาง
ขอบเขตระบบ
พัฒนาด้วยภาษา PHP PDO, AdminLTE, Sweet Alert, Database : MySQL รองรับ PHP7 – PHP8
การทำงานของระบบมีดังนี้
*Admin/ผู้ดูแลระบบ
-Login / Logout
-ดูหน้า Dashboard (รายงาน)
-จัดการข้อมูล Admin/บรรณารักษ์ (เพิ่ม ลบ แก้ไข รีเซตรหัสผ่าน)
-จัดการข้อมูลสมาชิก (เพิ่ม ลบ แก้ไข รีเซตรหัสผ่าน)
-จัดการสถานะการยืมหนังสือ (แก้ไขชื่อสถานะ)
-จัดการกำหนดจำนวนวันที่ให้ยืมหนังสือ (แก้ไขจำนวนวัน)
*บรรณารักษ์
-Login / Logout
-ดูหน้า Dashboard (รายงาน)
-แก้ไขโปรไฟล์
-แก้ไขรหัสผ่าน
-จัดการข้อมูลที่เก็บหนังสือ (เพิ่ม ลบ แก้ไข)
-จัดการข้อมูลหมวดหมู่หนังสือ (เพิ่ม ลบ แก้ไข)
-จัดการข้อมูลหนังสือ (เพิ่ม ลบ แก้ไข)
-ดูงบประมาณที่ใช้ในการซื้อหนังสือแต่ละปี
-พิมพ์บาร์โค้ด (Barcode)
-ปรับสถานะหนังสือ
-บันทึกการยืมหนังสือ (คีย์รหัสสมาชิก และยิงบาร์โค้ดเพื่อยืมหนังสือ)
-บันทึกการคืนหนังสือ (คีย์รหัสสมาชิกและจะแสดงรายชื่อหนังสือที่ยังไม่คืน)
-บันทึกการรับค่าปรับ (Ajax Modal)
-ดูประวัติการยืม-คืนหนังสือทั้งหมด
-ดูข้อมูลสมาชิกและประวัติการยืมหนังสือ
-ดูรายการสมาชิกที่เสียค่าปรับมากที่สุด 5 อันดับ
*สมาชิก
-Login / Logout
-แก้ไขโปรไฟล์
-แก้ไขรหัสผ่าน
-ดูประวัติการยืม-คืนหนังสือและค่าปรับ
*ฐานข้อมูล ประกอบด้วย 7 ตาราง ได้แก่
1.ตารางบุคคลากร/สามาชิก
2.ตารางหมวดหมู่
3.ตารางที่เก็บหนังสือ
4.ตารางสถานะ
5.ตารางหนังสือ
6.ตารางเก็บข้อมูลการยืม/คืน
7.ตารางกำหนดจำนวนวันให้ยืม
demo : https://devbanban.com/app/library/
ค่าตัวระบบ : 12,900 11,900 บาท ได้ Code & Database ทั้งหมด เอาไปติดตั้งใช้งานได้เลย หรือเอาพัฒนาต่อยอดได้เต็มที่
*inbox. แฟนเพจ https://www.facebook.com/sornwebsites/
เวลา 10.00 – 20.00 น. เปิดบริการทุกวัน
คลิปแสดงการทำงานของโค้ดที่แจก
https://www.facebook.com/reel/863627285695820
class หลักๆ ที่ใช้
- class col (grid)
- class alert
- class form
- class btn
- css zoom
- อื่นๆ เอาไปต่อยอดเองได้เต็มที่
Full Code สามารถ save เป็นไฟล์ .html และ run ได้เลยครับ เช่น index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>To-do list App by devbanban.com @2024</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <style> .zoom { transition: transform .2s; /* Animation */ } .zoom:hover { transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ } </style> </head> <body> <div style="background-color: beige;"> <div class="container"> <div class="row"> <div class="col-12"> <br> <h4> :: To-do List App :: </h4> <br> </div> </div> </div> </div> <div class="container mt-2"> <div class="row"> <div class="col-12"> <div class="alert alert-danger" role="alert"> <b> Add Tasks </b> </div> </div> <div class="col-12"> <form method="post"> <div class="mb-1"> <textarea name="tark" required class="form-control" placeholder="Task detail"></textarea> </div> <div class="d-grid gap-2"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form> </div> </div> </div> <div class="container mt-3"> <div class="row"> <div class="col-12"> <h4> :: All Tasks :: </h4> </div> <div class="col-12"> <div class="alert alert-info zoom" role="alert"> Task 1. Lorem ipsum dolor sit. </div> <div class="alert alert-info zoom" role="alert"> Task 2. Lorem ipsum dolor sit. </div> <div class="alert alert-info zoom" role="alert"> Task 3. Lorem ipsum dolor sit. </div> <div class="alert alert-info zoom" role="alert"> Task 4. Lorem ipsum dolor sit. </div> <div class="alert alert-warning zoom" role="alert"> Task 5. Lorem ipsum dolor sit. </div> </div> </div> </div> <footer class="text-center mt-5"> designed by devbanban.com @2024 <br> <a href="https://devbanban.com/?p=4425" target="_blank">All Software Click</a></footer> </body> </html> |
ศึกษา Bootstrap เพิ่มเติมได้ที่ https://getbootstrap.com/
นำไปต่อยอดทำระบบ PHP MySQL คลิก.
สนใจจ้างพัฒนาระบบหรือสอนทำระบบที่อยากได้ (สอนผ่าน google meet) สามารถติดต่อมาที่แฟนเพจ เวลา 10.00 – 20.00 น.
ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com ได้ที่
ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1
————————————————————————————
ธนาคารกสิกร สาขาเออร์เบิร์น สแควร์ ประชาชื่น
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 048-1-17571-2
fanpage : https://www.facebook.com/sornwebsites/