Scriptdd.com

บทความบ้าบ่นของคนทำเว็บ ปี 8

CKFinder File Manager แบบ Ajax

หัวข้อ บทความ แทก Ajax | PHP

วันนี้ได้แวะเวียนไปเยี่ยมชม Website ของ fckeditor.net ที่ผมนำ FCKeditor มาใช้งาน
ทำพวก Tool สำหรับเขียน Content พบว่าทาง Website ได้ปล่อย CKFinder ออกมาให้ใช้กันแล้ว


ความเดิมจากภาคที่แล้ว

จากที่ผมได้แนะนำ FCKeditor ไปนั้นผมได้ลองใช้งานและพบว่า การพัฒนาของ FCKeditor นั้น
มีทั้งส่วนที่เป็น Client Side Script และ Server Side Script ปัญหาของ FCKeditor นั้นคือ

ในส่วนของ Server Script ที่ทำหน้าที่จัดการพวก File รูปภาพ File Flash ที่ต้อง Upload เข้า
มาใน Website นั้น ... มันห่วยแตกมากๆ

คือมันทำหน้าที่ได้แต่แสดง File บน Website Upload เข้าไปได้ ... แต่ลบไม่ได้
พวกรูปที่ Upload ไป น่าจะแสดง Thumb ของรูปนั้นๆเป็นรูปเล็กๆ มันก็ทำไม่ได้

มาวันนี้ทาง FCKeditor ได้ปล่อย Product น้องสุดท้อง ออกมาชื่อว่า CKFinder ครับ


CKFinder คืออะไร

มันคือ File manager ที่ใช้เทคนิค Ajax ในการแสดงผลที่ฝั่ง Server Side Script สนับสนุนทั้ง
ASP, ASP.NET, ColdFusion, PHP โดยตัว CKFinder นี้มีความสามารถเหนือกว่า File manager เดิมของ
FCKeditor ดังนี้

  • แสดงผลแบบ Tree เหมือน Windows Explorer ที่เราคุ้นเคย
  • สร้าง Folder ย่อย ลบ แก้ไข ได้ทุกอย่าง
  • แสดงรูป Thumb และ ไอคอนตามประเภทของ File ที่ Upload เข้าไปได้ (FCKeditor ทำไม่ได้)
  • ลบแก้ไขเปลี่ยนชื่อ File ที่ Upload เข้ามาได้ (FCKeditor ทำไม่ได้)
  • กำหนดสิทธิในการเข้าใช้งานได้เป็นราย User  (FCKeditor ทำไม่ได้)
  • ใช้งานแบบเดี่ยวๆไม่ต้องมี FCKeditor ก็ได้ หรือ จะ Plugin เข้ากับ File manager เดิมของ FCKeditor ก็ได้เหมือนกัน
    ของเดิมพร้อมจะตกกระป๋องไปหรือยังอิอิ
  • CKFinder ไม่ฟรีครับ แป๊ว -__- ค่าตัวน้องเค้า คร่าวๆสำหรับ 1 Website ใช้งาน ราคา $59

แม้ว่า CKFinder จะไม่ฟรี แต่เราสามารถนำมาใช้แบบ Demo ได้โดยสมบูรณ์ทุก Function
เพียงแต่จะมี ข้อความขึ้นเตือนในเรียกใช้ทุกๆครั้งไป (ก็ยอมรับได้น่ะครับ)


Download และ ติดตั้ง

ไม่พูดมากครับไปหามาติดตั้งซะ เลือก Version ที่คุณต้องการไม่ว่าจะเป็น ASP, ASP.NET, ColdFusion, PHP
งานนี้ผมขอสาธิต Version PHP เนื่องจากคุ้นเคย



http://www.ckfinder.com/

Download เสร็จแล้วแตก File ทั้งหมดไปไว้ที่ Root ของ Website จะเปลี่ยนชื่อเป็นชื่ออื่นก็ได้
ตามตัวอย่างของผมก็ติดตั้งไว้ที่ /ckfinder/ ตามชื่อเดิมไป




เสร็จแล้วเข้าไปใน /ckfinder/ เริ่มแรกให้เปิด File ckfinder.js เพื่อ config การติดตั้ง path ก่อนหาบรรทัดที่ว่า

CKFinder.DEFAULT_BASEPATH = '/ckfinder/' ;

ให้เปลี่ยนเป็น path ตามที่คุณได้ติดตั้ง ckfinder ไว้ถ้าไม่ได้แก้ไขอะไรก็ปล่อยไว้เหมือนเดิม

ต่อเป็น เรื่องสำคัญล่ะ เปิด File config.php ขึ้นมาหาบรรทัดที่ว่า

$baseUrl = '/ckfinder/userfiles/';

ตัวแปร baseUrl เป็นตัวที่กำหนดว่าเราจะเก็บ File ที่ Upload เข้ามาไว้ที่ไหน คุณสามารถเลือกได้ตามใจชอบ
โดยอย่าลืมไปสร้าง Folder ดังกล่าวแล้ว chmod เป็น 777 รอเอาไว้ด้วยเพื่อให้สามารถ upload file เข้าไปได้


ยังไม่เรียบร้อยครับอีกนิด

ที่ผ่านมาเกือบเรียบร้อยแล้ว CKFinder เกือบจะพร้อมแล้วต่อไปนี้เป็นจุดสำคัญนะครับ
เปิด File config.php ขึ้นมาอีกรอบ ไปดูที่ต้น Script หาบรรทัดที่ว่า

function CheckAuthentication()
{
//WARNING : DO NOT simply return "true". By doing so, you are allowing
//"anyone" to upload and list the files in your server. You must implement
//some kind of session validation here. Even something very simple as...

// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];

//... where $_SESSION['IsAuthorized'] is set to "true" as soon as the
//user logs in your system.

return false;
}

funcion นี้สำคัญสุดตีนนะครับ มันเป็น function เอาไว้เช็คว่า user ที่เข้ามาเรียกใช้นี้มีสิทธิในการใช้งานจริงๆหรือเปล่า
โดยปกติแล้วการใช้งาน CKFinder นั้นจะต้องเป็น Admin เท่านั้นที่จะเข้าใช้งานได้

ไม่ใช่ว่า ใครไม่รู้หมูหมากาไก่มาเปิดหน้านี้แล้วเข้ามาลบ File รูปทั้ง Website ของเราได้ จริงไหมครับ

function CheckAuthentication จึงถูกกำหนดเอาไว้เพื่อให้เรานำ Script ส่วนนี้ไปตรวจสอบกับระบบ Admin ของเรา
โดยสิ่งที่ส่งออกมาจาก function นี้จะต้อง return true เท่านั้น หาก return false ก็จะไม่สามารถเข้าใช้งานได้เท่านั้น

session_name("CONTENTDD");
session_start ();
ob_start();

function CheckAuthentication()
{
  if ($_SESSION["C_STATUS"] !="ADMIN") {
    return false;
  }else{
    return true;
  }
}

ในส่วน Script ของผม ผมใช้ session ในการเก็บสถานะ Admin ฉะนั้นผมจึงดึง session ออกมาตรวจสอบเลย ถ้าผมเป็น Admin เข้ามาก็จะมี session ดังกล่าวติดมาด้วย ฉะนั้นก็ return true ออกไปถ้าไม่ใช่ก็ return false ระบบของ ckfinder ก็จะไม่ให้ผ่านใช้งาน

เมื่อเรียบร้อยแล้วก็ลองเปิดใช้งานดูได้เลย ที่ url

http://youdomain.com/ckfinder/_samples/js/standalone.html

เรียบร้อย CKFinder ขึ้นมาแล้ว วิธีใช้ผมคงไม่แนะนำนะครับไปลองใช้งานกันดู ไม่น่าจะยากอะไร สำหรับตัวอย่าง Script ก็ดูวิธีเรียกใช้จาก standalone.html นี่แหล่ะ แกะกันเองนะครับ ผมขอข้ามไปอธิบายหัวข้อถัดไปดีกว่า


เรียกใช้เดี่ยวๆได้แล้วต่อไปเราจะต่อเข้ากับ FCKeditor

ให้แน่ใจก่อนว่า FCKeditor เดิมของคุณสามารถ Upload รูปเข้าได้ตามปกติ หากเรียบร้อยแล้วก็ลุยเลย
เปิด file fckconfig.js  ขึ้นมาเพื่อแก้ไข โดยไปที่ท้ายบรรทัด ให้เพิ่ม

FCKConfig.LinkBrowserURL = '/ckfinder/ckfinder.html' ;
FCKConfig.ImageBrowserURL = '/ckfinder/ckfinder.html?type=Images' ;
FCKConfig.FlashBrowserURL = '/ckfinder/ckfinder.html?type=Flash' ;
FCKConfig.LinkUploadURL = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files' ;
FCKConfig.ImageUploadURL = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images' ;
FCKConfig.FlashUploadURL = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash' ;

เข้าไปท้าย script เลย โดย script ที่เพิ่มเข้าไปดังกล่าวเป็นการกำหนดว่าให้ใช้ File manager จากภายนอกคือ CKFinder นั่นเอง (ดู Path ของ CKFinder ให้ถูกต้องด้วยนะครับ)


สรุปส่งท้ายแบบไม่เรียบร้อย

ใจแรกตั้งใจจะเขียนให้ครบเรียบร้อยเพราะยังมีบางเรื่องของ CKFinder ยังไม่ได้เล่า
เช่นการเปลี่ยน Theme การ Config ให้เรียกแบบ php และรายละเอียดอีกเล็กน้อย

โม้้หมดก็ไม่มันส์สิครับ ฮา แค่นี้ก็ใช้งานได้อย่างปลอดภัยแล้วนี่หว่า

ผมขอทิ้งบทความเอาไว้เท่านั้นแหล่ะ ถือเป็นบทความยั่วให้มาลองใช้งาน ส่วนองค์ความรู้เพิ่มเติมผมแนะนำให้หัดอ่านจาก documetary ของ CKFinder เองเพิ่มเติมด้วย

ขอบคุณที่ติดตาม


อ้างอิง

http://www.ckfinder.com/
http://www.fckeditor.net/

รูปคุณ Read (34,783) Comments (23) 2008-01-23 20:35:51

ความคิดเห็น

ขอบคุณครับที่เอาข่าวดีมาบอก

ติดตามจาก feed อยู่ตลอดครับ

รูปคุณ nato โดยคุณ nato 2008-01-24 02:47:07

ขอบคุณครับพี่อั้ม เดี่ยวลองใช้งานดู ตอนนี้ก็ใช้อยุ่ 2 ค่าย คือค่ายนี้กับ spaw เป็นหลักอ่ะครับ แจ่มมมมมมมม

รูปคุณ P@W โดยคุณ [email protected] 2008-01-24 05:38:05


ทุกอย่างเกิดจากเหตุ และปัจจัย ไม่ใช่อยู่ดี ๆ ก็เกิดขึ้น :: สร้างฝันบนจินตนาการ

www.konkeanweb.com , www.prawee.com ,www.tct15.com ,www.thaiagro.com

 

ไม่ทราบว่าจะดึง ระบบ filemanager ที่ชื่อ media manager ของ mambo หรือ joomla มาใช้ได้หรือเปล่าครับ ถ้าได้ต้องทำไงครับ ของเขาก็น่าสนใจนะ ขอบคุณครับ

รูปคุณ ท็อบ โดยคุณ ท็อบ 2008-01-24 15:56:14

ไม่สำเร็จน่ะครับ
ผ่านหมด ยกเว้นตอนที่อัพโหลดไฟล์ไปแล้วมันขึ้นดังรูป

http://img242.imageshack.us/img242/6500/24734923zu2.jpg

รูปคุณ pongsak โดยคุณ pongsak 2008-01-24 17:03:29

โอย ตอนนี้ True เน่าอยู่ผมออก Net นอกไม่ได้แฮะ
ลอง ค้นหาใน Google คำว่า

file system permission restrictions ckfinder

ดูครับ ผมเห็นผลการค้นหาแล้วแต่คลิกเข้าไปอ่านไม่ได้

รูปคุณ 9AuM โดยคุณ 9AuM 2008-01-24 17:30:08


http://www.servdd.com Web Hosting คุณภาพบริหารงานโดยนายอ้ำ
http://www.wp4seo.com wp4SEO ระบบช่วยบริหาร Wordpress Blog จำนวนมาก
http://www.welovetopup.com weLoveTopup เติมเงินออนไลน์ให้ส่วนลดมากที่สุดในตลาด

เป็นเหมือนกันเลยครับผมก็เข้าเว็บนอกไม่ค่อยจะได้เลย ยังเข้าไปโหลด CKFinder ไม่ได้เลยนะ

รูปคุณ พล โดยคุณ พล 2008-01-24 18:46:05

ไม่สามารถเข้าไปดูได้
The file Browser is Disabled reasons. Please contect your system

รูปคุณ nat โดยคุณ nat 2008-02-10 12:43:54

ขอบคุณคุณอั้มครับ
มีคนเป็นเหมือนผมนี่แหละ
มันผิดตรงตัวแปร $baseurl
ต้องเป็น absolute path ไม่ใช่ relative path
(coding มันเขียนให้เข้าใจว่าเหมือนเป็น relative path)

รูปคุณ pongsak โดยคุณ pongsak 2008-02-16 11:02:55

พี่อั้มครับ ผมเซต CKfinder ให้ต่อ FCKeditor ได้นะ แต่ผมอัพโหลดไม่ได้อ่ะคับ

คือมันไม่ได้ฟ้องว่ามีปัญอะไรนะคับ แต่พอ Upload ไปแล้วมันไม่มีไรเกิดขึ้นเลย - -"

ทำไงดีอ่ะพี่ ผมว่าผมคงเซต Path ไม่ถูก

มันต้องเซตตรงไหนมั่งอะคับ บอกหน่อยน๊าาา

รูปคุณ I•tid โดยคุณ I•tid 2008-04-04 15:51:07

ขอบคุณคุณอั้มมากๆ ครับ
ติดตามเว็บคุณอั้มตลอดนะครับ เป็นกำลังใจให้นะครับ

ขอบคุณคุณ pongsak ด้วยครับ ที่ให้ทางสว่าง

ขอบคุณทุกความคิดเห็น ใครมีวิธีการปรับประยุกต์ดีๆ ช่วยแนะนำด้วยนะครับ

รูปคุณ Sitti โดยคุณ Sitti 2008-09-12 14:14:19

ขอบคุณมักมากครับ

รูปคุณ ทักษิณ โดยคุณ ทักษิณ 2008-11-24 16:48:56

ความคิดเห็นอันบนผม น่ากลัวเน้อะ


รูปคุณ ดราฟครับ โดยคุณ ดราฟครับ 2008-12-09 13:08:06

ขอโทษนะคะ พอดีเบียร์พึ่งรู้จักตัว KCFeditor แล้วก็ CKFinder ที่คุณเจ้าของบอร์ดพูดถึง เบียร์ต้องทำโปรเจคจบที่ต้องมีช่องรับข้อมูลเพื่อที่จะเอามาสร้างแบบประเมินในส่วนของ admin น่ะค่ะ แต่เบียร์ใช้ โปรแกรมนี้ไปใช้ร่วมกับเว็บที่เบียร์สร้างเอง ยังไงคะ ขอความกรุณาท่านผู้ทราบช่วยตอบหน่อยเถอะค่ะเดือดร้อนจริงๆ เพราะว่าต้องทำส่งเดือนกุมภานี้แล้ว ส่วนนี้เป็นส่วนสำคัญสุดของเว็บเลยค่ะ ยังไงก็ขอขอบคุณนะคะที่กรุณาตอบ

รูปคุณ เบียร์ค่ะ โดยคุณ เบียร์ค่ะ 2009-01-14 01:14:46

ผมเอาไปไว้ในฟอร์มส่งเมล์ ข้อความทุกอย่างไปหมดครับ ยกเว้นรูป
URL รูปมันเป็นอย่างนี้อ่ะครับ
http:///%22/admin/ckfinder/userfiles/images/เน€เธ—เธ›เธ—เธ™เธ„เธงเธฒเธกเธฃเน‰เธญเธ™.jpg/%22
จะแก้ยังไงดีครับท่าน

รูปคุณ Sarawut โดยคุณ Sarawut 2010-06-22 16:21:36

อยากสอบถามเกี่ยวกับ license ของ ตัว นี้อ่ะครับ ว่าเรา สามารถ นำมาใช้ได้ในระดับไหน ครับ มาใช้ในการส่วนตัว แล้วเราสามารถนำไปใช้ในการพัฒนาเพื่อทำเว็บไซด์ใหเลูกค้าได้ไหมครับ

รูปคุณ โอ โดยคุณ โอ 2010-07-06 02:14:29

ของผม up ได้นะ แต่เวลา ลบไฟล์ที่เคย up มันลบไม่ได้อ่ะคับ

รูปคุณ xy โดยคุณ xy 2010-09-25 15:48:23

[ของผม up ได้นะ แต่เวลา ลบไฟล์ที่เคย up มันลบไม่ได้อ่ะคับ]

ให้ลบข้อมูลรูปที่ up แล้วที่ popup upload (ตอนที่เปิด ckfinder.html) เลือกรูปที่ต้องการลบโดยคลิกขวาเลือก delete ครับจากนั้นก็ตามไปลบไฟล์ได้เลยครับ

รูปคุณ reply-xy โดยคุณ reply-xy 2010-11-06 23:44:35

มีประโยชน์มากมาย ขอบคุณจริงๆค่ะ กะว่าจะเขียนเว็บเอง เพื่อพัฒนาฝีมือ แทนการใช้เวิร์ดเพลสแล้ว ไม่รู้ว่าจะสำเร็จได้มากน้อยแค่ไหน เคยเรียนแต่ html ไม่เคยเรียนอย่างอื่น อาศัยแต่การแสวงหาความรู้ ขอบคุณมากๆ ค่ะ

รูปคุณ อ่านนิยาย.com โดยคุณ อ่านนิยาย.com 2011-02-22 12:26:32

ช่วยทีนะ...เรามีปัญหา แบบว่า อัปรูปไม่ได้อะ
พอกด browes server มันฟ้องไม่เจอหน้าเวป อะ แบบนี้
file:///C:/ckfinder/ckfinder.html?Type=Images&CKEditor=message&CKEditorFuncNum=2&langCode=en

แล้วเราจะแก้ไข ลิงค์ ตรงไหนอะ หามะเจอช่วยที่นะ

และก้อ เราลองเอาโฟร์เดอร์ ckfinder ไปวางที่ ไดร์ C มันไม่ฟ้อง แต่ก้อยังอัพรูปไม่ได้อยู่ดี ช่วยที่เน้อๆๆๆๆๆๆ

รูปคุณ kwang โดยคุณ kwang 2011-09-19 15:33:16

session_name("CONTENTDD");
session_start ();
ob_start();

function CheckAuthentication()
{
if ($_SESSION["C_STATUS"] !="ADMIN") {
return false;
}else{
return true;
}
}

ต้องใส่ตรงไหนเหรอคับ ผมงง

รูปคุณ เก่ง โดยคุณ เก่ง 2012-03-22 11:33:30

เป็น "บทความที่สุดยอดมากครับ" เยี่ยมมากครับ ขอปรบมือให้กับความตั้งใจครับ..

พอดีผมก็เพิ่งได้มาศึกษาหลังจากวางมือไปหลายปี เลยว่าจะเตรียมบอร์ดไว้สอนเด็ก

ผมถนัด asp จึงดาวน์โหลด ckfinder เวอร์ชั่น asp ไป แล้วก็ปรับแต่งมั่ว ๆ

ตามเส้นทางที่ท่านให้ลิงไปเพิ่มต่อท้ายเอย....

แต่สุดท้ายมัน ฟ้อง error แก้ทั้งวันก็ไม่หายเลยครับ...

มัน error เส้นทาง path ของไฟล์ connecttor.asp อ่ะครับ error บรรทัดนี้

<!-- #INCLUDE file="../../../config.asp" -->

ผมงมแก้pathที่ตรงนี้ก็แล้ว ไปแก้ในไฟล์ config.asp ด้วยก็แล้ว ไม่สามารถรันได้เลยคับ

อ้อ ผมใช้ iis7 เป็น server อ่ะครับ พอดีใชว้ win7

เส้นทางเก็บไฟล์ของผมนะครับ c:\inetpub\wwwroot\krupik

แล้วตำแหน่งโฟลเดอร์ต่าง ๆ ผมก็วางเหมือนตัวอย่างที่ท่านสอนเลยอ่ะครับ..

รบกวนนขอคำชี้แนะด้วยครับ..ว่าผมจะแก้ไขปัญหานี้ยังไง เพราะผมต้องลองในเครื่องก่อน

แล้วก็ค่อยอัพไปที่โฮสเช่าอีกที รบกวนด้วยครับ

รูปคุณ ปิ๊ก โดยคุณ ปิ๊ก 2012-04-08 21:15:54

ตอนนี้ผมงงว่า จะเอา โฟลเดอ Ckfinder ไปไว้ที่ไหนอ่ะครับ ??
เพราะผมหา path ไม่เจออ่ะครับ T^T เริม่จนปัญญาแล้วด้วย
มันขึ้นว่าไม่พบหน้าเว็บนี้ คือหา path มันไม่เจอแหละครับ
แล้วโฟลเดอ เก็บรูปต้อง chmod777 ก่อนไหมครับ ผมรัน ใน localhost ยังไม่ขึ้นเชิพเวอจริงอ่ะครับ

รูปคุณ Jurng โดยคุณ Jurng 2012-06-05 11:41:38

คือผมอัพโหลดภาพ แล้วมันกลับหัว แก้ไขยังไงครับผม

รูปคุณ ช่วยด้วยครับ โดยคุณ ช่วยด้วยครับ 2017-07-18 23:06:35

ร่วมแสดงความคิดเห็น



ขอความกรุณา ปัญญาชน ทุกๆท่าน รณรงค์การใช้ภาษาไทยให้ถูกต้อง
กรุณา ลงความคิดเห็นโดยใช้ภาษาไทยให้เป็นภาษาไทย งดการใช้ภาษาวัยรุ่น,
แอ๊บแบ๊ว บอกตรงๆปัญญาอ่อน !! Admin นั่งอ่านแล้วปวดหัว

เข้าระบบ


จำไว้ด้วยนะจ้ะ

สมัครสมาชิก
ลืมรหัสผ่าน

บทความล่าสุด

Gallery

Tags

ASP Blog JavaScript AIS Freeware Payment Gateway Search Engine Diary Shopping Home Decorate Mobile PHP Motorcycle Book Internet Explorer เฟรมเสือหมอบ Framework Windows7 Android BarCampBangkok Downloads Game DOM Movie SEO Lenovo CSS ThinkPad barcampbangkok2 Plugin

อื่นๆ ...

เพื่อนบ้าน

สถิติส่วนตัว

คลิกรับ Feed สิจ๊ะ

TwitterCounter for @9aum

Scriptdd.com | ctdd Version 3.0 ติดต่อฐานข้อมูลทิ้งสิ้น 7 ครั้งใช้เวลาประมวลผล 0.0598 วินาที
โปรแกรมโดย 9AuM | ออกแบบโดย styleshout