spelte

Writing Multi-page as normal but professional

1.0 version

---

Menu

spelte คืออะไร

ติดตั้ง

การเขียนหน้าเว็บของ spelte

import

library

โฟลเดอร์ pages

dynamic path

_

_error.php

โฟลเดอร์ public

---

spelte คืออะไร

• จากโปรเจค PHP_SPA ที่ได้มีการเขียนในรูปแบบฟังค์ชั่น ซึ่งต้องมาคอยกำหนด path ด้วยตัวเอง จนไปถึง NEXIT แต่ยังคงเขียนในรูปแบบฟังค์ชั่น ซึ่งแม้จะมีระบบระเบียบและประสิทธิภาพดีแต่ว่ายังคงยากต่อการใช้งาน จึงได้มีการต่อยอดและพัฒนาจากที่มีการเขียนในรูปแบบฟังค์ชั่น มาเป็นการเขียนในรูปแบบปกติ แต่ยังคงมีการจัดการ path ต่างๆ ได้เหมือนเดิม

• spelte คือการเขียนในรูปแบบปกติ แต่ยังคงสามารถทำงานร่วมกับ library ต่างๆ ได้ปกติ และยังคงสามารถจะเขียนแยกเป็น component ต่างๆ ได้

---

การเขียนหน้าเว็บของ spelte

• การเขียนหน้าเว็บของ spelte นั้นสามารถที่จะเขียนได้เหมือนกับการเขียนทั่วๆ ไป แต่ว่าไม่จำเป็นต้องเขียนทั้งหมด

• ยกตัวอย่าง สมมติว่าไฟล์นี้อยู่ใน ./pages/home.php

// ./pages/home.php
<?php
$getParams = import("wisit-router/getParams");
?>
<title>home</title>
<main>
  <h1>hello world</h1>
  <?php import("./components/Button"); ?>
</main>

• สมมติว่า ไฟล์ข้างล่างนี้อยู่ใน ./components/Button.php

// ./components/Button.php
<?php 
$textButton = "click me";
?>
<button><?php echo $textButton; ?></button>

• $getParams = import("wisit-router/getParams");

  • ส่วนแรกคือการ import library เข้ามาใช้งาน โดยสามารถที่จะเปิดแท็ก php แล้วทำการ import ภายในนั้นได้เลย

• <title>home</title>

  • จะเห็นได้ว่าการกำหนด title นั้นไม่จำเป็นต้องใช้ library แต่สามารถใช้ html tag ได้เลย แต่มีข้อระวังคือ ไม่สามารถกำหนดซ้ำหรือกำหนดทับกันได้

• <?php import("./components/Button"); ?>

  • ตรงส่วนนี้คือการใช้ import เพื่อทำการนำเข้า component จากไฟล์ ./components/Button.php โดยที่เมื่อทำการ import มันจะโชว์ทันทีโดยไม่ต้องทำการสั่งรัน แต่ในกรณ์ที่เขียนเป็นในรูปแบบ ฟังค์ชั่น และมีการ export ก็ยังสามารถใช้แบบฟังค์ชั่นได้

• ./components/Button.php

  • ในส่วนนี้คือการเขียนแยกเป็น component โดยก็ยังสามารถเขียนแบบปกติโดยใส่ html tag หรือ php tag ได้ปกติเหมือนการเขียนทั่วๆ ไป

• ข้อสังเกตเพิ่มเติม

  • จะสังเกตเห็นว่าไม่มี header tag นั่นเป็นเพราะในส่วนของหน้าต่างๆ นั้น ไม่จำเป็นต้องเขียนทั้งหมด แต่ให้เขียนแต่สิ่งที่อยู่ข้างใน body ก็พอ หากต้องการจัดการ header หรืออื่นๆ สามารถไปแก้ไขได้ที่ ./index.php

---

import

• ในการเขียน spelte ควรใช้ import แทนการ require ซึ่งจะมีตัวอย่างและวิธีใช้กับประเภทไฟล์ต่างๆ ดังนี้

การ import library

• ตัวอย่าง การ import wisit-router

['Route' => $Route] = import('wisit-router');

• สำหรับ library นั้นจะใส่เพียงชื่อของ library ที่ต้องการเท่านั้น

• หาก library ที่ต้องการนั้นรองรับการ import แบบ ไฟล์ย่อยๆ ก็สามารถ import ได้ เช่น

$title = import('wisit-router/title');

• จะสังเกตุว่าไม่ต้องใส่นามสกุลของไฟล์ (.php)

การ import ไฟล์อื่นๆ รวมทั้งไฟล์เว็บแบบฟังค์ชึ่น

• ตัวอย่าง

import('./components/Button');

• จำเป็นต้องใส่ที่อยู่ไฟล์โดยอ้างอิงจาก path นอกสุดเสมอ และ จำเป็นต้องใส่ ./ หน้าสุดข้องที่อยู่ไฟล์ตามตัวอย่าง
• และ เหมือนกับ library เมื่อกี้คือ ไม่ต้องใส่นามสกุลของไฟล์

---

library

• ในโปรเจคนี้จะมี library เริ่มต้นมาให้ 2 library คือ
  • use-import
  • spelte
• นอกจากนั้นคุณสามารถติดตั้ง library อื่นๆ หรือเขียนขึ้นมาเองก็ได้ ซึ่งมีข้อกำหนดดังนี้
  • 0 ไฟล์หลักใน library จะต้องชื่อ main.m.php เท่านั้น
  • 1 ชื่อโฟลเดอร์ของ library คือชื่อของ library
  • 2 หากจะทำให้มีการ import ซ้ำได้ และมีตัวแปรมารับค่า ต้องเขียนภายในขอบเขตการ return ซึ่งจะ return เป็น function , variable, array, obj ก็ได้ทั้งนั้น
• use-import คือ library ที่จะทำให้สามารถใช้ import แทน require ซึ่งในการเขียนนั้นจะไม่ใช้ require อีก
• spelte คือใจหลักของโปรเจคนี้ ที่จะทำให้สามารถทำงานได้อย่างที่เป็นอยู่ ซึ่งจะมีการใช้งานที่หน้า index.php

---

โฟลเดอร์ pages

• การเขียนหน้าต่างๆ จะต้องมาเขียนที่ โฟลเดอร์ pages ซึ่งจะเทียบเท่า htdocs เช่น เมื่อสร้าง ไฟล์ about.php ไว้ใน pages เมื่อเข้าหน้า about.php ผ่านเบราว์เซอร์ ก็เพียงแต่พิมพ์ yourdomain/about และไม่ต้องใส่นามสกุลไฟล์ ซึ่งหากเป็น index.php ก็ไม่ต้องใส่ชื่อไฟล์ก็ได้ ก็จะเป็น yourdomain เฉยๆ
• ที่สำคัญห้ามนำไฟล์อื่นนอกเหนือจากหน้าเว็บไว้ที่ pages

---

dynamic path

• หากต้องการให้ โฟลเดอร์หรือไฟล์ใน pages เป็นแบบ dynamic ให้กำหนดชื่อเป็น [] เช่น
  • ชื่อไฟล์ [].php
  • ชื่อโฟลเดอร์ []

---

_

• หากไม่ต้องการให้หน้านั้นถูกเข้าถึงให้ใส่ _
• และระวังเรื่อง dynamic path ที่อาจจะมี _ ปนอยู่

---

_error.php

• คือหน้าที่จะแสดงผลเมื่อผู้ใช้ไม่พบหน้าที่ต้องการ ซึ่งห้ามเปลี่ยนชื่อไฟล์

---

โฟลเดอร์ public

• ตามชื่อไฟล์เลย หากคุณต้องการเก็บอะไรที่ต้องการให้คนอื่นเข้าถึง เช่นรูบภาพ ไฟล์ ก็สามารถนำมาไว้ที่นี่ได้ รวมไปถึงไฟล์ css หรือ js ด้วย

---

ติดตั้ง

• ใช้ control ในการติดตั้ง ใช้คำสั่ง

   php control create spelte-app