Website Directory Tree

Updated: 5 November 2016

วันนี้มานั่งจัดระเบียบ dir บนเครื่อง เนื่องจากรู้สึกว่ามันสะเปะสะปะจนเกินไปหน่อย ไม่รู้อะไรต่ออะไรโยงกันมั่วไปหมด เนื่องจากตอนทำ project ไม่ได้คิดไว้แต่แรกว่าต้องทำอะไรบ้าง พอมีส่วนขยายมันก็เลยโตแบบไม่บันยะบันยัง

จนมันมีความรู้สึกแว๊บเข้ามาว่า เฮ้ยเรามาถึงจุดนี้ได้ยังไง จุดที่เมื่อก่อนทำเว็บแบบ static html เวลาแบ่ง folder ก็บ้านๆ ตามนี้

ยุค static website

root/
 |-- style/
 |-- img/
 |-- icon/
 |-- banner/
 |-- flash/
 |-- page/
 |-- index.html
 +-- home.htm

บางเว็บก็จะตั้งชื่อ folder กันแบบเหลือเฟือ เป็นภาษา karaoke บ้าง ชื่อไม่บ่งบอกความหมายบ้าง อาทิ “phantee” “tarangboss” เป็นต้น พอต้นยุค web dynamic ที่เริ่มมี programing language เข้ามา directory เว็บก็เปลี่ยนไปเป็นแบบนี้

ยุค Dynamic website

root/
 |-- style/
 |-- images/
 |-- javascript/
 |-- include/
 |-- connect/
 |-- admin/
 +-- index.php

จะเริ่มมีไฟล์มากขึ้น จากเดิมที่ static เรียกหน้าเว็บไหน ก็แสดงหน้าเว็บนั้นเลยจบๆไป พอมาเป็น php บางคนก็ยังติดนิสัย static มา ทำให้สร้างไฟล์ที่ทำงานซ้ำๆ กัน เปลี่ยนแค่หัวเรื่อง “title” เท่านั้นและแก้ query ใหม่ ประสบการณ์ตรงเลย เมื่อก่อน code แบบนี้จริงๆ เอ๊ะอะ นึกไม่ออกก็ include, require ไฟล์ใหม่ตะพึด ไฟล์ที่ตั้งชื่อจะมีหน้าตาแบบนี้

ยุค Programming เฟื่องฟู

inc-product-add.php 
inc-product-save.php 
inc-product-view.php 
inc-product-view2.php 
inc-product-view3.php 
inc-product-edit.php 
inc-product-edit-save.php 
inc-product-delete.php 
inc-product-search.php 
inc-product-type.php 
inc-product-comment.php 
inc-product-random.php 
inc-product-random2.php 
inc-product-member.php 
index1.php 
index2.php

นี่ยังน้อยยยย เว็บนึงต่ำๆต้องมีไฟล์กากๆ อย่างน้อย 30-50 ไฟล์ ที่ทำหน้าที่แบ่งเบาภาระของชาวบ้าน พอพ้นยุค code noob มาซักพัก ทั้ง dir ก็จะหดลง และมี scope การทำงานที่ชัดเจนขึ้น

ยุค Dev

root/ 
 |-- css/ 
 |-- images/ 
 |-- js/ 
 |-- fonts/ 
 +-- index.xxx

จนล่วงเลยมายุค App ในปัจจุบัน มีทั้ง framework สารพัดให้ใช้ คนเราไม่ต้องจัดระเบียบด้วยตัวเองอีกต่อไปแล้ว เพราะมันจะสร้างไว้ให้ มีหน้าที่ใช้ให้เป็นเท่านั้น

ยุค Framework

root/ 
 |-- .git 
 |-- app/ 
 |-- bootstrap/ 
 |-- config/ 
 |-- database/ 
 |-- public/ 
 |-- resource/ 
 |-- storage/ 
 |-- tests/ 
 |-- .bowerrc 
 |-- .env 
 |-- .gitignore 
 |-- readme.md 
 |-- gulpfile.js 
 |-- package.json 
 +-- bower.json

เฮ้ย เรามาถึงจุดนี้ได้ยังไง?

มาถึงตอนสรุปแล้ว ผมจะแนะนำ dir ของตัวเองแล้วกัน สำหรับเอาไว้เป็นต้นแบบ หรือ blueprint ของตัวเอง เวลาสร้าง project ใหม่

root/ 
 |-- _script/ --- เก็บไฟล์ js ที่เขียนเอง หรือพวก plugins ของ jquery 
 |-- _styles/ --- เก็บไฟล์ .scss, .less ที่เขียนเอง รวมถึง _variables ที่จำเป็น 
 |     +-- css/ --- เก็บ .css ที่เป็นไฟล์เฉพาะของ plugins บางอย่าง หรือ 
 |-- fonts/ --- เก็บ font face แยกเป็น folder ใคร folder มัน มี .eot, .svg, .ttf, .woff, .woff2 
 |-- images/ --- เก็บสารพัดภาพ ถ้าเฉพาะเจาะจงก็แยก folder ออกไปได้ 
 |-- node_modules/ --- ถ้าใช้ มันก็ต้องมี! 
 |-- pre-css/ --- ตัว css จาก {_styles} เอาไว้ test production 
 +-- www/ --- เว็บสำเร็จ 
      |-- css/ --- .css ที่ minify แล้ว 
      |-- js/ --- .js ที่ concat, uglify แล้ว 
      |-- images/ --- ภาพหลัง imagemin process แล้ว 
      |-- fonts/ --- web fonts ทั้งหมด ที่ใช้ 
      +-- index.html

ลอก note เก่า มาเล่าใหม่

• Facebook
• Twitter
• Line

coding directory howto webtree