Chương trình học
- Bức tranh Tổng thể về Lập trình WEB
-
Giới thiệu, cài đặt, cấu hình môi trường lập trình
9
- Cài đặt web server XAMPP
- Cài đặt công cụ truy vấn database HeidiSQL
- Cài đặt Composer để quản lý các gói thư viện trong PHP
- Cài đặt trình soạn thảo code Visual Studio Code IDE
- Tạo tên miền ảo trên máy cục bộ (virtual host on localhost) bằng XAMPP
- Cài đặt nền tảng quản lý Source Code sử dụng GIT
- Cài đặt công cụ quản lý Source Code TortoiseGit
- Cài đặt chế độ Debug PHP với Visual Studio Code
- Tạo chứng chỉ SSL trên Localhost
- Tập làm quen với quản lý source code bằng GitHub 3
- Cài đặt framework Laravel 1
- Tìm hiểu mô hình kiến trúc MVC vận hành trong framework Laravel 4
- Sử dụng Template Engine để trình diễn nội dung trong các VIEW 3
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế CSDL
7
- Phân tích các yêu cầu, nghiệp vụ của khách hàng
- Mô hình thiết kế CSDL mẫu Sunshine
- Khởi tạo database sunshine, thiết lập kết nối CSDL trong Laravel
- Tạo cấu trúc table bằng tính năng MIGRATION trong Laravel - Danh mục phẳng
- Tạo cấu trúc table bằng tính năng MIGRATION trong Laravel - Danh mục có liên kết khóa ngoại
- Tạo dữ liệu ban đầu cho CSDL bằng tính năng SEED trong Laravel - Danh mục phẳng
- Tạo dữ liệu ban đầu cho CSDL bằng tính năng SEED trong Laravel - Danh mục có liên kết khóa ngoại
- Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Ánh xạ CSDL và Laravel 3
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế Backend
20
- Thiết kế bố cục (layouts) cho giao diện Backend
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (index)
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (create)
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (edit)
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (delete)
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Index
- Lưu đồ Upload file từ Client lên Server
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Create
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Edit
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Delete
- Xây dựng danh mục Sản phẩm có chức năng upload nhiều Hình ảnh cùng lúc
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Bổ sung menu vào sidebar
- Xây dựng chức năng xuất biểu mẫu và In ấn trực tiếp trên web
- Xây dựng chức năng xuất Excel
- Xây dựng chức năng xuất PDF
- Tạo chức năng Đăng nhập
- Lưu đồ Kiểm tra ràng buộc dữ liệu (Validation)
- Kiểm tra ràng buộc dữ liệu (Validation) phía Client
- Kiểm tra ràng buộc dữ liệu (Validation) phía Server
- Bài tập tổng hợp - Tạo các chức năng Backend cho trang web đọc Truyện Tranh và Tiểu Thuyết Online sử dụng Laravel framework
- AngularJS 7
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế Frontend sử dụng AngularJS
11
- Thiết kế bố cục (layouts) cho giao diện Frontend
- Tích hợp AngularJS vào framework Laravel
- Tạo giao diện trang chủ (index)
- Tạo giao diện trang Giới thiệu (about)
- Tạo giao diện trang Liên hệ (contact)
- Tạo trang danh sách Sản phẩm (product)
- Tạo nút Thêm vào giỏ hàng cho từng sản phẩm (add-to-cart)
- Tạo trang Chi tiết Sản phẩm (product-detail)
- Tạo giỏ hàng (cart sidebar)
- Tạo trang thanh toán (checkout)
- Tạo đơn hàng và gởi mail xác nhận
-
Bonus
9
- Đa ngôn ngữ trong Laravel
- Tạo báo cáo với biểu đồ ChartJS
- Tạo khung chọn Ngày tháng cho dự án
- Tạo các trang thông báo lỗi tương ứng STATUS CODE
- Kiểm tra ứng dụng với tunnel ảo NGROK
- Phân trang trong Laravel
- Bổ sung khung xem Hình ảnh trước khi upload (preview image upload)
- Tạo API trong Laravel và sử dụng AngularJS để hiển thị giao diện
- Cách tự động sinh Ảnh nhiều kích cỡ (Automatic resize image) khi upload file Ảnh
- Danh sách Đồ án xây dựng trang web sử dụng LARAVEL 2
- Tài liệu tham khảo 3
- Thực hiện Đồ án 1
Chuẩn bị thư viện CSS, JS dùng cho việc hiển thị giao diện
Chúng ta sẽ thiết kế giao diệnbackend
dựa trên Bootstrap
(phiên bản mới nhất là 4).
Step 1: tạo cấu trúc thư mục quản lý các package
dành riêng cho việc hiển thị giao diện
Ngoài sử dụng Bootstrap 4
, trong quá trình làm trang web, chúng ta còn sử dụng rất nhiều các thư viện từ bên thứ 3 (3rd party), nên để tiện quản lý/nâng cấp các thư viện sau này. Chúng ta sẽ tổ chức thư mục lưu trữ các thư viện này như sau:
public +---css #chứa các file CSS do mình tự viết +---img #chứa các file ảnh cần thiết cho dự án của mình +---js #chứa các file JS do mình tự viết +---themes #chứa các themes dành cho frontend \---vendor #chứa các thư viện (packages/library) từ các nhà cung cấp +---bootstrap #bootstrap 4 +---jquery #jquery +---popperjs #popperjs
Step 2: download thư viện
Boostrap 4
- Truy cập: https://getbootstrap.com hoặc "Click vào đây" để download phiên bản mới nhất (4.3.1)
- Giải nén, đổi tên thư mục `bootstrap-4.3.1-dist -> bootstrap`
- Chép vào trong thư mục quản lý thư viện các nhà cung cấp giao diện
public/vendor/bootstap
Jquery
- Bootstrap sử dụng cú pháp Jquery để viết. Nên chúng ta sẽ cần thư viện Jquery đi kèm.
- Truy cập: https://jquery.com/ hoặc "Click vào đây" (phiên bản mới nhất 3.4.1)
- Lưu vào trong
public/vendor/jquery/jquery.min.js
PopperJS
- Truy cập: https://unpkg.com/popper.js
- Lưu vào trong
public/vendor/popperjs/popper.min.js
Thiết kế layout dành cho backend
Để thuận tiện, dễ quản lý các thành phần của giao diện web. Chúng ta sẽ tạo bố cục (layout) chủ (master) dành cho giao diện backend
.
- Giao diện thực tế:
- Bố cục (layout)
backend
như sau:
Step 1: tạo cấu trúc thư mục quản lý các view
dành riêng cho backend
- Để thuận tiện cho việc quản lý các file giao diện (view) trong source code. Chúng ta sẽ tổ chức thư mục như sau:
resources \---views +---backend #các view giao diện thuộc backend sẽ được lưu trữ ở đây | | dashboard.blade.php | +---layouts #thư mục chứa view quy định bố cục (layout) | | | master.blade.php #bố cục (layout) chính | | | | | \---partials #các thành phần của bố cục (layout) được tách nhỏ ra | | navbar.blade.php | | sidebar.blade.php
Step 2: tạo các view quy định bố cục (layouts), tách các thành phần dành cho backend
:
- Chúng ta sẽ phân tách layout
backend
thành từng phần như sau:- 1 file cấu trúc
resources/views/backend/layouts/master.blade.php
chính - Phần nội dung
header
sẽ được tách ra thànhresources/views/backend/layouts/partials/navbar.blade.php
- Phần nội dung
footer
sẽ được tách ra thànhresources/views/backend/layouts/partials/footer.blade.php
- Phần nội dung
sidebar
sẽ được tách ra thànhresources/views/backend/layouts/partials/sidebar.blade.php
- 1 file cấu trúc
View layout resources/views/backend/layouts/master.blade.php
- Trong bố cục (layout)
master
, chúng ta sẽ tạo cấu trúc chuẩn filehtml
, đục vài lỗplaceholder
để các view con (child view) có thể kế thừa@yield('title')
: dùng để các view con (child view) hiệu chỉnh tiêu đề trang web.@yield('custom-css')
: dùng để các view con (child view) có thể tự viết riêng cácstyle css
@yield('content')
: dùng để các view con (child view) hiển thị giao diện@yield('custom-scripts')
: dùng để các view con (child view) có thể tự viết riêng các scripts (javascript).
- Trong bố cục (layout)
master
, chúng ta sẽ tách và liên kết các thành phần chính của bố cục ra từng phần để tiện quản lý source code@include('backend.layouts.partials.navbar')
: dùng để nhúng thành phầnnavbar
vào bố cục chính.@include('backend.layouts.partials.sidebar')
: dùng để nhúng thành phầnsidebar
vào bố cục chính.
- Code file
resources/views/backend/layouts/master.blade.php
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="{{ asset('vendor/bootstrap/css/bootstrap.min.css') }}"> <!-- Custom CSS --> <link rel="stylesheet" href="{{ asset('css/dashboard.css') }}"> <title>Sunshine | @yield('title')</title> <!-- Các custom style dành riêng cho từng view --> @yield('custom-css') </head> <body> <!-- Navbar --> @include('backend.layouts.partials.navbar') <!-- End Navbar --> <!-- Main content --> <div class="container-fluid"> <div class="row"> <!-- Sidebar --> @include('backend.layouts.partials.sidebar') <!-- End sidebar --> <!-- Content --> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4"> <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> <h1 class="h2">@yield('feature-title')</h1> <small>@yield('feature-description')</small> </div> @yield('content') </main> <!-- End content --> </div> </div> <!-- End main content --> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script> <script src="{{ asset('vendor/popperjs/popper.min.js') }}"></script> <script src="{{ asset('vendor/bootstrap/js/bootstrap.min.js') }}"></script> <!-- Các custom script dành riêng cho từng view --> @yield('custom-scripts') </body> </html>
View partial resources/views/backend/layout/partials/navbar.blade.php
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow"> <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a> <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"> <ul class="navbar-nav px-3"> <li class="nav-item"> <a class="nav-link" href="#">Sign out</a> </li> </ul> </nav>
View partial resources/views/backend/layout/partials/sidebar.blade.php
<nav class="col-md-2 d-none d-md-block bg-light sidebar"> <div class="sidebar-sticky"> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg> Dashboard <span class="sr-only">(current)</span> </a> </li> </ul> </div> </nav>
Mục lục
Các bài học
Bài học trước Bài học tiếp theo
Chương trình học
Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...Chương trình học
- Bức tranh Tổng thể về Lập trình WEB
-
Giới thiệu, cài đặt, cấu hình môi trường lập trình
9
- Cài đặt web server XAMPP
- Cài đặt công cụ truy vấn database HeidiSQL
- Cài đặt Composer để quản lý các gói thư viện trong PHP
- Cài đặt trình soạn thảo code Visual Studio Code IDE
- Tạo tên miền ảo trên máy cục bộ (virtual host on localhost) bằng XAMPP
- Cài đặt nền tảng quản lý Source Code sử dụng GIT
- Cài đặt công cụ quản lý Source Code TortoiseGit
- Cài đặt chế độ Debug PHP với Visual Studio Code
- Tạo chứng chỉ SSL trên Localhost
- Tập làm quen với quản lý source code bằng GitHub 3
- Cài đặt framework Laravel 1
- Tìm hiểu mô hình kiến trúc MVC vận hành trong framework Laravel 4
- Sử dụng Template Engine để trình diễn nội dung trong các VIEW 3
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế CSDL
7
- Phân tích các yêu cầu, nghiệp vụ của khách hàng
- Mô hình thiết kế CSDL mẫu Sunshine
- Khởi tạo database sunshine, thiết lập kết nối CSDL trong Laravel
- Tạo cấu trúc table bằng tính năng MIGRATION trong Laravel - Danh mục phẳng
- Tạo cấu trúc table bằng tính năng MIGRATION trong Laravel - Danh mục có liên kết khóa ngoại
- Tạo dữ liệu ban đầu cho CSDL bằng tính năng SEED trong Laravel - Danh mục phẳng
- Tạo dữ liệu ban đầu cho CSDL bằng tính năng SEED trong Laravel - Danh mục có liên kết khóa ngoại
- Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Ánh xạ CSDL và Laravel 3
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế Backend
20
- Thiết kế bố cục (layouts) cho giao diện Backend
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (index)
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (create)
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (edit)
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (delete)
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Index
- Lưu đồ Upload file từ Client lên Server
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Create
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Edit
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Delete
- Xây dựng danh mục Sản phẩm có chức năng upload nhiều Hình ảnh cùng lúc
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Bổ sung menu vào sidebar
- Xây dựng chức năng xuất biểu mẫu và In ấn trực tiếp trên web
- Xây dựng chức năng xuất Excel
- Xây dựng chức năng xuất PDF
- Tạo chức năng Đăng nhập
- Lưu đồ Kiểm tra ràng buộc dữ liệu (Validation)
- Kiểm tra ràng buộc dữ liệu (Validation) phía Client
- Kiểm tra ràng buộc dữ liệu (Validation) phía Server
- Bài tập tổng hợp - Tạo các chức năng Backend cho trang web đọc Truyện Tranh và Tiểu Thuyết Online sử dụng Laravel framework
- AngularJS 7
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế Frontend sử dụng AngularJS
11
- Thiết kế bố cục (layouts) cho giao diện Frontend
- Tích hợp AngularJS vào framework Laravel
- Tạo giao diện trang chủ (index)
- Tạo giao diện trang Giới thiệu (about)
- Tạo giao diện trang Liên hệ (contact)
- Tạo trang danh sách Sản phẩm (product)
- Tạo nút Thêm vào giỏ hàng cho từng sản phẩm (add-to-cart)
- Tạo trang Chi tiết Sản phẩm (product-detail)
- Tạo giỏ hàng (cart sidebar)
- Tạo trang thanh toán (checkout)
- Tạo đơn hàng và gởi mail xác nhận
-
Bonus
9
- Đa ngôn ngữ trong Laravel
- Tạo báo cáo với biểu đồ ChartJS
- Tạo khung chọn Ngày tháng cho dự án
- Tạo các trang thông báo lỗi tương ứng STATUS CODE
- Kiểm tra ứng dụng với tunnel ảo NGROK
- Phân trang trong Laravel
- Bổ sung khung xem Hình ảnh trước khi upload (preview image upload)
- Tạo API trong Laravel và sử dụng AngularJS để hiển thị giao diện
- Cách tự động sinh Ảnh nhiều kích cỡ (Automatic resize image) khi upload file Ảnh
- Danh sách Đồ án xây dựng trang web sử dụng LARAVEL 2
- Tài liệu tham khảo 3
- Thực hiện Đồ án 1
Bài học trước Bài học tiếp theo
Menu Tiện ích
Menu Hướng dẫn Học tập
❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜
Thực hiện các bước tuần tự theo nội dung Bài học nhé!