[#6 Codeigniter ภาค2] มาทำ Workshop Codeigniter บน Netbeans (แบบจริงจังไม่จิงโจ้) กันดีกว่า.. 🦄

ความเดิมจากภาค1 ภาค2นี้เราจะมาทำ Workshop อีกงานหนึ่ง ซึ่งที่เราจะทำนี้จะมีฟังก์ชั่น CRUD และฟังก์ชั่น login ซึ่งจะใช้พื้นฐานจาก Workshop ที่แล้วมาทำด้วยจ้า ไปทำกันเล้ยยยย

ขั้นแรกๆ ทำเลยจ้า ตามนี้น้า

1. เราต้องทำการโหลด Codeigniter มาแล้ว
2. ทำตามขั้นตอนการเตรียมโปรเจคในภาคที่ 1
3. ไป set environment ใน NetBeans แบบที่เคยทำเล้ยย
4. มาเริ่มทำกันเลยจ้า

ขั้นต่อมาจะทำโปรเจคกันแล้ว

• เริ่มจากสร้าง database ให้เป็นตามภาพด้านล่าง

• สร้าง php class ใน models ขึ้นมา โดยชื่อคลาสเป็นตัวใหญ่จ้า

• สร้าง php class ใน controllers ชื่อ Member ขึ้นมา

• ไป modify ใน database ตรงชื่อ username และ database ให้เป็นของเราจ้า

CRUD

• C is Create สร้าง

ไปสร้าง function Create ใน Class Member_model.php

ไปสร้าง function create ใน Class Member.php

จะได้ผลลัพธ์ ตามภาพด้านล่าง

เลข 1 คือ member ที่เราเพิ่มเข้าไปในตาราง คือ id ที่เท่าไหร่

• R is Read อ่าน

ไปเพิ่ม function read ใน Member_model.php

สร้าง funtion read_member_all เพื่ออ่านทุกค่า member และ function read_member_by_id เพื่ออ่านค่าตาม id ที่เรียกใช้

เพิ่ม function read ใน Class Member.php ดังภาพ

$this->member_model->read_member_all(); เป็นการเรียกใช้งาน function read_member_all() ใน models ชื่อ member_model

จะได้ผลลัพธ์ตามภาพด้านล่าง

กรณีเรียก read_member_all()

กรณีเรียก read_member_by_id()

• U is Update แก้ไข

ไปสร้าง function update_member ใน Member_model.php

ไปสร้าง function update ใน class Member.php

จะได้ผลลัพธ์ตามภาพด้านล่าง

จะเป็น 1 เสมอนะ เพราะอัพเดททีละ 1 record

• D is Delete ลบ

ไปสร้าง function delete_member ใน Member_model.php

affected_rows คือ rows ที่มีผลกระทบ

และไปเพิ่ม function delete ใน class Member.php

จะได้ผลลัพธ์ตามภาพด้านล่าง

จะเป็นเลข 1 เสมอนะ เพราะเราลบทีละ 1 record

จบไปแล้วกับการสร้างฟังก์ชั่น CRUD พักหายใจกันสักนิดดีว่า

…

..

.

พักเบรคไป 3 วิแล้ว 555+ มาทำฟังก์ชั่น login สนุกๆกันต่อเล้ยยดีกว่า

เริ่มจากไปดาวน์โหลดตัว Template AdminLTE มาก่อนเลยจ้า

Free Bootstrap Admin Template | AdminLTE.IO

Dowload AdminLTE

1.ให้ไป New folder ใน folder assets ขึ้นมา ชื่อว่า backoffice

2.จากนั้นให้ไป copy files ตามภาพด้านล่าง ไปใส่ใน folder backoffice

Copy เอา 3 ไฟล์บน ไปลงใน folder backoffice

เข้าไปใน folder dist

Copy 3 ไฟล์ใน folder dist ไปลงใน folder backoffice

โดยให้ copy จาก AdminLTE ที่ แตกไฟล์มาตามด้านล่าง แล้วเอาไปลงใน folder assets ได้เลยจ้า

copy files มาลงตามภาพนี้เลยจ้า

3.ให้ไปสร้าง folder backoffice และ สร้าง php class ชื่อ Login และ copy file index ใน folder controllers เข้ามาใส่ด้วยจ้า

เขียน Login.php ตามภาพด้านบนเลยจ้า

4.และให้ไปสร้าง folder backoffice →folder login →index.php(php web page)

สร้างตามภาพบนเลยจ้า

5.ให้ไปที่ Template AdminLTE ตามลิ้งที่แนบมาเลยจ้า

AdminLTE 2 | Log in

จากนั้นให้คลิกขวา แล้วเลือก view page source

6.จะเข้ามาในหน้านี้เลยจ้า ให้ทำการ Ctrl+C แล้วไป Ctrl+V ในหน้า index.php ของ index.php ที่เป็นหน้า view ได้เลยจ้า

7.ทำการแก้ไขหน้า Login.php ใน controllers เป็นดังภาพนี้จ้า

8.เมื่อไป search จะขึ้นตามภาพด้านล่างเลย

จากรูปด้านบนจะเห็นว่า รูปไม่ตรงปก 555+ ให้ทำการแก้ไขโค้ดตามขั้นตอนต่อไปได้เลยจ้า ซึ่งมันเป็นการแก้ให้เรียกจาก base url จริงๆของมันเลย มันก็จะขึ้นนั่นเอง

9.กลับไปแก้ใน view เป็นดังภาพจ้า

และแก้ไฟล์ config เป็นตามนี้เลยจ้า

10.ลองกลับไป search หน้าเว็บอีกครั้งนึงน้า

แท่นแท๊นนนนน~~ -ขึ้นแล้ว เย้ๆ

แต่เราจะไม่เอาแบบนี้อะ ให้แก้เป็นภาพนี้แทนน้า

โดยการแก้ไขหน้า view ให้เป็นดังภาพด้านล่างจ้า

11.ไปเพิ่มใน controller ดังนี้เลยจ้า

12.เพิ่มภาพด้านล่างใน Member_model.php จ้า

13.ให้ไปแก้ไขที่หน้า view ดังภาพล่างจ้า

14.ไปสร้าง Class Dashboard ขึ้นมาใน controller จ้า

เมื่อสร้าง class Dashboard แล้ว ให้พิมพ์ตามนี้ได้เลยจ้า

15.ให้ไปแก้ไฟล์ config.php ใน folder localhost ให้เป็นดังภาพล่างเลยจ้า

16.ลองไปดูที่หน้าเว็บว่าสามารถเข้าไปได้หรือยัง

จะพบว่าไม่สามารถเข้าได้จ้า (โดนวางยา555+) เราจะได้ลองใช้ Dev tools แล้วล่ะ ให้ทำการกด f12 จากนั้นกด Tab Network ใน Dev tools จะได้ดังภาพล่าง

แล้วให้กด Sign In อีกครั้ง จะพบว่ามีไฟล์ auth ขึ้นมา

ให้กดเข้าไปจะพบแบบนี้ ซึ่งตรง Tab Response เราจะเห็นว่า มันแจ้งว่า error ตรงไหนขึ้นมา ให้เราไปแก้จ้า

ให้แก้ตรงวงสีเหลืองๆตามภาพด้านล่างจ้า

ให้เป็นแบบนี้เลยน้า เปลี่ยน response เป็น member จากนั้นกด Save

17.ให้ไปลอง login ในหน้าเว็บดูว่าเข้าได้หรือยัง ซึ่งจะพบว่า…

แท่นแท๊นน~~~ login successfully จ้า แล้วจะเข้ามาในหน้า Dashboard ซึ่งจะมี link Sign out ขึ้นมาแบบนี้เลย

แต่พอเรากดเข้าไปจะพบว่า

18.ให้ไปเพิ่ม function signout() ที่ controller Login.php

function signout()

19.เมื่อไปดูที่หน้าเว็บของเรา ถ้าลอง login เข้าไปใหม่ จะขึ้น Sign out ขึ้นมา

และเมื่อเรากด link Sign out จะพบว่ามัน redirect กลับมาที่หน้า login ของเราจ้า

จบแล้วจ้าสำหรับ Workshop 2 ภาค ละอย่าลืมไป commit ใน SourceTree ด้วยจ้า:D