Bai 1 Fontend Phan 2

GV:Ngô Lê Quân 1
Thực hành Laravel

Bài 1. Cắt giao diện từ 1 template vào website Laravel
Giới thiệu
Bước 1: Download Eshoppe Bootstrap Theme

GV:Ngô Lê Quân 2
Để download Template bạn vào địa chỉ Link download tải về, sau giải nén,
bạn sẽ có đầy đủ các thư mục như css, js, images như sau:
Bước 2: Tạo cấu trúc thư mục file như sau

Để xây dựng layout như phần giới thiệu, mình Tạo các file sau theo đường
dẫn /resources/views/layouts
 layout.blade.php Đây là layout chính (các trang home, product,

news, contact đều đc kế thừa từ layout này
 home.blade.php hiển thị nội dung, sản phẩm trang chủ
 product.blade.php hiển thị danh sách các sản phẩm
 news.blade.php hiển thị tin tức của trang
 contact.blade.php trang liên hệ
 Lưu ý: tất cả các file bắt buộc phải có đuôi mở rộng là .blade.php
 Master Layout (master.blade.php)

 Mở file index.html trong folder mà bạn đã download về ở step 1: copy
mã html và paste vào file master.blade.php . Đây là layout chính, tất cả
các page của app sẽ đc kế thừa từ layout này.
GV:Ngô Lê Quân 3
 Tiếp theo các bạn cũng có thể tách các phần trên layout ra thành từng
phần khác nhau như #top, #slide, #sidebar, #footer ra các file tương
ứng để cho dễ quản lý, sau đó có thể include vào layout chính của
chúng ta, để làm được điều này Laravel cung cấp cho chúng ta một
tag là @include
 Nội dung file: master.blade.php sẽ như sau
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-

scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title> @yield('title')</title>
<link href="{{ asset('layouts/css/bootstrap.min.css') }}"

rel="stylesheet">
<link href="{{ asset('layouts/css/font-awesome.min.css') }}"

rel="stylesheet">
<link href="{{ asset('layouts/css/prettyPhoto.css') }}"

rel="stylesheet">
<link href="{{ asset('layouts/css/price-range.css') }}"

rel="stylesheet">
<link href="{{ asset('layouts/css/animate.css') }}"

rel="stylesheet">
<link href="{{ asset('layouts/css/main.css') }}"

rel="stylesheet">
<link href="{{ asset('layouts/css/responsive.css') }}"

rel="stylesheet">
<link rel="shortcut icon" href="{{ asset('layouts/images')

}}/ico/favicon.ico">
</head>
GV:Ngô Lê Quân 4
<body>

@include("elements.top")

@include("elements.slide")
<section>
<div class="container">
<div class="row">
<div class="col-sm-3">
@include("elements.sidebar")
</div>
<div class="col-sm-9 padding-right">
@yield('content')
</div>
</div>
</div>
</section>
@include("layouts.elements.footer")

<script src="{{ asset('layouts/js/jquery.js') }}"></script>
<script src="{{ asset('layouts/js/bootstrap.min.js')

}}"></script>
<script src="{{ asset('layouts/js/jquery.scrollUp.min.js')

}}"></script>
<script src="{{ asset('layouts/js/price-range.js') }}"></script>
<script src="{{ asset('layouts/js/jquery.prettyPhoto.js')

}}"></script>
GV:Ngô Lê Quân 5
<script src="{{ asset('layouts/js/main.js') }}"></script>
</body>
</html>
 asset() : bạn dùng để liên kết đến file css, js,

images @yield('title') được sử dụng để hiển thị giá trị title của
trang. @yield('content') được sử dụng để hiển thị nội dung của trang,
khi vào trang products, news... nội dung sẽ hiển thị tương ứng. Trong
layout này mình có include 1 số file, chia nhỏ ra để dễ dàng chỉnh
sửa. @include("elements.top") : nội dung header @include("elements.slide"):
slide show @include("elements.sidebar"): sidebar, menu bên
trái @include("elements.footer"): thông tin footer
Bước 3: kế thừa MASTER LAYOUT

 home.blade.php
 Trang home, được kế thừa từ trang master.blade.php. Đây là trang

default đc hiển thị khi bạn truy cập vào website:
 Nội dung file home.blade.php
 @extends('layout')
 @section('content')
Đoạn code từ
<div class="features_items">
Đến
</div>
 @endsection
GV:Ngô Lê Quân 6
 product.blade.php
 @extends('layout')
 Đây là trang sản phẩm
 @endsection
 news.blade.php
 @extends('layouts')
 Đây là trang tin tức
 @endsection
Bước 4: Coppy folder css, js, images

 Khi bạn download Eshopper theme, sẽ có các folder css, js, images ta
coppy các thư mục vào theo đường dẫn sau:
Bước 5: Tạo Route

GV:Ngô Lê Quân 7
 Tạo các Route sau theo đường dẫn:
Route::get('/product', function () {
return view('pages.home');
});
Route::get('/product', function () {
return view('pages.product');
});
Route::get('/news', function () {
return view('pages.news');
});
Route::get('/contact', function () {
return view('pages.contact');
});
Bước 6.
Tạo top.blade.php
<header id="header">
Đoạn code trong file index.html
</header>
Tạo footer.blade.php
<footer id="footer">
Đoạn code trong file index.html
</footer>
Tạo trang liên hệ contact.blade.php

@extends('layout')
@section('contact')
<h3>Trang lien he</h3>

<p>Nội dung trang lien he!!!</p>
GV:Ngô Lê Quân 8
</div>
@endsection

Bai 1 Fontend Phan 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bai 1 Fontend Phan 2

Uploaded by

Copyright:

Available Formats

GV:Ngô Lê Quân 1

Thực hành Laravel

Bước 1: Download Eshoppe Bootstrap Theme

Bước 2: Tạo cấu trúc thư mục file như sau

 layout.blade.php Đây là layout chính (các trang home, product,

 Master Layout (master.blade.php)

 Nội dung file: master.blade.php sẽ như sau

<meta name="viewport" content="width=device-width, initial-

<meta name="description" content="">

<meta name="author" content="">

<link href="{{ asset('layouts/css/bootstrap.min.css') }}"

<link href="{{ asset('layouts/css/font-awesome.min.css') }}"

<link href="{{ asset('layouts/css/prettyPhoto.css') }}"

<link href="{{ asset('layouts/css/price-range.css') }}"

<link href="{{ asset('layouts/css/animate.css') }}"

<link href="{{ asset('layouts/css/main.css') }}"

<link href="{{ asset('layouts/css/responsive.css') }}"

<link rel="shortcut icon" href="{{ asset('layouts/images')

<div class="col-sm-9 padding-right">

<script src="{{ asset('layouts/js/jquery.js') }}"></script>

<script src="{{ asset('layouts/js/bootstrap.min.js')

<script src="{{ asset('layouts/js/jquery.scrollUp.min.js')

<script src="{{ asset('layouts/js/price-range.js') }}"></script>

<script src="{{ asset('layouts/js/jquery.prettyPhoto.js')

<script src="{{ asset('layouts/js/main.js') }}"></script>

 asset() : bạn dùng để liên kết đến file css, js,

Bước 3: kế thừa MASTER LAYOUT

 Trang home, được kế thừa từ trang master.blade.php. Đây là trang

 Nội dung file home.blade.php

 Đây là trang sản phẩm

 Đây là trang tin tức

Bước 4: Coppy folder css, js, images

Bước 5: Tạo Route

 Tạo các Route sau theo đường dẫn:

Tạo trang liên hệ contact.blade.php

<h3>Trang lien he</h3>

You might also like