fleabagxp

fleabagxpBlockedUnblockFollowFollowingFeb 4[มาเล่า] โครงสร้าง Project เว็บ PickPéUp (EP1)EP อื่นๆ[มาเล่า] โครงสร้าง Project เว็บ PickPéUp (EP1.

5)ห่างหายจากการเขียน Medium มาเป็นปีละมั้งครับ ไม่ได้เขียนเลย วันนี้ผมอยากมาเล่า Project ตัวนึงที่ผมได้ทำมาเมื่อไม่นานนี้ครับอย่างแรกเลยก็ขอขอบคุณทุกคนที่ร่วมด้วยช่วยกันดัน Pupe BNK48 ไปจนสุดความสามารถนะครับ เอ้า ปรบมือและขอบคุณทีมงานทุกคนที่ให้ผมได้ทำเว็บตัวนี้ขึ้นมา และช่วยกันทดสอบ คอมเม้น เสนอแนะฟีเจอร์ต่างๆ รวมถึงหาบัค จนทำให้เว็บออกมาใช้งานผ่านไปได้ด้วยดี ทุกคนชื่นชอบก็หายเหนื่อยกันไปเยอะเลยครับและก็น้อง Kritsada Sunthornwutthikrai ที่ช่วงพี่วางโครงทิ้งไว้นะครับ ประหยัดเวลาได้พอสมควร เพราะพี่มัวแต่นั่งทำ Backend 55555อ่ะ ก่อนจะเข้าเรื่องครับ ผมได้ตามอ่านและติดตามบทความหนึ่งใน Mediun เรื่องนึงครับ ซึ่งก็คือ .

 .

 .

สำรวจเว็บไซต์ที่สร้างโดยกลุ่มแฟนคลับ BNK48ณ วันที่เขียนบทความนี้ถ้านับถอยหลังเหลืออีกไม่ถึง 1 เดือนก็จะถึงวันที่ทุกคนรอคอย คือวันประกาศผลเลือกตั้ง BNK48 6th…medium.

comซึ่งจากบทความนี้นะครับ ทำให้ผมเห็นความหลายหลายทางเทคนิคการ Development ตัว Website ขึ้นมานะครับ ซึ่งก็จะใช้ Tools และ Framework ของตัวแตกต่างกันออกไปตามความถนัดนะครับ เท่าที่เห็นก็มีทั้งฝั่ง PHP, NodeJS, .

NET หรือแม้กระทั่งจับขึ้น Firebase ก็มี ซึ่งผมว่ามันดีแหะ ที่ได้เห็นความหลากหลายแบบนี้อ่ะ หลายคนก็น่าจะสงสัยครับว่าของ PickPéUp ล่ะ ใช้ Tools หรือ Framework ไหน ในการพัฒนาเว็บขึ้นมา ซึ่งในบทความดังกล่าวได้ให้ความคิดเห็นว่าฝั่ง Technology เว็บนี้เขียน Front-end ด้วย VueJS และส่วน Back-end ยังไม่สามารถระบุได้5คำตอบก็คือ .

 .

 .

ถูกครับ แต่ไม่ทั้งหมด 55555555โอเคครับ ผมจะมาเฉลยแบบหมดเปลือก(มั้ง) ในด้านของข้อมูลทางเทคนิคเท่านั้นนะครับ ซึ่งหวังว่าจะมีประโยชน์ในการวางแผน หรือฝึกฝนในการพัฒนาเว็บไซต์ขึ้นมาครับโปรเจค PickPéUp นี้ถูกสร้างด้วย PHP เป็นหลักครับ เป็น PHP Framework ที่มีชื่อว่า Laravel นั่นเองครับ ซึ่งผมได้ทำการใช้ Laravel 5.

7 ซึ่งเป็นเวอร์ชั่นล่าสุดในช่วงเวลาที่เขียนเว็บและบทความอยู่ตอนนี้ครับLaravel – The PHP Framework For Web ArtisansLaravel – The PHP framework for web artisans.

laravel.

comซึ่งความจริง PHP Framework มีหลายตัวให้เลือกครับ ที่ดังๆก็จะมี Laravel, Codeingator, Yii, CakePHP, etc.

ซึ่งสาเหตุที่เลือกใช้ Laravel เพราะผู้เขียนใช้บ่อยและความถนัดส่วนตัวครับ มี Library ให้ใช้ครบครัน (ซึ่งผมคิดว่าตัวอื่นๆก็น่าจะมีเหมือนกัน) เอาเป็นว่าให้เลือก Framework ที่ตัวเองถนัดได้เลยครับLaravel นั้นสามารถเขียนได้ทั้ง Front-end และ Back-end ซึ่งเป็น Framework ที่เป็น Fullsrack อยู่แล้ว โดยโครงสร้างของ Project ของ Laravel จะเป็นดังนี้ครับโครงสร้างของ Project ที่ใช้ Laravelอ่าว และอะไรคืออะไรล่ะ แต่ละไฟล์ / โฟลเดอร์มันทำงานยังไงLaravel จะแบ่ง Structure เป็นอิสระระหว่างส่วน Front-end และ Back-end เพื่อความเป็นระเบียบเรียบร้อยนะครับ ส่วน Front-end หลักๆจะอยู่ในนี้ครับโครงสร้างของ Project ที่ใช้ Laravel ในส่วนของ VueView ทั้งหมดใน Laravel ก็คือส่วนที่ใช้แสดงผลเป็นหน้าเว็บต่างๆครับ ซึ่งเจ้าตัว blade ที่ใส่ลงท้ายทุกไฟล์ที่เป็นหน้าแสดงผลนั้นเป็น library ของทาง laravel ซึ่งนำมาใช้เป็น PHP Template หลักในการแสดงผล อีกทั้งยังสามารถทำ layout หรือ template ทิ้งไว้และ include นำมาใช้ยังหน้าอื่นๆได้ ซึ่งทำให้เกิดความเป็นระเบียนของโค้ด ลดการใช้โค้ดซ้ำซ้อน และยังสามารถนำโค้ดกลับมา Reuse ได้ ในที่นี้ผมทำ Template ของหน้าเว็บนี้อยู่ในโฟลเดอร์ layout ซึ่งได้ถูก include เพื่อนำไปใช้ได้แทบทุกที่View Blade ในส่วนของ layoutsอ่ะ ลืมบอกไป ว่า view blade ทั้งหมดใช้ HTML CSS JS เขียนตามปกติครับ แล้วตัว blade จะไป render เองครับตัวอย่างของการนำไปใช้จ้านี่คือโครงสร้างของไฟล์ app.

blade.

phpapp.

blade.

phpและนี่คือโครงสร้างของไฟล์ index.

blade.

phpindex.

blade.

phpและ footer.

blade.

phpfooter.

blade.

phpจะเห็นได้ว่า ไฟล์ layout ที่ extends และ include มา คือไฟล์ที่อยู่ใน layouts/app.

blade.

php และ layouts/footer.

blade.

php ซึ่งเวลาเรียกใช้ไฟล์ view ไม่ว่าจะใน view ด้วยกันเอง หรือเรียกใน route หรือ controller ให้ใช้การใช้จุดแทนการใช้ “/” เพื่อเป็น path เปรียบเสมือนเราเรียกข้อมูลบางอย่างที่อยู่ในก้อน Object ของ JSON นั่นแหละครับ ซึ่งในการเรียกไฟล์ view สามารถใส่ชื่อตามชื่อไฟล์โดยไม่ต้องใส่ .

blade.

php ต่อท้ายเข้าไปและนี่คือหน้า Landing Page ของเว็บ PickPéUpหากตัดเหลือแต่ Template ทั้งสองไฟล์ จะเป็นแบบนี้ครับapp.

blade.

phpfooter.

blade.

phpหากตัดสองส่วนนี้ที่เป็นการ include ออก ส่วนที่เหลือนั้นคือส่วนที่ถูกเขียนในไฟล์ของหน้า landing page ครับแล้วการจะเขียน Front-end นี้ทำยังไง ?ก่อนอื่นอยากจะพาทุกคนมารู้จักเจ้า Bootstrap ที่ทำให้ layout ให้เป็นระบบระเบียบขึ้นครับBootstrapThe most popular HTML, CSS, and JS library in the world.

getbootstrap.

comBootstrap เป็น library ตัวนึงที่เอาใไว้สร้าง UI บนหน้าเว็บของเราครับ ซึ่งก่อนที่จะวางโครงเว็บใดๆ เราต้องออกแบบก่อนครับ โดยหลักการใบการออกแบบเว็บไซต์ร่วมกับ Bootstrap นั้น ต้องอยู่ในหลักเกณฑ์ของ Grid system ของ Bootstrap ครับGrid systemUse our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system…getbootstrap.

comตัวอย่าง Tutorial คร่าวๆครับกฎเหล็กของ Bootstrap เลยนะครับ หากใช้แล้ว ให้เราแบ่งความกว้างหน้าจอเป็น 12 ส่วน และลองออกแบบภายใต้ Grid 12 ส่วนนั้นครับสำหรับ Design หน้า landing page นี้นะครับ ปัจจุบันหลายๆที่น่าจะใช้กัน ซึ่งมีชื่อเรียกว่า Multi-Layer Parallax Scrolling ครับ แต่ในเว็บ PickPéUp จะไม่ค่อยมี effect ดุ๊กดิ๊กเท่าไหร่นะครับในส่วนของรูปต่างๆ ที่นำมาตกแต่งเว็บไซต์ได้รับการช่วยเหลือจากพี่คิม ฝูงเป็ด Q พี่แทน สำหรับโลโก้ PickPéUp และวีดีโอ(รึเปล่า) ที่อยู่บน header เว็บนะครับ ทำให้เว็บออกมามีสีสันเยอะมากๆครับสำหรับการใส่รูปนั้น ต้องคำนึงถึงความ Responsive ของเว็บด้วยครับ กับการแสดงผลในหน้าคออื่นๆ เช่น มือถือ แท็ปเลต เป็นต้นสำหรับแนวทาง Reference เกี่ยวกับการทำ Responsive image สามารถดูได้ดังนี้(ปล.

ควรย่อรูปที่จะนำมาใช้ให้เหมาะสมด้วย ไม่เล็กหรือใหญ่จนเกินไป)ImagesDocumentation and examples for opting images into responsive behavior (so they never become larger than their parent…getbootstrap.

comBordersUse border utilities to quickly style the border and border-radius of an element.

Great for images, buttons, or any…getbootstrap.

comมุมมองบน PCมุมมองบนมือถืออ่ะ ก่อนจะจบ EP1 นี้นะครับ ขอเกริ่นเรื่อง Routing ทิ้งท้ายไว้นะครับจากโครงสร้าง Project ของ Laravel เมื่อกี้นะครับ จะเห็นได้ว่ามันมี Folder routes อยู่ ถ้าเปิดเข้าไปมันมะมีไฟล์ดังนี้route filesRoute คืออะไร ?หากท่านรู้จักเพลง Yume e no Route หรือเพลง หมื่นเส้นทางRoute ก็คือเส้นทางนั่นแหละครับในการที่เราจะไปที่ไหนซักที่ เราก็ต้องมีเส้นทางในการไปถูกมั้ยครับ เจ้าตัว Route ของ Laravel นี่แหละครับที่จะมาจัดการกับเส้นทางในการไปยังหน้าต่างๆตัวอย่าง เช่น ในไฟล์ web.

php นี้ตัวอย่าง Routeจากรูปข้างต้น หากเราต้องการจะไปยังหน้า index ตัว route ของมันก็คือ “ / ” และหากเราต้องการไปหน้าล็อกอิน ตัว route ที่เราตั้งให้ไปจะเป็น “ /login ”ซึ่งสิ่งที่ return ออกไปนั้น คือหน้า View Blade ที่เราทำไว้นั่นเอง ซึ่งสามารถใส่ชื่อตามชื่อไฟล์โดยไม่ต้องใส่ .

blade.

php ต่อท้ายเข้าไป ดังในตัวอย่างก็คือview(‘index’) ให้เรนเดอร์ไฟล์ index.

blade.

php ออกไปแสดงผลview(‘login’) ให้เรนเดอร์ไฟล์ login.

blade.

php ออกไปแสดงผล เป็นต้นเพิ่มเติมการทำ Routing ของ Laravel นะครับRouting – Laravel – The PHP Framework For Web ArtisansLaravel – The PHP framework for web artisans.

laravel.

comโอเคครับ EP1 นี้น่าจะยาวมากกก ไว้พบกันใหม่ EP2 ซึ่งจะพูดถึงฝั่ง Back-end มากขึ้นครับสวัสดีครับปล.

ความจริงผมอยากเจาะลึกส่วนต่างๆมากกว่านี้ครับ สามารถรีเควสมาได้ครับ แล้วจะมาเขียนอธิบายเจาะลึกหากสะดวกนะครับ.

. More details

Leave a Reply