version 4.1.0

สร้าง Layout ให้กับเว็บแอพพลิเคชั่นของเรา

  อังคารที่ 27 มกราคม พ.ศ. 2558 เวลา 08:57:37 น.      1,627 ครั้ง


สร้าง Layout ให้กับเว็บแอพพลิเคชั่นของเรา

แนะนำ

สวัสครับ วันนี้ผมอยากจะมานำเสนอบทเรียนนี้ ซึ่งมันจะช่วยให้เราสามารถสร้างเว็บแอพพลิเคชั่นได้ทั้ง Front-End และ Back-End โดยใช้ Theme Layouts เป็นตัวแบ่งการแสดงผลการทำงานต่าง ๆ ออกจากกัน

บทนี้มีอะไรบ้าง

  1. ตอนที่ 1 สร้างไฟล์ Layouts สำหรับแสดงผลในส่วนของ Front-End ชื่อว่า front.volt
  2. ตอนที่ 2 สร้างไฟล์ Layouts สำหรับแสดงผลในส่วนของ Back-End ชื่อว่า back.volt
  3. ตอนที่ 3 สร้างไฟล์ Layouts สำหรับแสดงผลในส่วนของ Index ชื่อว่า back.volt
  4. ตอนที่ 4 คำสั่งเรียกใช้งาน Theme Layouts ภายในไฟล์ Controlelr ที่ต้องการ

ตัวอย่างคำสั่ง

 <!DOCTYPE html>
<html>
    <head>
	<title>Front-End | Phalcon PHP Framework</title>
    </head>
    <body>
        <h2>Front-End</h2>
        {{ content() }}
    </body>
</html>


ตัวอย่างคำสั่ง

 <!DOCTYPE html>
<html>
    <head>
	<title>Back-End | Phalcon PHP Framework</title>
    </head>
    <body>
        <h2>Back-End</h2>
        {{ content() }}
    </body>
</html>


ตัวอย่างคำสั่ง

 <!DOCTYPE html>
<html>
    <head>
	<title>Index | Phalcon PHP Framework</title>
    </head>
    <body>
        <h2>Index</h2>
        {{ content() }}
    </body>
</html>


ตัวอย่างคำสั่ง

 class ExampleController extends ControllerBase 
{
    public function initialize(){
        /* กำหนดให้ทุก ๆ Function ใช้ Layouts ชื่อว่า "index.volt" ทั้งหมด */
        $this->view->setTemplateAfter('index'); // index ชื่อ layout
    }
    
    public function indexAction()
    {
        // เรียกใช้งาน "index.volt" อัตโนมัติ
    }    
    public function frontAction()
    {
        /* เรียกใช้ Layouts ชื่อว่า "front.volt" เฉพาะ Function นี้เท่านั้น */
        $this->view->setTemplateAfter('front'); // front ชื่อ layout
        /* คำสั่งต่าง ๆ */
    } 
    public function backAction()
    {
        /* เรียกใช้ Layouts ชื่อว่า "back.volt" เฉพาะ Function นี้เท่านั้น */
        $this->view->setTemplateAfter('back'); // back ชื่อ layout
        /* คำสั่งต่าง ๆ */
    } 
}

รูปภาพตัวอย่าง index

รูปภาพตัวอย่าง index

รูปภาพที่ 1 | รูปภาพตัวอย่าง index

1. ทดสอบการเรียกใช้ Layouts index โดยให้เข้าไปที่ URL http://localhost/phalcon_demo/example และจะแสดงดังรูปตัวอย่าง

รูปภาพตัวอย่าง Front-End

รูปภาพตัวอย่าง Front-End

รูปภาพที่ 2 | รูปภาพตัวอย่าง Front-End

2. ทดสอบการเรียกใช้ Layouts Front-End โดยให้เข้าไปที่ URL http://localhost/phalcon_demo/example/front และจะแสดงดังรูปตัวอย่าง

รูปภาพตัวอย่าง Back-End

รูปภาพตัวอย่าง Back-End

รูปภาพที่ 3 | รูปภาพตัวอย่าง Back-End

3. ทดสอบการเรียกใช้ Layouts Back-End โดยให้เข้าไปที่ URL http://localhost/phalcon_demo/example/back และจะแสดงดังรูปตัวอย่าง



แท็ก


นักแปล / นักเขียน / เรียบเรียง

author

เอกบิณ ใจแก้วมา (แม็ก)

"โปรแกรมเมอร์ตัวเล็ก ๆ" สะสมประสบการณ์ด้านการพัฒนาซอฟแวร์มามากกว่า 11 ปี
# ติดตามผลงานได้ที่ | พบกับเราที่ Google+ | Facebook






Comment