DAY17 edit profile admin

12 Nov 2024

หลังจากที่ทำหน้า Profile admin แล้ว วันนี้เรามาแก้ให้แนบรูปได้กันครับ

<div>

<img class=”wd-100 rounded-circle” src=”{{ (!empty($profileData->photo)) ? url(‘upload/admin_images/’.$profileData->photo) :url(‘upload/no_image.jpg’)}}” alt=”profile”>

<span class=”h4 ms-3″>Thanat Sirikitphatta</span>

</div>

คำอธิบายโค้ด:
!empty($profileData->photo) ตรวจสอบว่ามีรูปภาพโปรไฟล์หรือไม่
ถ้ามีรูปภาพ จะใช้ URL ของภาพจาก upload/admin_images/ ตามชื่อภาพที่เก็บใน $profileData->photo
ถ้าไม่มี จะใช้ no_image.jpg แทน

จากนั้นมาเปลี่ยน ชื่อกันให้เรียกจาก db มาใช้ โดยแก้เป็น

จากนั้นเราก็มาแก้ form ที่แก้ไข admin profile กัน

<inputtype=”text”name=”username”class=”form-control”id=”exampleInputUsername1″

value=”{{$profileData-> username}}”>

คำอธิบายแต่ละส่วน

<input type="text">
ระบุว่า input นี้เป็นชนิด text ซึ่งหมายถึงช่องรับค่าข้อความทั่วไปที่ผู้ใช้สามารถกรอกข้อมูลได้
name="username"
กำหนด name ของ input เป็น "username" ซึ่งเป็นตัวระบุของข้อมูลนี้ในฟอร์ม เมื่อฟอร์มถูกส่งข้อมูลนี้จะถูกส่งไปพร้อมกับชื่อ username
class="form-control"
ใช้คลาส form-control ซึ่งเป็นคลาสจาก Bootstrap (เฟรมเวิร์ก CSS ยอดนิยม) เพื่อทำให้ input มีสไตล์และลักษณะตามที่ Bootstrap กำหนดไว้ เช่น ให้ขนาดที่เหมาะสมและขอบที่เป็นระเบียบ
id="exampleInputUsername1"
ระบุ id ของ input เป็น "exampleInputUsername1" ซึ่งสามารถใช้สำหรับการเชื่อมโยงกับ <label> หรือใช้ใน JavaScript เพื่ออ้างอิงถึง input นี้โดยตรง
value="{{$profileData->username}}"
ตั้งค่าคุณสมบัติ value ของ input ให้แสดงค่าจากตัวแปร profileData->username โดยเครื่องหมาย {{ }} เป็นไวยากรณ์ที่ใช้ใน PHP framework เช่น Laravel สำหรับดึงค่าจากตัวแปร profileData ซึ่งในที่นี้เป็นออบเจ็กต์ข้อมูลโปรไฟล์ของผู้ใช้ และดึงค่าฟิลด์ username ของออบเจ็กต์นั้นมาแสดงใน input

เพิ่ม jquery เพื่อให้เปลี่ยนรูปภาพ

อย่าลืมเพิ่ม <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js”></script>

คำอธิบายโค้ดแต่ละส่วน

$(document).ready(function(){ ... });
ฟังก์ชันนี้ใช้เพื่อรอให้หน้าเว็บโหลดข้อมูลทั้งหมดเสร็จแล้วก่อนจะเริ่มทำงานภายในฟังก์ชัน ready นี้ โดยเป็นฟังก์ชันของ jQuery
$('#Image').change(function(e){ ... });
เมื่อมีการเปลี่ยนแปลงค่าใน input ที่มี id เป็น Image (คาดว่าเป็น input แบบ file ที่ใช้เลือกไฟล์ภาพ) ฟังก์ชัน change นี้จะถูกเรียกใช้ โดย e คือเหตุการณ์ (event) ที่เกิดขึ้น
var reader = new FileReader();
สร้างออบเจ็กต์ FileReader ขึ้นมาเพื่ออ่านไฟล์ที่ผู้ใช้เลือก (ในกรณีนี้คือไฟล์รูปภาพ)
reader.onload = function(e){ ... }
ฟังก์ชัน onload ถูกกำหนดเพื่อให้ทำงานหลังจากที่ไฟล์โหลดเสร็จเรียบร้อย โดย e.target.result จะเป็น URL ของไฟล์ที่โหลดขึ้นมา
$('#ShowImage').attr('src', e.target.result);
เมื่อโหลดไฟล์เสร็จแล้ว จะนำ URL ของไฟล์ที่ได้จาก e.target.result ไปตั้งเป็นค่า src ของ <img id="ShowImage"> ซึ่งทำให้แสดงภาพตัวอย่างได้ทันที
reader.readAsDataURL(e.target.files[0]);
คำสั่งนี้บอก FileReader ให้อ่านไฟล์ที่ผู้ใช้เลือก โดยไฟล์ที่เลือกจะอยู่ใน e.target.files ซึ่งเป็นอาร์เรย์ของไฟล์ที่เลือก (files[0] คือไฟล์แรกที่เลือก)

จากนั้นก็ลองทดสอบว่า เพิ่มรูปภาพแล้ว ขึ้นมาหรือยัง

update form profile admin

แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ