เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

Posted: **15/04/2015 12:55 pm**

วิธีเรียกใช้งาน CSS/Image/JavaScipt
ในตัวอย่างเราจะทำการเรียกใช้งานในไฟล์แม่เเบบของเรา โดยให้ทำการพิมพ์

<!DOCTYPE html>
<html>
 <head>
  {% block stylesheet %}
  <link rel="stylesheet" href="{{ asset('bundles/TestHello/css/styles.css') }}" />
  <link rel="stylesheet" href="{{ asset('bundles/TestHello/css/menu.css') }}" />
  {% endblock %}
  {% block javascript %}
       <script src="{{ asset('bundles/TestHello/js/script.js') }}" type="text/javascript"></script>
     {% endblock %}   
    <title>{% block title %}{{name}}{% endblock %}</title>
    </head>
 </head>
 <body>  
<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='active has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
  <div id="content">{% block content %} {% endblock %}</div>
  <div id="sidebar">{% block sidebar %} {% endblock %}</div>
  <div id="footer">
   {% block footer %}
   &copy; 2015 mindphp.com
   {% endblock %}
  </div>
 </body>
</html>

ผลคือ จะได้มาในรูปแบบนี้

: 2015-04-15_12-09-47.png (41.59 KiB) Viewed 726 times

ที่นี่เราจะทำการเรียกไฟล์ CSS เเละ JS มาใช้งาน

: 2015-04-15_12-44-17.png (13.92 KiB) Viewed 726 times

Code: Select all

{% block stylesheet %}
  <link rel="stylesheet" href="{{ asset('bundles/TestHello/css/styles.css') }}" />
  <link rel="stylesheet" href="{{ asset('bundles/TestHello/css/menu.css') }}" />
  {% endblock %}
  {% block javascript %}
       <script src="{{ asset('bundles/TestHello/js/script.js') }}" type="text/javascript"></script>
     {% endblock %}

เมื่อเราทำการพิมพ์ Code เหมือนดังด้านบนเเล้ว ที่นี่ให้เราทำตามขึ้นตอนนี้ เพื่อ Set path เข้าไปหา Forder Puplic

: 2015-04-15_12-12-19.png (50.48 KiB) Viewed 726 times

: 2015-04-15_12-13-05.png (61.79 KiB) Viewed 726 times

: 2015-04-15_12-13-48.png (36.63 KiB) Viewed 726 times

: 2015-04-15_12-27-45.png (57.78 KiB) Viewed 726 times

ข้อสังเกตุ
1.

Code: Select all

{{ asset('bundles/TestHello/js/script.js') }}

TestHello : ได้มาจาก

: 2015-04-15_12-51-07.png (12.95 KiB) Viewed 726 times

2.

Code: Select all

  <link rel="stylesheet" href="{{ asset('bundles/TestHello/css/styles.css') }}" />
  <link rel="stylesheet" href="{{ asset('bundles/TestHello/css/menu.css') }}" />

ถ้าเขียนในลักษณะนี้ จะเป็นการเรียกที่ละไฟล์ ถ้าหากต้องการ CSS ใน Folder ทั้งหมด เเบบ include dynamic สามารถดูได้จากตัวอย่าง ต่อไปค่ะ

เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

Twig ใน symfony 2 : "Asset" include CSS/image/js

Twig ใน symfony 2 : "Asset" include CSS/image/js