PHP Laravel cơ bản đến nâng cao – Buổi 2
Mình xin tiếp tục về PHP Framework Laravel này
1/ Cài đặt theme cho PHP Laravel cơ bản:
Cũng đơn giản các bạn à, ví dụ mình có 1 template sẵn, mình sẽ làm:
- First, mình sẽ tạo 1 folder template (tên tự chọn) và copy toàn bộ file .html vào folder đó
- Đổi toàn bộ .html thành .blade.php
- Sau đó copy folder vừa tạo vào resource/views của Laravel
- Còn lại toàn bộ css, js, images của template mình chọn vào thư mục public của Laravel
Rất đơn giản fải ko nào? Nhưng chưa xong đâu. Bây giờ chúng ta bắt đầu sửa đường dẫn tới css/js/img
2/ Sửa đường dẫn template:
Vd file templatePhat/index.blade.php của mình có phần include css/js như vậy:
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Sandaru's Tools Page</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="vendors/easypiechart/jquery.easy-pie-chart.css" rel="stylesheet" media="screen">
<link href="assets/styles.css" rel="stylesheet" media="screen">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
Làm thế nào để sửa đường dẫn? Bạn hãy yên tâm, Laravel đã cho ta một hàm như sau:
{{ URL::asset("đường dẫn trong public") }}
// ví dụ
{{ URL::asset("css/style.css") }}
Chúng ta chỉ cần copy vào và thay đổi thôi :D, khi hoàn thành thì file của mình sẽ như sau:
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Sandaru's Tools Page</title>
<!-- Bootstrap -->
<link href="{{ URL::asset('css/bootstrap.min.css') }}" rel="stylesheet" media="screen">
<link href="{{ URL::asset('css/bootstrap-responsive.min.css') }}" rel="stylesheet" media="screen">
<link href="{{ URL::asset('vendors/easypiechart/jquery.easy-pie-chart.css') }}" rel="stylesheet" media="screen">
<link href="{{ URL::asset('css/styles.css') }}" rel="stylesheet" media="screen">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="{{ URL::asset('vendors/modernizr-2.6.2-respond-1.1.0.min.js') }}"></script>
</head>
*Lưu ý ở trên mình gom toàn bộ file .css vào thư mục css rồi nha 😀
Rất đơn giản fải ko các bạn 😀 Các bạn có thể chạy thử để test.
3/ Mẫu template dùng chung.
Ví dụ template bạn đã sửa hết, nhưng lỡ mình cần thêm 1 cái gì đó mình lại fải làm từ từng file, khá mệt fải ko?
Laravel cũng cho phép các bạn tạo mẫu và mấy cái khác chỉ cần import vào thôi 😀
Rất đơn giản các bạn, chúng ta sẽ thực hiện như sau:
- Trong thư mục template riêng của bạn, tạo folder template
- Trong folder mới tạo, tạo 1 file .blade.php ví dụ master.blade.php
- Sau đó copy toàn bộ từ index.blade.php qua file vừa tạo và save lại
Chúng ta bắt đầu thôi 😀
Mọi website đều giống nhau ở đầu, đuôi, các bạn hãy xác định phần ruột của template nhé
Sau khi đã xác định xong, các bạn hãy vào xóa phần ruột dớ ở file master.blade.php và chèn lệnh
@yield('content')
Lệnh này sẽ đánh dấu phần ruột và chúng ta chỉ cần viết cái ruột thôi 😀 khá tiện lợi fải ko.
(content có thể thay đổi tên nhé, mình đặt content)
Sau đó về lại file index.blade.php, các bạn hãy xóa đi phần đầu, đuôi và để lại ruột nhé.
Chèn tiếp 2 lệnh này ờ đầu file
@extends('TenThuMucTemplate.template.master')
@section('content')
// vd cua minh
@extends('templatePhat.template.master')
@section('content')
@extends(‘tên_thư_mục_template_của_bạn.template.master’);
master có thể đổi nếu bạn ko đặt tên file giống mình
Và ở cuối file index, chúng ta đặt thêm 1 lệnh cuối cùng nữa
@endsection
Khi này các bạn có thể chạy và tận hưởng thành quả. PHP Laravel cơ bản nhỉ 😀
Buổi 2 là tới đây nhé các bạn 😀 Ở buổi 3 chúng ta sẽ qua với cơ sở dữ liệu nha.
Cám ơn các bạn đã quan tâm theo dõi 😀
PHP Laravel – buổi 1: http://sethphat.net/sp-43/php-laravel-buoi-1
