อบรมวันแรกกับ CI

Submitted by admin on Sun, 07/12/2009 - 01:51

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

สำหรับตัวอย่างที่จะเรียนนี่คือการทำเว็บบอร์ดแบบง่าย ๆ ครับ

เตรียมพร้อมก่อนเรียน

ไปโหลดตัวโปรแกรมจากเว็บไซต์ http://codeigniter.com แล้วก็มีพวกจำลองเซิฟเวอร์เช่น Appserv หรือ XAMPP

ขั้นตอนที่ 1 การตั้งค่าหรือ config

เข้าไปในโฟลเดอร์ system->application->config จากนั้นแก้ไขไฟล์ดังนี้

1. config.php ส่วนนี้แก้ 2 ที่ครับ

บรรทัดที่ 14 แก้เป็น url เว็บของเรา อย่าลืม / ปิดท้ายด้วยนะครับ

$config['base_url'] = http://localhost/ci/";

บรรทัด 176 แก้ให้เป็นเลข 4 ครับ ตามคอมเม้นที่แนะนำ หากใส่ 0 เวลาเออเร่อจะไม่โชว์อะไร

$config['log_threshold'] = 4;

2. autoload.php

บรรทัดที่ 42 ให้ แก้ไขเป็นดังนี้ครับ ส่วนนี้ ผมยังไม่ทราบแน่ชัดว่าแก้ไว้ทำไม แต่คงหมายถึงการใช้ตัวแปรอะไรสักอย่าง ในส่วนวันนี้ยังไม่ได้ใช้ครับ

$autoload['libraries'] = array('database','session');

3. database.php

ให้แก้ไขตามเครื่องหรือเซิฟเวอร์ของเราครับ

$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "12345678";
$db['default']['database'] = "lannaboard";
$db['default']['dbdriver'] = "mysql";

ลองรันดูจะเห็นเออเร่อดังรูป เป็นเพราะเราไม่ได้สร้างฐานข้อมูล ขั้นตอนต่อไปเป็นเป็นการเตรียมฐานข้อมูล

การเตรียมฐานข้อมูล

สร้างฐานข้อมูลชื่อ lannaboard สร้างตารางชื่อ topics แล้วสร้างฟิลดังรูป แล้วลองเพิ่มข้อมูลไปสัก 3-4 แถว

เริ่มต้นเขียนโปรแกรมด้วยหลัก MVC

1. Controller (C) คือ ส่วนควบคุมโปรแกรมของเรา เปรียบเสมือนตัวกลางในการเรียกใช้ M กับ V สร้างไฟล์ ชื่อ Topics.php ไว้ในโฟลเดอร์ controllers แล้วใส่โค๊ดไว้ดังนี้

class Topics extends Controller{
	
	function Topics(){
		parent::Controller();
		$this->load->helper('url');  //คำสั่งสำหรับใช้ฟังชัน redirect
	}
	
	function index(){
		$this->load->model('Topics_model');
		$topics = $this->Topics_model->all_topics()->result_array();
		
		$data = array(
			'topics' => $topics,
			'test' => 'This is rest value'
		);
		
		$this->load->view('topics',$data);
	}
	
	function view(){
		echo 'view';	
	}
	
	function add(){
		if (!empty($_POST['title'])){
		//clean inputdata
			$title = $this->input->post('title');
			$body = $this->input->post('body');
		//save		
		$this->load->model('Topics_model');
			if ($this->Topics_model->add($title,$body)){
				redirect("topics");
			}
		}else{
			$this->load->view('add');
		}		
	}
	
	function edit(){
		echo 'edit';
	}
	
	function delete(){
		echo 'delete';
	}
}

2. Models (M) คือ ส่วนสำหรับติดต่อฐานข้อมูลและจัดการในส่วนฐานข้อมูลใสรูปแบบต่าง ๆ สร้างไฟล์ชื่อ Topics_model.php ไว้ในโฟลเดอร์ controllers แล้วใส่โค๊ดไว้ดังนี้

class Topics_model extends Model{
	function all_topics(){
		$topics = $this->db->get('topics');
		return $topics;
	}
	
	function add($title,$body){
		$sql = "insert into topics (title,body,created_at) values(?,?,?)";
		$result=$this->db->query($sql,array($title,$body,date("Y-m-d H:i:s")));
		return $result;	
	}
}

3. Views (V) คือ ชื่อก็บอกอยู่แล้วว่าคือ ส่วนแสดงผลของโปรแกรมที่เราเขียน สร้างไฟล์ชื่อ topics.php ไว้ในโฟลเดอร์ controllers แล้วใส่โค๊ดไว้ดังนี้

all topic  Add

    
<!--p 
	foreach ($topics as $topic){
	-->
			
  • <!--p echo $topic['title'];--> edit delete
<!--p	}-->

จากนั้น ก็สร้างฟอร์มสำหรับเพิ่มข้อมูลจากไฟล์ชื่อ add.php ในโฟลเดอร์ views อย่าลืมทำหัวด้วยนะครับ (<html> <body>) และเข้ารหัสเป็น utf-8 ด้วย ไม่งั้นจะมีปัญหาภาษาไทยเวลาเพิ่มข้อมูล

...


	
title :	

	
text : 

	



...

ส่วนนี้เป็นการเรียกเข้าหน้าเพจผม http://localhost/CI/index.php/topics/ จบแล้วครับสำหรับอบรมวันแรก อาจจะสรุปไม่ค่อยละเอียดนะครับ เวลาทำค่อนข้างน้อย ยังไงถ้ามีเวลาว่างจะอธิบายเพิ่มขึ้น และก็บางอย่างอาจจะไม่ค่อยเหมือนพี่เค้า แต่ก็แนวทางเดียวกันยังไงก็นำไปประยุกต์ใช้กันครับ

เกล็ดน่ารู้ที่ได้อบรมวันนี้

  • หลักตั้งชื่อ Class ให้เริ่มต้นด้วยตัวใหญ่ จึงเป็นเหตุผลที่ว่าทำไมต้องตั้งชื่อไฟล์ขึ้นต้นด้วยตัวใหญ่ตาม class
  • RESTFull คือ การกระทำ view/insert/edit/delete
  • อยากเห็นโปรเจ็คเจ๋ง ๆ ลองเข้าไปดูที่เว็บ http://www.gotoweb20.net/

Average: 5 (1 vote)