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 tập
Thực hiện code theo mô hình MVC để bắt cácrequest GET
được gởi thông qua các URL
sau:
/hoctap/danhsachnhanvien
: hiển thị view hiển thị danh sách các nhân viên có trong hệ thống.
id | first_name | last_name | gender | ip_address | |
1 | Kimberly | Eardley | keardley0@yale.edu | Female | 78.107.99.105 |
2 | Harriette | Fiddler | hfiddler1@wix.com | Female | 91.61.112.43 |
3 | Madelaine | Windous | mwindous2@webmd.com | Female | 79.56.244.108 |
4 | Mitch | Bainton | mbainton3@networksolutions.com | Male | 185.75.121.226 |
5 | Kettie | Antos | kantos4@ovh.net | Female | 62.52.219.131 |
- Tạo view bố cục (layout) master.
- Phân tách các thành phần
navbar
,sidebar
. Sau đóinclude
vào bố cục (layout) master. - View con
danhsachnhanvien.blade.php
, phải được kế thừa từ bố cục (layout) master
Cách thực hiện
Mô hình hoạt động của /hoctap/danhsachnhanvien
:
Step 1: tạo các routes
- Hiệu chỉnh file
routes/web.php
// route hiển thị màn hình Danh sách nhân viên Route::get('/hoctap/danhsachnhanvien', 'ExampleController@danhsachnhanvien')->name('example.danhsachnhanvien');
- Tạo mới route
/hoctap/danhsachnhanvien
để điều hướng đến thực thi actiondanhsachnhanvien
trongExampleController
- Theo quy ước, và để thuận tiện quản lý các route. Chúng ta sẽ đặt tên với mỗi route.
- Kiểm tra các route bằng câu lệnh:
php artisan route:list
Step 2: viết code cho action danhsachnhanvien()
:
- Action
danhsachnhanvien()
sẽ tạo sẵn dữ liệu mẫu dựa trên JSON. - Chuyển chuỗi JSON thành object, sử dụng hàm
json_decode()
của PHP. - Truyền dữ liệu mẫu từ
action
sang viewdanhsachnhanvien.blade.php
app/Http/Controllers/ExampleController.php
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Http\Controllers\Controller; class ExampleController extends Controller { ... public function danhsachnhanvien() { // Dữ liệu mẫu - 50 nhân viên ngẫu nhiên $dulieumauJSON = <<<EOT [{ "id": 1, "first_name": "Kimberly", "last_name": "Eardley", "email": "keardley0@yale.edu", "gender": "Female", "ip_address": "78.107.99.105" }, { "id": 2, "first_name": "Harriette", "last_name": "Fiddler", "email": "hfiddler1@wix.com", "gender": "Female", "ip_address": "91.61.112.43" }, { "id": 3, "first_name": "Madelaine", "last_name": "Windous", "email": "mwindous2@webmd.com", "gender": "Female", "ip_address": "79.56.244.108" }, { "id": 4, "first_name": "Mitch", "last_name": "Bainton", "email": "mbainton3@networksolutions.com", "gender": "Male", "ip_address": "185.75.121.226" }, { "id": 5, "first_name": "Kettie", "last_name": "Antos", "email": "kantos4@ovh.net", "gender": "Female", "ip_address": "62.52.219.131" }] EOT; // Chuyển $dulieumau từ JSON string -> Object $biendulieumau_trong_action = json_decode($dulieumauJSON); // view được gọi hiển thị sẽ nằm trong thư mục `resources/views/hoctap/danhsachnhanvien.blade.php' // với dữ liệu được truyền trừ ACTION -> VIEW // được đặt tên là 'biendulieumau_trong_view', có giá trị là $biendulieumau_trong_action return view('hoctap.danhsachnhanvien') ->with('biendulieumau_trong_view', $biendulieumau_trong_action); } }
Step 3: tạo view bố cục (layout) master resources/views/layouts/master.blade.php
- Tạo folder
resources/views/layouts
- Tạo file
resources/views/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"> <title>Sunshine | @yield('title')</title> </head> <body> <!-- Navbar --> @include('layouts.partials.navbar') <!-- End Navbar --> <!-- Main content --> <div class="container-fluid"> <div class="row"> <!-- Sidebar --> @include('layouts.partials.sidebar') <!-- End sidebar --> <!-- Content --> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4"> @yield('content') </main> <!-- End content --> </div> </div> <!-- End main content --> </body> </html>
Step 4: tạo các sub view navbar
, sidebar
- Tạo folder
resources/views/layouts/partials
Navbar
- Tạo file
resources/views/layouts/partials/navbar.blade.php
<div style="background-color: #D5E8D4;"> <p>Hi, đây là navbar!</p> </div>
Sidebar
- Tạo file
resources/views/layouts/partials/sidebar.blade.php
<div style="background-color: #E1D5E7;"> <p>Hi, đây là sidebar!</p> </div>
Step 5: tạo view resources/views/hoctap/danhsachnhanvien.blade.php
- Để dễ dàng quản lý các view, ta sẽ tạo 1 thư mục tương ứng với tên
Controller
, mỗiaction
sẽ tương ứng với tên view. - Tạo folder
resources/views/hoctap
- Tạo file
resources/views/hoctap/danhsachnhanvien.blade.php
@extends('layouts.master') @section('title') Danh sách nhân viên @endsection @section('content') <h1>Danh sách nhân viên có trong hệ thống</h1> <table border="1" cellspacing="0"> <thead> <th>id</th> <th>first_name</th> <th>last_name</th> <th>email</th> <th>gender</th> <th>ip_address</th> </thead> <tbody> <!-- Duyệt vòng lặp, in ra danh sách nhân viên - start--> @foreach($biendulieumau_trong_view as $nhanvien) <tr> <td>{{ $nhanvien->id }}</td> <td>{{ $nhanvien->first_name }}</td> <td>{{ $nhanvien->last_name }}</td> <td>{{ $nhanvien->email }}</td> <td>{{ $nhanvien->gender }}</td> <td>{{ $nhanvien->ip_address }}</td> </tr> @endforeach <!-- Duyệt vòng lặp, in ra danh sách nhân viên - end--> </tbody> </table> @endsection
Kiểm tra action danhsachnhanvien
- Chạy câu lệnh
php artisan serve
để khởi động server - Truy cập địa chỉ http://127.0.0.1:8000/hoctap/danhsachnhanvien để kiểm tra kết quả.
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é!