Thứ năm, 15/01/2015 | 00:00 GMT+7

Cách bắt đầu với Silex trên Ubuntu 14.04

Silex là một vi khuôn khổ PHP được xây dựng trên các thành phần của Symfony2. Nó được dùng để xây dựng các trang web nhỏ và các ứng dụng lớn. Nó ngắn gọn, có thể mở rộng và có thể kiểm tra được.

Trong hướng dẫn này, ta sẽ bắt đầu bằng cách download và cấu hình Silex. Sau đó, bạn sẽ học cách tạo một ứng dụng Silex cơ bản.

Ta sẽ sử dụng Composer để cài đặt Silex, một trình quản lý gói PHP phổ biến. Thông tin thêm về Composer có thể được tìm thấy trong hướng dẫn này . Vào cuối hướng dẫn này, bạn sẽ có một trang blog đầy đủ chức năng.

Lưu ý: Hướng dẫn này đã được thử nghiệm trên Ubuntu, nhưng sẽ hoạt động tốt như nhau trên các bản phân phối Linux khác. Các liên kết đề cập đến các hướng dẫn Ubuntu, nhưng vui lòng tìm các hướng dẫn thích hợp để cài đặt server của bạn và cài đặt LAMP và Git.

Yêu cầu

Vui lòng hoàn thành các yêu cầu này.

Bước 1 - Cài đặt Silex

Trong phần này, ta sẽ cài đặt Silex bằng Composer. Để bắt đầu, hãy thay đổi folder làm việc của bạn thành folder root của tài liệu Apache, /var/www/html :

cd /var/www/html 

Tiếp theo, xóa nội dung mặc định của folder này:

sudo rm /var/www/html/index.html 

Sau đó, di chuyển đến folder /var/www để không lộ tất cả các file của bạn ra công chúng:

cd /var/www 

Sau đó, download Composer:

sudo curl -sS https://getcomposer.org/installer | sudo php 

Tiếp theo, ta sẽ tạo và chỉnh sửa file Composer composer.json :

sudo nano composer.json 

Trong file này, hãy thêm các nội dung sau:

{     "require": {         "silex/silex": "~1.2"     } } 

Bây giờ ta đã yêu cầu Composer download Silex version 1.2 như một phụ thuộc. Để bắt đầu download , hãy thực hiện lệnh sau:

sudo php composer.phar update 

Bây giờ, Composer sẽ download Silex và các phụ thuộc của nó; quá trình này có thể mất vài giây.

Bước 2 - Bootstrapping Silex

Trong phần này, ta sẽ khởi động Silex bằng cách bao gồm các file cần thiết và tạo ứng dụng. Để bắt đầu, hãy chỉnh sửa file /var/www/html/index.php :

sudo nano /var/www/html/index.php 

Trong file này, hãy thêm các nội dung cơ bản sau:

<?php require_once __DIR__.'/../vendor/autoload.php'; // Add the autoloading mechanism of Composer  $app = new Silex\Application(); // Create the Silex application, in which all configuration is going to go  // Section A // We will later add the configuration, etc. here   // This should be the last line $app->run(); // Start the application, i.e. handle the request ?> 

Trong suốt hướng dẫn này, ta sẽ thêm nhiều thông tin cấu hình và dữ liệu khác vào file này. Tất cả các dòng mới mà ta thêm vào sẽ nằm trong Section A , giữa $app = new Silex\Application();$app->run(); các dòng.

Trong cùng một file , /var/www/html/index.php bật gỡ lỗi, điều này rất hữu ích khi phát triển ứng dụng của bạn. Thêm dòng này vào Phần A :


$app['debug'] = true;

Bước 3 - Tạo ứng dụng blog

Trong phần này, ta sẽ tạo một ứng dụng blog mẫu. Nếu bạn muốn tập trung vào ứng dụng của riêng mình, vui lòng xem tài liệu Silex .

Ta sẽ tạo một ứng dụng blog mẫu. Nó sẽ không sử dụng database , nhưng nó có thể được chuyển đổi tương đối dễ dàng bằng cách xem qua tài liệu DoctrineServiceProvider .

Thêm công cụ mẫu cành cây

Đầu tiên, hãy bắt đầu bằng cách thêm một phụ thuộc khác: Twig . Twig là một công cụ mẫu cũng được Symfony framework sử dụng. Nó sẽ phục vụ các mẫu ứng dụng của ta . Để thêm nó, hãy chỉnh sửa composer.json :

sudo nano /var/www/composer.json 

Sau đó, thêm dòng phụ thuộc mới cho twig , được hiển thị bằng màu đỏ bên dưới. Đừng quên dấu phẩy ở dòng trước:

{     "require": {         "silex/silex": "~1.2",         "twig/twig": ">=1.8,<2.0-dev"     } } 

Tiếp theo, cập nhật các phần phụ thuộc của Composer :

sudo php composer.phar update 

Bật mod_rewrite

Bây giờ, bạn cần phải cấu hình web server , trong trường hợp này là Apache.

Trước tiên, hãy đảm bảo bạn đã bật mod_rewrite và bạn đã cho phép các thay đổi trong .htaccess . Quá trình được mô tả trong hướng dẫn này , nhưng hãy nhớ rằng server ảo mặc định của Ubuntu 14.04 nằm trong /var/www/html chứ không phải /var/www .

Sau khi bạn đã bật module (như được giải thích trong hướng dẫn được liên kết), hãy thêm các dòng sau vào file /etc/apache2/sites-available/000-default.conf của bạn:

sudo vim /etc/apache2/sites-available/000-default.conf 
<Directory /var/www/html/>                 Options Indexes FollowSymLinks MultiViews                 AllowOverride All                 Order allow,deny                 allow from all </Directory> 

Sau đó, tạo và chỉnh sửa .htaccess :

sudo nano /var/www/html/.htaccess 

Trong file này, hãy thêm các nội dung sau:

<IfModule mod_rewrite.c>     Options -MultiViews      RewriteEngine On     RewriteCond %{REQUEST_FILENAME} !-f     RewriteRule ^ index.php [QSA,L] </IfModule> 

Điều này sẽ đảm bảo bất kỳ yêu cầu nào đối với file không tồn tại đều trỏ đến ứng dụng của ta , điều này cho phép ứng dụng thực hiện định tuyến.

Tạo nội dung blog

Để thêm một số bài báo, ta sẽ tạo một mảng chứa tiêu đề, nội dung, tác giả và ngày xuất bản. Ta có thể lưu trữ điều này trong đối tượng ứng dụng của bạn bằng đối tượng containers mà nó mở rộng. Một đối tượng container có thể chứa nhiều đối tượng, được dùng lại bởi tất cả các đối tượng khác trong ứng dụng. Để thực hiện việc này, hãy thêm thông tin sau vào Section A trong /var/www/html/index.php

sudo nano /var/www/html/index.php 

Thêm các nội dung sau:

$app['articles'] = array(     array(         'title'    => 'Lorem ipsum dolor sit amet',         'contents' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis vestibulum ultricies. Sed sit amet sagittis nisl. Nulla leo metus, efficitur non risus ut, tempus convallis sem. Mauris pharetra sagittis ligula pharetra accumsan. Cras auctor porta enim, a eleifend enim volutpat vel. Nam volutpat maximus luctus. Phasellus interdum elementum nulla, nec mollis justo imperdiet ac. Duis arcu dolor, ultrices eu libero a, luctus sollicitudin diam. Phasellus finibus dictum turpis, nec tincidunt lacus ullamcorper et. Praesent laoreet odio lacus, nec lobortis est ultrices in. Etiam facilisis elementum lorem ut blandit. Nunc faucibus rutrum nulla quis convallis. Fusce molestie odio eu mauris molestie, a tempus lorem volutpat. Sed eu lacus eu velit tincidunt sodales nec et felis. Nullam velit ex, pharetra non lorem in, fringilla tristique dolor. Mauris vel erat nibh.',         'author'   => 'Sammy',         'date'     => '2014-12-18',     ),     array(         'title'    => 'Duis ornare',         'contents' => 'Duis ornare, odio sit amet euismod vulputate, purus dui fringilla neque, quis eleifend purus felis ut odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque bibendum pretium ante, eu aliquet dolor feugiat et. Pellentesque laoreet est lectus, vitae vulputate libero sollicitudin consequat. Vivamus finibus interdum egestas. Nam sagittis vulputate lacus, non condimentum sapien lobortis a. Sed ligula ante, ultrices ut ullamcorper nec, facilisis ac mi. Nam in vehicula justo. In hac habitasse platea dictumst. Duis accumsan pellentesque turpis, nec eleifend ex suscipit commodo.',         'author'   => 'Sammy',         'date'     => '2014-11-08',     ), ); 

Như vậy, những bài viết này được dùng lại ở mọi nơi trong ứng dụng của ta , và bạn thậm chí có thể tự mình bổ sung thêm. Đối với các trang web trong thế giới thực, có lẽ sẽ tốt hơn nếu sử dụng database .

định tuyến

Về cơ bản, định tuyến ánh xạ một URL như http://www.example.com/ tới / và thực thi chức năng được liên kết với nó. Để thêm một tuyến cơ bản, hãy thêm phần sau vào Section A của /var/www/html/index.php :

sudo nano /var/www/html/index.php 

Nội dung:

$app->get('/', function (Silex\Application $app)  { // Match the root route (/) and supply the application as argument     $output = '';     foreach ($app['articles'] as $article) { // Create a basic list of article titles         $output .= $article['title'];         $output .= '<br />';     }      return $output; // Return it to so it gets displayed by the browser }); 

Bây giờ, khi bạn truy cập http:// your_server_ip , nó sẽ hiển thị một danh sách các tiêu đề bài viết:

Chế độ xem trình duyệt của trang được tạo ở trên, hiển thị hai tiêu đề bài viết

Mẫu

Mặc dù trang web của ta hiện đã hiển thị kết quả chính xác, nhưng nó trông không đẹp cho lắm. Để khắc phục điều này, ta sẽ sử dụng Twig.

Đầu tiên, Silex yêu cầu ta đăng ký Twig làm nhà cung cấp dịch vụ , về cơ bản đây là một cách để sử dụng lại các phần nhất định của một ứng dụng trong một ứng dụng khác. Để đăng ký Twig, hãy thêm cái này vào section A :

sudo nano /var/www/html/index.php 

Nội dung:

$app->register(new Silex\Provider\TwigServiceProvider(), array(     'twig.path' => __DIR__.'/../templates', // The path to the templates, which is in our case points to /var/www/templates )); 

Bây giờ ta có thể sử dụng công cụ mẫu Twig. Để thực hiện việc này, hãy chỉnh sửa hàm $app->get('/', function (Silex\Application $app) { }); khối, xác định tuyến đường của / , để trùng với những gì được hiển thị ở đây. Các dòng mới được hiển thị bằng màu đỏ :

$app->get('/', function (Silex\Application $app)  { // Match the root route (/) and supply the application as argument     return $app['twig']->render( // Render the page index.html.twig         'index.html.twig',         array(             'articles' => $app['articles'], // Supply arguments to be used in the template         )     ); }); 

Lưu các thay đổi và đóng file.

Bây giờ hãy tạo mẫu index.html.twig . Tạo folder , sau đó tạo và mở file base.html.twig :

sudo mkdir /var/www/templates sudo nano /var/www/templates/base.html.twig 

Tệp này sẽ là mẫu cơ sở của ta , nghĩa là tất cả các mẫu khác sẽ kế thừa từ nó, vì vậy ta không phải thêm những điều cơ bản trong mọi mẫu. Trong file này, hãy thêm các nội dung sau:

<!doctype html> <html> <head>     <title>{% block title %}Blog{% endblock %}</title> </head> <body> {% block body %}  {% endblock body %} </body> </html> 

Tệp này chứa hai khối . Các khối có thể được overrides trong các mẫu con để cung cấp nội dung. Khối được gọi là title sẽ được sử dụng để cung cấp tiêu đề cho một trang bài viết. Phần body khối sẽ được sử dụng để hiển thị tất cả nội dung.

Lưu các thay đổi .

Bây giờ ta sẽ tạo và chỉnh sửa file /var/www/templates/index.html.twig :

sudo nano /var/www/templates/index.html.twig 

Thêm các nội dung sau:

{% extends 'base.html.twig' %} {% block body %}     <h1>         Blog index     </h1>      {% for article in articles %}         <article>             <h1>{{ article.title }}</h1>             <p>{{ article.contents }}</p>             <p><small>On {{ article.date }} by {{ article.author }}</small></p>         </article>     {% endfor %} {% endblock %} 

Đầu tiên, ta chỉ định rằng ta muốn mở rộng mẫu base.html.twig . Sau đó, ta có thể bắt đầu overrides các khối được xác định trong mẫu mẹ. Trong mẫu này, ta chỉ overrides lên các khối body , nơi mà ta tạo ra một vòng lặp đó sẽ hiển thị tất cả các bài viết.

Bây giờ hãy truy cập http:// your_server_ip ; nó sẽ hiển thị một index của tất cả các bài đăng của bạn:

Chế độ xem trình duyệt của trang index  mới, liệt kê tất cả các bài đăng

Bộ điều khiển khác cho một bài đăng

Tiếp theo, ta sẽ thêm một bộ điều khiển khác hiển thị một bài đăng. Các bài viết sẽ được trùng với index mảng của chúng. Mở lại /var/www/html/index.php :

sudo nano /var/www/html/index.php 

Thêm phần này vào Section A , phần này sẽ cho phép ta hiển thị các trang cho các bài báo riêng lẻ:

$app->get('/{id}', function (Silex\Application $app, $id)  { // Add a parameter for an ID in the route, and it will be supplied as argument in the function     if (!array_key_exists($id, $app['articles'])) {         $app->abort(404, 'The article could not be found');     }     $article = $app['articles'][$id];     return $app['twig']->render(         'single.html.twig',         array(             'article' => $article,         )     ); })     ->assert('id', '\d+') // specify that the ID should be an integer     ->bind('single'); // name the route so it can be referred to later in the section 'Generating routes' 

Lưu các thay đổi . Sau đó, tạo và chỉnh sửa file /var/www/templates/single.html.twig :

sudo nano /var/www/templates/single.html.twig 

Thêm các nội dung sau:

{% extends 'base.html.twig' %} {% block title %}{{ article.title }}{% endblock %} {% block body %}     <h1>         {{ article.title }}     </h1>     <p>{{ article.contents }}</p>     <p><small>On {{ article.date }} by {{ article.author }}</small></p> {% endblock %} 

Trong mẫu này, ta cũng tận dụng khối title để hiển thị tiêu đề bài viết. Khối body trông gần giống với khối body trước đây, vì vậy nó sẽ khá dễ hiểu.

Nếu bây giờ bạn truy cập http:// your_server_ip /0 hoặc http:// your_server_ip /1 , nó sẽ hiển thị một bài viết:

Chế độ xem trình duyệt của một bài báo

Tuy nhiên, nếu bạn truy cập một ID không tồn tại, chẳng hạn như http:// your_server_ip /2 trong ví dụ này, nó sẽ hiển thị một trang lỗi:

Chế độ xem trình duyệt của lỗi bài viết không tồn tại, HttpException

Tạo các tuyến đường

Tiếp theo, ta sẽ thêm các liên kết từ trang chủ đến chế độ xem một bài viết, và quay trở lại từ các bài viết về trang chủ. Silex có khả năng tạo các tuyến đường bằng cách sử dụng một thành phần Symfony. Nó được cung cấp như một nhà cung cấp dịch vụ , vì vậy trước tiên bạn nên thêm nó vào Section A Mở /var/www/html/index.php :

sudo nano /var/www/html/index.php 

Thêm phần sau vào Section A :

$app->register(new Silex\Provider\UrlGeneratorServiceProvider()); 

Điều này sẽ cho phép ta sử dụng dịch vụ trình tạo URL. Khi ta tạo bộ điều khiển chế độ xem đơn, ta đã thêm một tuyến đường được đặt tên. Nó đã được thực hiện bằng cách sử dụng dòng sau:

->bind('single'); // name the route so it can be referred to later in the section 'Generating routes' 

Bây giờ, ta cũng cần phải liên kết một tuyến đường đến trang chủ. Để làm điều đó, hãy thêm tuyến ->bind('index') vào cuối khối này, ngay trước dấu chấm phẩy cuối cùng. Các thay đổi được đánh dấu màu đỏ :

$app->get('/', function (Silex\Application $app)  { // Match the root route (/) and supply the application as argument     return $app['twig']->render(         'index.html.twig',         array(             'articles' => $app['articles'],         )     ); })->bind('index'); 

Tiếp theo, ta sẽ thực sự cần tạo các URL. Mở /var/www/templates/index.html.twig :

sudo nano /var/www/templates/index.html.twig 

Sau đó, thay đổi dòng <h1> , như được hiển thị bên dưới:

{% extends 'base.html.twig' %} {% block body %}     <h1>         Blog index     </h1>      {% for article in articles %}         <article>             <h1><a href="{{ app.url_generator.generate('single', { id: loop.index0 }) }}">{{ article.title }}</a></h1>             <p>{{ article.contents }}</p>             <p><small>On {{ article.date }} by {{ article.author }}</small></p>         </article>     {% endfor %} {% endblock %} 

Điều này tạo ra một liên kết từ tiêu đề của bài viết đến trang bài viết riêng lẻ. app.url_generator đề cập đến dịch vụ mà ta đã đăng ký. Các generate một hàm lấy hai tham số: tên tuyến đường, single trong trường hợp này, và các thông số cho tuyến đường này, mà chỉ là ID trong trường hợp này. loop.index0 đề cập đến một index được lập index 0 trong vòng lặp. Vì vậy, khi mục đầu tiên được lặp lại, nó là một 0 ; khi mục thứ hai được lặp lại, nó là 1 , v.v.

Điều tương tự có thể được thực hiện để tham chiếu trở lại trang index trong mẫu trang đơn:

sudo nano /var/www/templates/single.html.twig 

Thêm dòng <p> để tạo liên kết:

{% extends 'base.html.twig' %} {% block title %}{{ article.title }}{% endblock %} {% block body %}     <h1>         {{ article.title }}     </h1>     <p>{{ article.contents }}</p>     <p><small>On {{ article.date }} by {{ article.author }}</small></p>      <p><a href="{{ app.url_generator.generate('index') }}">Back to homepage</a></p> {% endblock %} 

Điều này sẽ khá dễ hiểu.

Đó là nó! Vui lòng truy cập lại trang web tại http:// your_server_ip / . Bạn có thể nhấp vào tiêu đề bài viết để truy cập trang của bài viết đó, sau đó sử dụng liên kết ở cuối bài viết để quay lại trang chủ.

Hoàn thành file index.php

Để bạn tham khảo, đây là giao diện của file /var/www/html/index.php cuối cùng.

<?php require_once __DIR__.'/../vendor/autoload.php'; // Add the autoloading mechanism of Composer  $app = new Silex\Application(); // Create the Silex application, in which all configuration is going to go    // Section A // We will later add the configuration, etc. here  $app['debug'] = true; $app['articles'] = array(     array(         'title'    => 'Lorem ipsum dolor sit amet',         'contents' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis vestibulum ultricies. Sed sit amet sagittis nisl. Nulla leo metus, efficitur non risus ut, tempus convallis sem. Mauris pharetra sagittis ligula pharetra accumsan. Cras auctor porta enim, a eleifend enim volutpat vel. Nam volutpat maximus luctus. Phasellus interdum elementum nulla, nec mollis justo imperdiet ac. Duis arcu dolor, ultrices eu libero a, luctus sollicitudin diam. Phasellus finibus dictum turpis, nec tincidunt lacus ullamcorper et. Praesent laoreet odio lacus, nec lobortis est ultrices in. Etiam facilisis elementum lorem ut blandit. Nunc faucibus rutrum nulla quis convallis. Fusce molestie odio eu mauris molestie, a tempus lorem volutpat. Sed eu lacus eu velit tincidunt sodales nec et felis. Nullam velit ex, pharetra non lorem in, fringilla tristique dolor. Mauris vel erat nibh.',         'author'   => 'Sammy',         'date'     => '2014-12-18',     ),     array(         'title'    => 'Duis ornare',         'contents' => 'Duis ornare, odio sit amet euismod vulputate, purus dui fringilla neque, quis eleifend purus felis ut odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque bibendum pretium ante, eu aliquet dolor feugiat et. Pellentesque laoreet est lectus, vitae vulputate libero sollicitudin consequat. Vivamus finibus interdum egestas. Nam sagittis vulputate lacus, non condimentum sapien lobortis a. Sed ligula ante, ultrices ut ullamcorper nec, facilisis ac mi. Nam in vehicula justo. In hac habitasse platea dictumst. Duis accumsan pellentesque turpis, nec eleifend ex suscipit commodo.',         'author'   => 'Sammy',         'date'     => '2014-11-08',     ), );  $app->get('/', function (Silex\Application $app)  { // Match the root route (/) and supply the application as argument     return $app['twig']->render( // Render the page index.html.twig         'index.html.twig',         array(             'articles' => $app['articles'], // Supply arguments to be used in the template         )     ); })->bind('index');  $app->register(new Silex\Provider\TwigServiceProvider(), array(     'twig.path' => __DIR__.'/../templates', // The path to the templates, which is in our case points to /var/www/templates ));  $app->get('/{id}', function (Silex\Application $app, $id)  { // Add a parameter for an ID in the route, and it will be supplied as argument in the function     if (!array_key_exists($id, $app['articles'])) {         $app->abort(404, 'The article could not be found');     }     $article = $app['articles'][$id];     return $app['twig']->render(         'single.html.twig',         array(             'article' => $article,         )     ); })     ->assert('id', '\d+') // specify that the ID should be an integer     ->bind('single'); // name the route so it can be referred to later in the section 'Generating routes'  $app->register(new Silex\Provider\UrlGeneratorServiceProvider());     // This should be the last line $app->run(); // Start the application, i.e. handle the request ?> 

Kết luận

Bạn đã tạo một ứng dụng blog đơn giản bằng Silex. Nó có thể được mở rộng hơn nữa, bắt đầu bằng việc kết hợp nó với một database . Tuy nhiên, điều đó nằm ngoài phạm vi của hướng dẫn này. Tài liệu chính thức có thể rất hữu ích và chắc chắn phải đọc nếu bạn muốn tiếp tục sử dụng Silex.

Nếu Silex quá nhỏ đối với bạn, bạn chắc chắn nên cân nhắc sử dụng khung công tác Symfony, có hướng dẫn tại đây .


Tags:

Các tin liên quan

Cách triển khai ứng dụng DocPad trên Ubuntu 14.04
2015-01-14
Cách tạo một Playbook Ansible để tự động cài đặt Drupal trên Ubuntu 14.04
2014-12-23
Cách cài đặt Thư viện ảnh Piwigo trên Ubuntu 14.04
2014-12-18
Cách cài đặt Hệ thống thông tin sinh viên SchoolTool trên Ubuntu 14.04
2014-12-18
Cách thiết lập ứng dụng Node.js để sản xuất trên Ubuntu 14.04
2014-12-03
Cách cài đặt và cấu hình PowerDNS với MariaDB Backend trên Ubuntu 14.04
2014-12-02
Cách cài đặt và cấu hình Magento trên Ubuntu 14.04
2014-12-02
Cách cài đặt MEAN.JS Stack trên server Ubuntu 14.04
2014-11-26
Cách tăng tốc trang web Drupal 7 của bạn với Varnish 4 trên Ubuntu 14.04 và Debian 7
2014-11-17
Cách nâng cấp Ubuntu 12.04 LTS lên Ubuntu 14.04 LTS
2014-11-17