- Trong loạt bài này, chúng ta sử dụng mgtraining.t làm địa chỉ trang web, bạn có thể thay bằng địa chỉ khác nếu thích.
- “Training” được coi như solution hoặc packed.
- “Foot” được coi như module hoặc project.
1. Cài đặt apache, mysql, php:
sudo apt-get install lamp-server^
2. Download PHP MyAdmin tại http://goo.gl/5Du8H (không cần thiết lắm), copy và paste vào “/var/www”.
3. Download Magento tại http://goo.gl/io3yT hoặc checkout từ svn tại http://goo.gl/Rppd1 .
4. Giải nén (hoặc export từ svn) → đặt lại tên thư mục là mgresearch, copy vào “/var/www”
5. Mở tập tin “/etc/hosts”, thêm vào “127.0.0.1 mgresearch.t”
6. Tạo tập tin “/etc/apache2/sites-available/mgresearch.t” với nội dung
<VirtualHost *:80>
ServerName mgresearch.t
DocumentRoot /var/www/mgresearch
ErrorLog /var/www/logs/mgresearch-error.log
CustomLog /var/www/logs/mgresearch-access.log combined
<Directory "/var/www/mgresearch">
AllowOverride All
Allow from All
</Directory>
</VirtualHost>
7. Chạy các lệnh sau:
sudo a2ensite mgresearch.t
sudo /etc/init.d/apache2 reload
8. Download sample data tại http://goo.gl/io3yT Import database (nhớ thiết lập max allowed packed lớn tý nhé) và copy, paste tương ứng thư mục media.
mysql --max_allowed_packet=512M -u root -p
create database mgresearch;
use mgresearch;
source /path/to/sql_file.sql;
exit;
9. Mở trình duyệt với địa chỉ “http://mgtraining.t”, cài từng bước theo hướng dẫn của trang cài đặt.
10. Nếu có lỗi, kiểm tra lỗi tại “/var/www/mgresearch/var/report”, tìm hướng khắc phục, xóa “/var/www/mgresearch/var/*” và “/var/www/mgresearch/app/etc/local.xml” sau đó cài đặt lại.
- Tích hợp các tập tin css, image và javascript.
- Tạo static html block dùng php.
- Thiết lập theme của chúng ta làm theme mặc định
- Tích hợp css, image và javascript
- Đem nội dung từ tập tin html vào Magento
- Tạo static html block dùng php
- Tạo hai thư mục sau:
- skin/frontend/training/foot
- app/design/frontend/training/foot/layout
- Vào back-end → System → Configuration → Design.
- Click “Package” và “Themes”.
- Thay đổi giá trị ở “Current Package Name” thành “training”, và “Default” thành “foot”.
- Click “Save config”.
Ghi chú:
- Khi lập trình, hãy disable tất cả cache tại System → Cache Management
1.2.2 Tích hợp css, image và javascript
- Sao chép tất cả css, image, javascript, font, v.v... vào thư mục “skin/frontend/training/foot”.
- Sao chép “page.xml” từ “app/design/frontend/base/default/layout” qua “app/design/frontend/training/foot/layout”.
- Mở tập tin “app/design/frontend/training/foot/layout/page.xml”, tìm [element = “block”, attribute “type” = “page/html_head”], thêm vào đường dẫn css và js path với cú pháp:
- CSS
<action method="addCss"><stylesheet>your_css_file</stylesheet></action>
Apply CSS cho IE (lt - less than, gt – greater than, lte – less than or equal, gte – greater than or equal)
<action method="addItem">
<type>skin_css</type>
<name>css/styles-ie.css</name>
<params/>
<if>lt IE 8</if>
</action>
- JS
<action method="addItem"><type>skin_js</type><name>your_js_file</name></action>
- Chúng ta sẽ dùng đường dẫn tương đối từ thư mục “skin/frontend/training/foot”. Ví dụ: “js/util.js”, “css/screen.css”, v.v...
Tạo thư mục sau:
- app/design/frontend/training/foot/template/page
- Sao chép “2columns-left.phtml” từ “app/design/frontend/base/default/template/page” qua “app/design/frontend/training/foot/template/page”. (Bởi vì chúng ta dùng giao diện 2 cột với left bar).
- Chỉnh sửa tập tin “2columns-left.phtml”, hãy làm cho nó giống tập tin html.
- $this->getSkinUrl() sẽ trả về đường dẫn đến theme đang được dùng. Chúng ta sẽ sử dụng nó khi lấy các đường dẫn tĩnh về hình ảnh hay flash.
- Refresh trang chủ, mọi thứ sẽ hiển thị giống giao diện html.
- Nếu tập tin “2columns-left.phtml” chẳng được dùng tới, thì nhớ chọn “2 columns with left bar” ở CMS → Pages → Homepage → Design → Layout.
Tạo thư mục sau:
- app/design/frontend/training/foot/template/page/html
- Chia nhỏ file “app/design/frontend/base/default/template/page/2columns-left.phtml” thành nhiều block và đặt trong thư mục html.
- Với mỗi block, đặt 1 dòng vào “app/design/frontend/training/foot/layout/page.xml”, với cú pháp:
<block type="page/html" name="your_block_name" as="your_block_name" template="page/html/your_block_name .phtml" />
- Chỉnh sửa “app/design/frontend/training/foot/template/page/2columns-left.phtml”, ứng với mỗi block ta gọi
<?php echo $this->getChildHtml('your_block_name') ?>
- Chúng ta có thể thay đổi đường dẫn các file trên.
Blogger Comment
Facebook Comment