การใช้งานและสร้างโปรเจคด้วย Codeigniter บน NetBeans (CRUD) และระบบ Login

สวัสดีครับ วันนี้ผมมาแนะนำการใช้ Codeigniter บน NetBeans พร้อมการทำ CRUD และตัวอย่าง Login

Codeigniter คือ

เป็น Framework ภาษา PHP ที่เป็นตัวช่วยให้การสร้างเว็บไซต์ได้ง่าย และรวดเร็วมากขึ้น รวมไปถึงมีการรองรับระบบ MVC ด้วย

MVC ย่อมาจาก Model View Controller หมายถึง รูปแบบการพัฒนาโปรแกรมแบบหนึ่ง สามารถแบ่งได้เป็ฯ 3 ส่วน

1. Models คือ เป็นส่วนที่ใช้สำหรับจัดการ ออกแบบ แก้ไขเพิ่มเติม หรือ เขียน Code
2. Controller ทำหน้าที่ในการประมวลผล จากModels แล้วส่งต่อไปยัง View
3. View เอาไว้ดูที่เราออกแบบเว็บไซต์ว่า หน้าตาเป็นยังไง

เมื่อเรารู้แล้วว่า Codeigiter คืออะไรมีหน้าที่อะไร เรามาเริ่มกันเถอะโดย ให้เราโหลดตัว Codeigniter มาก่อน โหลดได้ที่ https://codeigniter.com/

CodeIgniter Web Framework

แตกไฟล์ให้เรียบร้อย แล้วอย่าพึ่งทำอะไรให้ไปทำขั้นตอนต่อไปก่อน

เมื่อแตกไฟล์ CodeIgniter แล้วเรามาเตรียมโปรเจคด้วย SourceTree

ให้เราเปิดโปรแกรม Source Tree ขึ้นแล้วกด Create

จากนั้นเราต้องสร้าง Folder งานเรา ขึ้นมาก่อนจากนั้น

จากนั้นค่อยกด Browse ตรงหมายเลข 1 เพื่อเราจะใช้ Folder นี้ในการทำงาน

แล้ว กด Create

จากนั้นเรากลับมาที่ไฟล์ Codeigiter ที่เราแตกไฟล์ไว้ แล้ว Copy

1. Folder application
2. Folder system
3. File index.php

ตามรูปด้านล่าง

จากนั้นให้ไปวาง ใน Folder ที่เราสร้างไว้สำหรับงานนี้

จากนั้นสร้าง Folder ใหม่ขึ้นมาให้ชื่อว่า assets

กลับไปที่ SourceTree ให้เรากด Stage All

ให้เราเขียนข้อความคอมเม้นต ์ในหมายเลข1 แล้วกด Commit

จากนั้น กด Git-flow แล้ว OK

แล้ว กด Git-flow อีกรอบ เลือก Start New Feature

ตั้งชื่อ Feature แล้วกด OK

จากนั้นให้เราเปิด โปรแกรม NetBeans ขึ้นมา ไปที่ File เลือก New Project ของเราขึ้นมา แล้วเลือก Folder โปรเจคที่เราสร้างไว้ตอนต้น

หลังจากนั้นให้ไปที่

Source files ตามหมายเลข 1

เลือก index.php ตามหมายเลข 2

ตรง development แก้เป็น localhost ตามหมายเลข 3

เมื่อแก้เสร็จแล้ว จะได้ตามรูปด้านล่าง จากนั้นกด Save

จากนั้นไปที่ Source File > application > Config จากนั้นคลิกขวา New > Folder

แล้ว ตั้งชื่อว่า localhost แล้วกด Finish

แล้ว Copy files confile และ database ตามภาพล่าง ไปใส่ในโฟลเดอร์ localhost ที่สร้างขึ้นมา

จะได้ดังรูป

แล้วแก้ในไฟล์ config.php ในโฟลเดอร์ localhost ให้ลบ index.php ออก

สร้างไฟล์นามสกุล .htaccess ที่โฟลเดอร์ Source files แล้วใส่ code ลงไปดังภาพ

แล้ว Copy โค๊ดไปวางเลย ตรงหมายเลข1 แล้วกด Save

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

**สำหรับคนที่ไม่หา Empty File ไม่เจอให้ทำดังนี้**

แล้วค่อยกลับไปทำ วิธีแรก มันจะขึ้น Empty File ให้

****ปล. อย่าลืมกด commit ใน SourceTree

Controllers

สร้าง PHP Class ไว้ในโฟลเดอร์ controllers

ตั้งชื่อ แล้วกด Finish

ปล.ในการตั้งชื่อ Class ตัวแรกต้อง ตัวใหญ่เสมอ

เสร็จแล้วได้ดังรูปข้างล่าง

จากนั้นให้แก้ โค๊ดให้เหมือนตามรูปก้านล่าง

เมื่อเสร็จแล้ว กลับมาดู Vhosts ในการเรียกไฟล์ เราต้องไปเปลี่ยนที่อยู่ไฟล์

เป็น Folder ที่เราสร้างครั้งแรก

ปล.ถ้าใครทำไม่เป็นให้กลับไปดูการทำ V host

เมื่อเสร็จแล้วจะได้ดังรูปข้างล่าง

แล้วกลับไป commit ใน SourceTree อีกรอบ

View

ขั้นตอนนี้จะเป็นการสร้าง View

ให้เรา คลิกขวาที่ Views เลือก New แล้ว PHP Web Page

จากนั้นตั้งชื่อ

จากนั้นจะได้หน้านี้มา

ลองเพิ่มโค๊ดดู

แล้วให้กลับไปที่ Test.php ในโฟลเดอร์ controllers แล้วเพิ่ม Code ตามรูป

ลอง Test ดู

เสร็จแล้วกด commit ใน SourceTree ด้วย

Model

ให้เรา เปิดโปรแกรม MySQL Workbench แล้วสร้าง database ใส่ข้อมูลให้เรียบร้อย

แล้วกลับไปที่โปรแกรม Netbeans ให้ไปเปลี่ยนข้อมูลในไฟล์ database.php แล้วเปลี่ยนข้อมูลให้เป็นของเรา ตรง Username กับ Database

แล้วสร้าง php class ที่โฟลเดอร์ models ขึ้นมา

เพิ่มโค๊ดให้เป็นดังภาพด้านล่าง

เสร็จแล้ว ไปที่ Controller Test สร้าง ฟังก์ชัน show แล้วเรียกหน้า View มาแสดงผล พร้อมส่งข้อมูลที่ได้รับมาไปหน้า View ด้วย

แล้วมาแก้ไฟล์ webpage ใน Forlder views เพื่อ ให้ view รับค่า Controller และนำมาแสดงผล โดยการ วนลูป

แสดงผล

ต่อไป เราจะมาสร้าง CRUD

CRUD คือฟังก์ชันพื้นฐานในการจัดการฐานข้อมูลที่ประกอบไปด้วย 4 ฟังก์ชันคือ สร้าง/เรียกดู/ปรังปรุง/ลบ ข้อมูลในฐานข้อมูล

C = Create

R = Read

U = Update

D = Delete

มาเริ่มกันเลยยยย โดยเราจะใช้ฐานข้อมูลตัวเดิมที่สร้างเมื่อกี้
ให้สร้าง PHP Class ใน models แล้วเพิ่มโค๊ดตามนี้

แล้วสร้าง PHP Class อีกไฟล์ใน Forlder Controller โดยให้รับข้อมูลจากผู้ใช้แล้วส่งไปที่ Model

แล้วใส่ Code ตามนี้

จากนั้นให้แก้ไฟล์ database ใน Folder localhost ให้แก้ username และ database

แต่ของเราใน Data base เดิมเพราะฉะนั้นไม่ต้องแก้

เราจะเริ่มสร้าง C = Create คือการสร้างข้อมูล ขึ้นมาใน database

ให้เราเพิ่มโค๊ดตามนี้ ในไฟล์ MemberModel ที่อยู่ใน Folder Models

แล้วไปเพิ่ม Code ที่อยู่ใน folder controllers ด้วย

จากให้เรา ทดสอบดู

แล้วลองเพิ่มข้อมูล

กลับไปเช็คใน MySQL Workbench จะเห็นได้ว่า ข้อมูลถูกเพิ่มเข้ามาแล้ว

R = Read คือเรียกข้อมูลมา ประมวลผลหรือแสดงผลในหน้าเว็บไซต์ได้

ไปเพิ่มโค๊ดในไฟล์ MemberModel

แล้วไปเพิ่ม Cord ในไฟล์ Member

ลองทดสอบดู ฟังก์ชั่น read all

ฟังก์ชั่น readId

U = Update คือ การแก้ไขหรือปรับปรุงข้อมูลเดิมที่มีอยู่ใน database

สร้าง ฟังก์ชั่น updateMember ใน MemberModel

จากนั้นไปเพิ่ม Code ในไฟล์ Member ด้วย

ลอง test ดู

ใน MySQL Workbench ก็เปลี่ยนด้วย

D = Delete หมายถึงการลบข้อมูลออกไปจาก database

ให้เราไปสร้าง ฟังก์ชั่น deleteMember ใน MemberModel

แล้วไปเพิ่มในไฟล์ Member ด้วย

ลอง Test ดู

ไปดูใน My SQL Workbench สังเกตุได้ว่า ID 1 จะหายไป ซึ่งหมายถึงว่า ID 1 ถูกลบไปแล้ว

CRUD จบเพียงเท่านี้ครับ

การสร้างฟังก์ชั่น Login

ให้เราไปโหลด Template AdminLTE เพื่อประหยัดเวลาในการเขียนโค๊ดใหม่ขึ้นมาเอง

กดที่นี้

จากนั้นให้เราสร้าง Folder ใน Folder assets ขึ้นมาตั้งชื่อว่า backoffice

จากนั้นให้เราไปแตกไฟล์ตัว Template AdminLTE แล้ว Copy Files ตามภาพไปใส่ใน Folder backoffice

จากนั้นไปที่ Folder AdminLTE เมื่อกี้ แล้วเข้าไปที่ dist Copy ทั้ง3ไฟล์ ไปใส่ใน Folr backoffice เหมือนเดิม

จากนั้นไปสร้าง Folder backoffice ใน Folder Controllers แล้วสร้าง php class ชื่อ Login

แล้ว Copy File index ใน Folder controllers เข้ามาใส่ใน Folder backoffice

เพิ่มโค๊ดใน File Login

แล้วไปสร้าง Folder ใน Viwes ชื่อ Folder ว่าbackoffice แล้วสร้าง Folder login ใน Folder backoffice อีกที ตามรูปเลย

แล้วสร้างไฟล์ php web page ชื่อ index ใน Folder login

แล้วไปที่ Template AdminLTE ตรง Login หรือ

กดตรงนี้

แล้วคลิกขวา เลือก view page source

จากนั้นให้คลิกขวา แล้วเลือก ดูรหัสต้นฉบับ หรือ view page source

ให้เรา Copy ทั้งหน้า ไปวางในไฟล์ index ที่เราสร้างใน Folder views

แล้วเพิ่มโค๊ดที่ไฟล์ Login ใน controllers ตามนี้

ลอง Test ดู จะได้ตามภาพ

จะเห็นได้ว่า มันยังไม่ตรงกับหน้าเว็บไซต์ที่เราเอามา ให้เราแก้โค๊ดตามต่อไป

ซึ่งการแก้ไขที่เราจะทำคือให้มันเรียกจาก base url ของมันเลย

เข้าไปที่ index ใน folder views แล้วแก้ตามนี้

แล้วไปเปลี่ยน Code ไฟล์ตรง Fold localhost config ให้ตรงกับ v host ของเรา

Test ดูจะได้หน้าตาแบบนี้

แต่เราไม่เอาแบบนี้ เราจะเอา Remember Me ,Sign in usin Facebook และ Google ออก พร้อมทำระบบ Login เลย

ให้เราสร้างตารางใน Data base ใหม่ก่อนใช้สำหรับ Login ตั้งชื่อ แล้วกด Apply

ใส่ข้อมูลสำหรับใช้ Login

กลับมาแก้โค๊ด ในไฟล์ index ที่ Folder views

อันดับแรก ลบโค๊ดบรรทัดนี้ก่อน

จากนั้น แก้โค๊ดตามนี้

แล้วไปเพิ่มในไฟล์ login ที่อยู่ใน Folder controller

ในไฟล์ MemberModel เพิ่ม code ตามด้านล่าง

แล้วไปแก้ที่index ใน views แล้วแก้ code ดังภาพ

แล้วสร้างไฟล์ php Class ตั้งชื่อว่า Dashboard ขึ้นมาที่ Folder backoffice ที่ controllers แล้วเพิ่ม Code ตามภาพ

แล้วไปแก้ ไฟล์ config ใน Folder localhost ดังรูป

ลอง Test ดู

พอกด Logout จะได้หน้าตาเดิม ที่ให้ใส่ Username กับ Password

สำหรับตอนนี้ ขอจบเพียงเท่านี้ครับ ขอบคุณครับ