Tag: web

Tìm hiểu về Serverless dễ hiểu bằng trà sữa

1 kvYDcS71SZXcyP yeqQMww - quochung.cyou PTIT

Serverless là gì, IaaS, CaaS, FaaS là gì, ..

Trước tiên để tìm hiểu về cấu trúc Serverless, trước hết ta hãy xem thử các cấu trúc truyền thống thường được sử dụng, và một số từ khoá và định nghĩa của chúng.

Mô tả cấu trúc Monolithic truyền thống

Ví dụ với một cấu trúc như trên, toàn bộ ứng dụng của chúng ta sẽ được chứa chung trong 1 khối lớn, và cùng tương tác vào 1 database. Để dễ hiểu hơn, mình sẽ ví dụ chúng như sau:

Một cửa hàng bán trà sữa bán 4 loại trà sữa:

  • Trà sữa dâu
  • Trà sữa ô long
  • Trà sữa bạc hà
  • Trà sữa socola

Tất cả trà sữa này sẽ được nhân viên pha bằng cùng 1 chiếc máy, cái máy này có thể pha được cả 4 loại trà sữa trên, rất đa năng tiện dụng. Ngoài ra, để có thể pha trà sữa bằng máy, ta cần nhiên liệu pha trà sữa, các nhiên liệu cho 4 loại trà sữa thì khác nhau, và được để chung trong 1 thùng nhiên liệu.

  • Máy pha trà sữa – Code/Server xử lí Logic tính toán, ..
  • Thùng nhiên liệu – Database, cơ sở dữ liệu tổng
  • Nhiên liệu – Các dữ liệu

Vậy ta có thể thấy, với một lượng người dùng chưa lớn, xây dựng cấu trúc đưa toàn bộ các logic vào 1 server như trên có thể khả thi, tuy nhiên, khi người dùng ngày càng tăng lên, việc làm trà sữa nào cùng phải dùng chung 1 cái máy, và việc lấy nhiên liệu nào cũng phải lấy từ 1 thùng nhiên liệu lớn sẽ khiến cho 1 khối chung quá tải, một trong những cách tối ưu cho vấn đề này là chia nhỏ các công việc nhỏ ra.

Tối ưu: Chia nhỏ các vấn đề

Lúc này, ta sẽ chia nhỏ các vấn đề thành 4 luồng như sau, vẫn tại cùng 1 địa điểm, 1 server cửa hàng đó, ta chia cấu trúc thành:

  • Máy pha trà sữa 1, chỉ pha trà sữa dâu. Cùng 1 thùng nhiên liệu chỉ cho trà sữa dâu
  • Máy pha trà sữa 2, chỉ pha trà sữa ô long. Cùng 1 thùng nhiên liệu chỉ cho trà sữa ô long
  • Máy pha trà sữa 3, chỉ pha trà sữa bạc hà. Cùng 1 thùng nhiên liệu chỉ cho trà sữa bạc hà
  • Máy pha trà sữa 4, chỉ pha trà sữa socola. Cùng 1 thùng nhiên liệu chỉ cho trà sữa socola

Lúc này, với các khách order các trà sữa khác nhau, nhân viên có thể đến các máy pha và thùng nhiên liệu khác nhau, chia tách thành các luồng nên sẽ giảm tải hơn một chút. Tuy nhiên, lại có một số vấn đề như sau:

  • Các luồng sẽ không giống nhau. Ví dụ trà sữa dâu thường được gọi nhiều hơn trà sữa socola, nên đúng ra cái máy, hay tài nguyên server (cpu, ram,…) nên được phân bố nhiều hơn cho trà sữa socola
  • Nếu một máy trà sữa bị lỗi, ví dụ hãy tưởng tượng về code, dù lúc này đã chia nhỏ nhiều function ra, nhưng nếu hỏng cái gì thì thường ta phải khởi động lại cả server chung, đồng nghĩa các function khác đang chạy tốt cũng phải khởi động lại.

Lúc này, ta sẽ thử nói về một số từ khoá trong triển khai cấu trúc để xử lí vấn đề trên

image 1 - quochung.cyou PTIT

Lại tưởng tượng về cửa hàng bán trà sữa, hãy coi cả cửa hàng như một cái máy chủ, một cái máy tính để có thể chạy các code (các máy pha trà sữa). Chúng ta có thể mua một mặt bằng để đặt cửa hàng (mua đứt). Tương tự, ta có thể mua các server về nhà chúng ta, về công ty để tự triển khai, tự lắp đặt.

image 8 - quochung.cyou PTIT

Triển khai 1: Tự cài đặt server

Một server thì nhìn chung có cấu trúc tương tự như một máy tính, laptop bình thường. Tuy nhiên được thiết kế để chịu tải tốt hơn, chạy 24/7, chịu đựng các điều kiện như nhiệt độ, thời tiết, bụi, … tốt hơn, và một số đặc tính khác nữa.

image 2 - quochung.cyou PTIT

Việc tự mua một server về triển khai thường được các công ty lớn sử dụng, tuy nhiên lúc này ta sẽ phải lo các vấn đề như nhiệt độ, cần bật máy làm mát, điều hoà, quạt,… để server mát mẻ 24/7. Hay phải lo các vấn đề như điện để tải server, tránh các trường hợp mất điện thì server cũng hỏng, ….

Nó giống với việc bạn mua mặt bằng để làm cửa hàng trà sữa, sau khi mua xong thì không thể mở rộng đất ra nếu muốn mở rộng cửa hàng được, phải tự lo các vấn đề như vệ sinh mặt bằng, điện nước, …. Điều này không phù hợp nếu ta chỉ cần một dịch vụ nhỏ, hoặc muốn mở rộng lớn ra hơn sau này.

Tối ưu: Đưa các dịch vụ lên các nền tảng riêng

Triển khai 2: infrastructure as a service (IaaS) – Cơ sở hạ tầng như một dịch vụ

image 3 - quochung.cyou PTIT

Như tên của nó, cơ sở hạ tầng như một dịch vụ. Tức là ta sẽ thuê luôn một mặt bằng cho cửa hàng trà sữa, một cái máy chủ về để sử dụng. Các đơn vị cho thuê thường là các công ty lớn như nước ngoài có Amazon, Microsoft, Google. Trong nước thì có Viettel Cloud, … Các nhà cho thuê, đơn vị này sẽ bảo đảm vấn đề điện duy trì server ổn định, băng thông mạng cho server tốc độ cao, ….

Ngoài ra nếu server các bạn bị tấn công, ddos, các đơn vị này cũng sẽ có thể chuyển bạn sang một server, cụm network mạng khác để tránh, …

Nhìn chung việc cho thuê hay mua dịch vụ này đã giảm tải bớt rất nhiều sự đau đầu cho bạn. Lúc này bạn như có một cái máy tính ảo có thể truy cập từ xa, và đặt các code của mình lên đây để chạy.

Tối ưu: Các dịch vụ tự co giãn theo nhu cầu, tiết kiệm chi phí

Triển khai 3: Container as a Service (CaaS) – Một khối container như dịch vụ

image 7 - quochung.cyou PTIT

Để giải thích việc này thì khá trừu tượng, nhưng lúc này bạn sẽ được cung cấp dịch vụ như các container. Các container này thì gọn nhẹ hơn, tốn ít tài nguyên, tiền bạc để thuê, và có thể co giãn được (tức là có thể tự tăng ram, cpu khi nhu cầu nâng cao)

Bạn tưởng tượng thì nếu bạn chia nhỏ các phần của ứng dụng của mình đủ nhỏ, để chúng có thể triển khai độc lập trên 1 container nhỏ, lúc này các hệ thống container có thể tạo ra rất nhiều bản container của phần ứng dụng đó của bạn, tự nâng cấu hình khi nhu cầu sử dụng tăng cao, hoặc tự triển khai một container khác chạy thay thế nếu container hiện tại bị sập, …

image 4 - quochung.cyou PTIT

Triển khai 4: Function as a Service (FaaS) – Một hàm, chức năng như một dịch vụ

Với triết lý lập trình hàm (Function do only one thing), khi làm việc với kiến trúc Functions as a service, chỉ nên để function làm một việc duy nhất

Điểm mạnh nhất của FaaS là nó độc lập các function, nếu function chỉ thực thi một nhiệm vụ duy nhất. FaaS sẽ làm rất tốt công việc của nó được giao. Tuy nhiên, nếu gọi các function lồng nhau, rất dễ xảy ra vấn đề về performance.

Tức là lúc này bạn có thể chia các máy bán trà sữa này làm một tác vụ duy nhất như 1 hàm, trong đó có cả thùng nhiên liệu là database nhỏ của riêng loại trà sữa đó thôi. Lúc này các máy bán trà sữa này được đặt tại nhiều điểm khác nhau, (bạn chỉ đang thuê cái máy – một function như một dịch vụ). Do kết nối internet hạ tầng đủ nhanh, chúng vẫn có thể chấp nhận được với cửa hàng trà sữa của bạn. Và nếu 1 máy hỏng thì các máy khác vẫn không làm sao cả.

Các FaaS cũng có thể có các tính năng kế thừa như CaaS, tức là tự tạo một điểm khác nếu quá tải, tự tạo ra nhiều điểm vẫn là cùng 1 máy bán trà sữa và chia nhỏ luồng hơn nữa để xử lý tốt hơn, hay tự khởi động một điểm khác khi chỗ hiện tại bị sập, …

image 5 - quochung.cyou PTIT

Một số từ khoá

Auto-scaling: Các máy chủ nhỏ này sẽ tự động co giãn ssd, ram, cpu, …. để phù hợp với nhu cầu, ví dụ máy pha trà sữa này nhiều khách order thì tự tăng tài nguyên lên, còn nếu ít khách thì tự giảm xuống

Event-driven: Các máy pha trà sữa nếu không ai gọi thì tự tắt đi, và chỉ bật lên (cold-start), sẽ bật lên (đủ nhanh tuỳ theo độ nặng của code bạn) khi có khách gọi (một event – sự kiện)

pay-per-execution: Một số chỗ sẽ thu phí bạn thuê theo số lần gọi dịch vụ chứ không phải thời gian thuê. ví dụ máy bán trà sữa dâu khá ế, 1 tháng có đúng 4 khách gọi 4 thời điểm khác nhau, bạn không cần bật máy cả tháng, mà chỉ tính tiền thuê 4 lần đó thôi

pay-as-use: Một số chỗ thu phí theo thời gian, tuy nhiên nhỏ lẻ hơn. Kiểu theo tiếng, theo ngày, … khi đó nếu bạn chỉ cần dùng 1 thời gian ngắn rồi tắt đi thì sẽ tiết kiệm chi phí hơn nhiều

Tóm lại về serverless

image 6 - quochung.cyou PTIT

Hi vọng qua ví dụ trà sữa trên bạn sẽ có một cái nhìn tổng quan hoặc cơ bản về serverless.

Serverless – Không có server, không có nghĩa là sẽ không có cái server máy chủ nào chạy code cả. Mà cơ bản bạn sẽ không cần sở hữu một cái máy chủ, tự bảo quản và vận hành nó, mà có thể thuê các đơn vị khác đảm bảo dịch vụ và ổn định hơn để thực thi các tác vụ của mình.

Như lúc này cửa hàng trà sữa có thể đưa 4 máy pha trà sữa, 4 đoạn code độc lập này lên 4 điểm khác nhau. Lúc này ví dụ 1 điểm code bị bug, có vấn đề thì các nơi khác vẫn hoạt động bình thường.

Ngoài ra các điểm này có thể tự co giãn – (tham khảo thêm ở phần từ khoá bên trên) để phục vụ tốt hơn nếu có nhu cầu nhiều hơn ở một luồng nào đó.

image 9 - quochung.cyou PTIT

Ưu điểm của serverless

  • Tiết kiệm chi phí, không cần thuê/mua cả mặt bằng – cả 1 server để chứa mấy cái máy pha, mà chỉ cần thuê cái máy pha là được
  • Giảm bớt nỗi lo quản lý mặt bằng – server như điện, tiền mạng, ….

Nhược điểm của serverless hay FaaS

  • Test và debug khó hơn, do nó chỉ bật khi mình cần, hơn nữa bạn không nhìn được rõ chúng đang chạy như thế nào như code trên máy mình, vì lúc này toàn bộ code đang ở một điểm khác.
  • Vấn đề bảo mật, lúc này bạn đang để database và code ở một đơn vị khác cho thuê. Nhìn chung thì chắc chắn việc bảo mật không thể bằng tự mình quản lí được.
  • Không phù hợp cho các tác vụ chạy liên tục 24/7. Do điểm tốt của serverless là tiết kiệm tiền, tự tắt đi khi mà không cần sử dụng. Nhưng nếu bạn cần dùng liên tục thì nên thuê CaaS hoặc IaaS
  • Giảm hiệu năng. Do các máy pha chỉ bật khi ta cần đến, nên sẽ tốn thêm thời gian bật lên. Bạn cần chia nhỏ function nhất có thể để chúng độc lập, và bật đủ nhanh để không ảnh hưởng người dùng

QLDT PTIT Enhancer – Tiện ích xếp TKB, bổ sung chức năng cho QLDT PTIT 2023

QLDT Enhancer

Bạn cũng có thể thử bản beta với nhiều chức năng hơn và nhiều lỗi hơn :v : https://github.com/quochung-cyou/QLDT_Enhancer/tree/beta

Author

Description

  • Script hỗ trợ việc xếp lịch TKB, đồng thời chỉnh lại giao diện QLDT một chút theo ý mình. Script được hoàn thành gấp rút trong nửa ngày vì yêu cầu của bạn bè mình, mình cũng chỉ mới học JavaScript nên nếu có lỗi hay vấn đề hi vọng các bạn có thể liên hệ mình qua [email protected]
  • Sử dụng script theo nhu cầu của bạn, mình không chịu trách nhiệm trước các vấn đề liên quan đến việc sử dụng script này.

Feature

  •  Tool xem xếp lịch TKB theo QLDT
  •  Chọn môn bằng dropdown nhanh chóng, đỡ phải tìm kiếm hay lướt như QLDT cũ
  •  Tự động cập nhật lịch thay đổi
  •  Chỉnh sửa giao diện thêm một chút
  •  Tự động giữ kết nối, tránh bị out session
  •  Danh sách môn đã đăng kí
  •  Tránh đăng kí trùng 1 môn

Prerequisites and Setup

Video hướng dẫn: https://www.youtube.com/watch?v=UYY8gMDWGD8

Technologies Used

  • JavaScript
  • JQuery

Demo image

demo1 - quochung.cyou PTIT
demo2 - quochung.cyou PTIT
demo3 - quochung.cyou PTIT
demo4 - quochung.cyou PTIT

License Information

  • This software is licensed under MIT License.
  • Read More on the license.

Giúp đỡ tôi bằng cách chia sẻ hoặc tặng sao

stars - quochung.cyou PTIT

Thông tin liên hệ

Nếu có bất kỳ nội dung nào liên quan còn thiếu，hãy tạo issues cho nó, tôi sẽ theo dõi và cải thiện。

MIT License

Copyright (c) 2023 QuocHung

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Trigger một form input để giả lập như người dùng gõ bằng JavaScript thuần

Khởi tạo các biến const cho Event

const EVENT_OPTIONS = {bubbles: true, cancelable: false, composed: true};
const EVENTS = {
    BLUR: new Event("blur", EVENT_OPTIONS),
    CHANGE: new Event("change", EVENT_OPTIONS),
    INPUT: new Event("input", EVENT_OPTIONS),
};

Thay đổi giá trị của form input mình cần sửa đổi và cập nhật value cho nó

    findInputBox = document.querySelector(".table-sm > thead > tr:nth-child(2) > td:nth-child(2) > input");
    findInputBox.focus();
    findInputBox.value = name; //name là giá trị cần set
    const tracker = findInputBox._valueTracker;
    tracker && tracker.setValue(name);
    findInputBox.dispatchEvent(EVENTS.INPUT);
    findInputBox.dispatchEvent(EVENTS.BLUR);

[Web-Buổi 3] Tìm hiểu về Responsive

Mục lục

  • Grid
  • FlexBox
  • Media Query
  • Break point
  • Viewport
  • GridView
  • Flexible Media
  • CSS Sass

I. Grid

  • Grid là một hệ thống layout mạnh mẽ, cho phép bạn tạo ra các layout phức tạp và đẹp mắt mà không cần phải sử dụng các thẻ div lồng nhau.
  • Grid được chia thành 2 phần chính là Grid Container và Grid Item.
  • Grid Container là phần bao bọc các Grid Item.
  • Grid Item là các phần tử con của Grid Container.

Example Code in MD:

    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>
Grid

Display Grid:

    .grid-container {
        display: grid;
    }

Grid Template Columns:

    .grid-container {
        display: grid;
        grid-template-columns: 100px 100px 100px;
    }

Grid Template Rows:

    .grid-container {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
    }

Grid Gap:

    .grid-container {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
        grid-gap: 10px;
    }

Grid tự động cân bằng

    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto auto;
        grid-gap: 10px;
    }
Grid

Grid cân bằng theo tỉ lệ

    .grid-container {
        display: grid;
        grid-template-columns: 20% 30% 50%
        grid-gap: 10px;
    }
Grid

Tuỳ chỉnh vùng theo thuộc tính

    .item8 {
    grid-area: 1 / 2 / 5 / 6;
    }
Grid
Grid

II. FlexBox

  • FlexBox là một hệ thống layout mạnh mẽ, cho phép bạn tạo ra các layout phức tạp và đẹp mắt mà không cần phải sử dụng các thẻ div lồng nhau.
  • FlexBox được chia thành 2 phần chính là Flex Container và Flex Item.
  • Flex Container là phần bao bọc các Flex Item.
  • Flex Item là các phần tử con của Flex Container.
FlexBox

Example Code in MD:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
FlexBox

III. Media Query

  • Media Query là một công cụ cho phép bạn thay đổi style của một trang web dựa trên các điều kiện nhất định.
  • Media Query được sử dụng để tạo ra các trang web đáp ứng (responsive web).
  • Media Query được sử dụng để tạo ra các trang web có thể hiển thị đẹp trên các thiết bị khác nhau, với các kích thước màn hình khác nhau.

Example Code in MD:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
Media Query

IV. Break point

  • Breakpoint, là những điểm (chiều rộng màn hình của thiết bị) mà ở đó giao diện được chuyển đổi cho phù hợp với thiết bị hiện tại, ví dụ như màn hình rộng hơn 1024px, thì có background-color màu đỏ, nhỏ hơn 1024px thì background-color màu xanh, khi này ta gọi 1024 là breakpoint.
  • Tùy vào chiều rộng hiển thị của thiết bị mà breakpoint sẽ khác nhau, hiện nay có rất nhiều thiết bị, tương ứng sẽ có nhiều chiều rộng khác nhau, nên sẽ có nhiều breakpoint khác nhau, do đó ta không thể thiết lập beakpoint cho từng loại thiết bị được.

Điểm breakpoint

  • 320 px Màn hình chiều dọc cho smartphone nhỏ (VD iPhone 5)
  • 480 px Màn hình chiều ngang cho smartphone nhỏ
  • 640 px Màn hình chiều ngang cho smartphone vừa
  • 768 px Màn hình chiều dọc cho tablet (VD: iPad)
  • 1024 px Màn hình chiều ngang cho tablet (VD: iPad), hoặc chiều dọc cho tablet lớn (VD iPad Pro)
@media only screen and (min-width: 320px) {
 body{
   background-color: orange;
  }
}
Break point

V. Viewport

  • Viewport là khu vực hiển thị nội dung trên trình duyệt.
  • Viewport thay đổi theo thiết bị, và sẽ nhỏ hơn trên điện thoại di động so với màn hình máy tính.
  • Trước khi có máy tính bảng và điện thoại di động, các trang web được thiết kế chỉ cho màn hình máy tính, và việc thiết kế tĩnh và kích thước cố định là phổ biến.
  • Sau đó, khi chúng ta bắt đầu lướt web bằng máy tính bảng và điện thoại di động, các trang web có kích thước cố định quá lớn để vừa với viewport. Để khắc phục điều này, các trình duyệt trên các thiết bị đó thu nhỏ toàn bộ trang web để vừa với màn hình.
  • Khác biệt giữa có viewport và không có viewport:
  • Một trang web không có thẻ meta viewport sẽ được hiển thị với độ rộng của trang web, không phụ thuộc vào thiết bị.
  • Một trang web với thẻ meta viewport sẽ được hiển thị với độ rộng của thiết bị, và với tỷ lệ khung hình cố định.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width phù hợp với chiều rộng của thiết bị (đừng quên để thẻ meta viewport trong thẻ <head>)
  • initial-scale=1.0 thiết lập tỷ lệ khung hình của trang web
  • user-scalable=no ngăn người dùng phóng to hoặc thu nhỏ trang web
  • minimum-scale=1.0 ngăn người dùng thu nhỏ trang web
  • maximum-scale=1.0 ngăn người dùng phóng to trang web

VI. GridView

!!!

VII. Flexible Media

Flexible Media
img {
  max-width: 100%;

  /* just in case, to force correct aspect ratio */
  height: auto !important;
}

VIII. CSS Sass

  • Sass là một ngôn ngữ mở rộng của CSS, nó có thể giúp việc viết CSS trở nên dễ dàng và nhanh hơn.
  • Sass là chữ viết tắt của Syntactically Awesome Style Sheets, chương trình tiền xử lý bằng ngôn ngữ kịch bản (Preprocessor Scripting Language ), sẽ được biên dịch thành CSS. Nghĩa là, mình sẽ làm style bằng SASS, rồi SASS sẽ render việc mình làm thành file CSS.
  • Sass có 2 phiên bản là Sass và SCSS, 2 phiên bản này khác nhau ở cú pháp, nhưng cùng có chức năng tương tự nhau.

[Web-Buổi 2] Tìm hiểu về CSS

  • Các cách style cho file HTML.
  • CSS selectors.
  • Độ ưu tiên, các loại đơn vị độ dài trong CSS.
  • Float, box model
  • Các loại position, z-index trong CSS.
  • Các loại display trong CSS.
  • Background style trong CSS.
  • Pseudo class và pseudo element.
  • Style cho text trong CSS.

I. Các cách style cho file HTML.

CSS
  • Có 3 cách để style cho file HTML:
    • Inline style: style được viết trực tiếp vào thẻ HTML.
    • Internal style: style được viết trong thẻ <style> của file HTML.
    • External style: style được viết trong file CSS riêng.
  • Inline style:
    • Cú pháp: <tag style="property: value">
    • Ví dụ: <p style="color: red">Hello World</p>
    • Ưu điểm: style được viết trực tiếp vào thẻ HTML nên có độ ưu tiên cao nhất.
    • Nhược điểm: khó quản lý, khó bảo trì, khó mở rộng.
  • Internal style:
    • Cú pháp: <style>selector {property: value}</style>
    • Ví dụ: <style> p { color: red; } </style>
    • Ưu điểm: style được viết trong file HTML nên có độ ưu tiên cao hơn so với external style.
    • Nhược điểm: khó quản lý, khó bảo trì, khó mở rộng.
  • External style:
    • Cú pháp: <link rel="stylesheet" href="path/to/file.css">
    • Ví dụ: <link rel="stylesheet" href="style.css">
    • Ưu điểm: style được viết trong file CSS riêng nên có thể tái sử dụng, quản lý, bảo trì, mở rộng dễ dàng.
    • Nhược điểm: style được viết trong file CSS riêng nên có độ ưu tiên thấp nhất.

II. CSS selectors.

CSS selectors
  • CSS selectors là các cách chọn phần tử HTML để style.
  • Có nhiều loại CSS selectors:
    • Element selectors: chọn phần tử HTML dựa vào tên thẻ.
    • Class selectors: chọn phần tử HTML dựa vào tên class.
    • ID selectors: chọn phần tử HTML dựa vào tên ID.
    • Universal selectors: chọn tất cả các phần tử HTML.
    • Grouping selectors: chọn nhiều phần tử HTML cùng lúc.
    • Descendant selectors: chọn phần tử HTML con của phần tử HTML khác.
    • Adjacent sibling selectors: chọn phần tử HTML anh em cùng cấp của phần tử HTML khác.
    • Child selectors: chọn phần tử HTML con của phần tử HTML khác.
    • Attribute selectors: chọn phần tử HTML dựa vào thuộc tính của phần tử HTML đó.
    • Pseudo-class selectors: chọn phần tử HTML dựa vào trạng thái của phần tử HTML đó.
    • Pseudo-element selectors: chọn phần tử HTML dựa vào phần tử HTML đó.
    • Combinators: kết hợp nhiều CSS selectors lại với nhau.
CSS selectors
  • Cú pháp: selector {property: value}
  • Ví dụ: p { color: red; }
  • Select phần tử HTML có tên thẻ là p và style cho nó màu đỏ.
  • Ví dụ selector element có id là id1 và style cho nó màu đỏ: #id1 { color: red; }
  • Ví dụ selector element có class là class1 và style cho nó màu đỏ: .class1 { color: red; }

III. Độ ưu tiên, các loại đơn vị độ dài trong CSS.

  • Độ ưu tiên trong CSS:
    • Inline style > Internal style > External style.
    • !important > inline style > internal style > external style.
    • Selector có độ dài dài hơn sẽ có độ ưu tiên cao hơn.
    • Selector có độ ưu tiên cao hơn sẽ được áp dụng.
  • Các loại đơn vị độ dài trong CSS:
    • px: pixel.
    • em: độ dài của phần tử HTML cha.
    • rem: độ dài của phần tử HTML root (thường là thẻ <html>).
    • %: phần trăm.
    • vw: độ dài của viewport theo chiều ngang.
    • vh: độ dài của viewport theo chiều dọc.

IV. Float, box model

Float
  • Float: thuộc tính dùng để xác định vị trí của phần tử HTML.
  • Có 4 giá trị của float:
    • left: phần tử HTML sẽ nằm bên trái.
    • right: phần tử HTML sẽ nằm bên phải.
    • none: phần tử HTML sẽ không nằm bên trái hay bên phải.
    • inherit: phần tử HTML sẽ kế thừa giá trị float của phần tử HTML cha.

VD:

p {
    float: left;
}
Box model
  • Box model: mô hình hình hộp của phần tử HTML.
  • Có 4 thành phần của box model:
    • Content: nội dung của phần tử HTML.
    • Padding: phần đệm giữa content và border.
    • Border: viền của phần tử HTML.
    • Margin: phần đệm giữa border và phần tử HTML khác.

VD:

p {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid black;
    margin: 10px;
}

Các thuật ngữ trên có thể tạm giải thích như sau:

  • content (hay content area): là vùng chứa nội dung của một element, với chiều rộng/cao được xác định qua thuộc tính width và height. Vùng này thường chứa text, hình ảnh, video…
  • padding (hay padding area): cho biết độ rộng của vùng padding bao quanh vùng content.
  • border (hay border area): cho biết độ rộng (và style) của border bao quanh vùng padding.
  • margin (hay margin area): cho biết độ rộng của vùng margin bao quanh vùng border.

V. Các loại position, z-index trong CSS.

Position
Position
  • Có 5 loại position:
    • static: phần tử HTML sẽ được đặt theo thứ tự xuất hiện trong file HTML.
    • relative: phần tử HTML sẽ được đặt theo thứ tự xuất hiện trong file HTML, nhưng có thể dịch chuyển theo hướng top, bottom, left, right.
    • absolute: phần tử HTML sẽ được đặt theo thứ tự xuất hiện trong file HTML, nhưng có thể dịch chuyển theo hướng top, bottom, left, right, và sẽ được đặt theo phần tử HTML cha có position là relative hoặc absolute.
    • fixed: phần tử HTML sẽ được đặt theo thứ tự xuất hiện trong file HTML, nhưng có thể dịch chuyển theo hướng top, bottom, left, right, và sẽ được đặt theo phần tử HTML cha có position là relative hoặc absolute, và sẽ được đặt theo viewport.
    • sticky: phần tử HTML sẽ được đặt theo thứ tự xuất hiện trong file HTML, nhưng có thể dịch chuyển theo hướng top, bottom, left, right, và sẽ được đặt theo phần tử HTML cha có position là relative hoặc absolute, và sẽ được đặt theo viewport, và sẽ được đặt lại vị trí ban đầu khi scroll.

VD:

p {
    position: relative;
    top: 10px;
    left: 10px;
}
Z-index
  • Có 2 loại z-index:
    • auto: phần tử HTML sẽ được đặt theo thứ tự xuất hiện trong file HTML.
    • number: phần tử HTML sẽ được đặt theo thứ tự xuất hiện trong file HTML, nhưng có thể đặt lại vị trí bằng cách thay đổi giá trị number.

VD:

p {
    z-index: 1;
}

VI. Các loại display trong CSS.

  • Có 4 loại display:
    • block: phần tử HTML sẽ được hiển thị trên một dòng riêng biệt.
    • inline: phần tử HTML sẽ được hiển thị trên một dòng với các phần tử HTML khác.
    • inline-block: phần tử HTML sẽ được hiển thị trên một dòng với các phần tử HTML khác, nhưng có thể thay đổi kích thước.
    • none: phần tử HTML sẽ không được hiển thị.

VD:

p {
    display: inline-block;
}

VII. Background style trong CSS.

Background
  • Có 5 thuộc tính của background:
    • background-color: màu nền.
    • background-image: hình nền.
    • background-repeat: lặp lại hình nền.
    • background-position: vị trí hình nền.
    • background-attachment: cố định hình nền.

VD:

p {
    background-color: red;
    background-image: url("https://www.w3schools.com/cssref/img_tree.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

VIII. Pseudo class và pseudo element.

Pseudo class
  • Pseudo class: lựa chọn phần tử HTML dựa vào trạng thái của phần tử HTML đó.
  • Có 4 loại pseudo class:
    • :active: phần tử HTML đang được click.
    • :hover: phần tử HTML đang được hover.
    • :focus: phần tử HTML đang được focus.
    • :visited: phần tử HTML đã được truy cập.

VD:

p:hover {
    color: red;
}
Pseudo element
  • Pseudo element: lựa chọn phần tử HTML dựa vào phần tử HTML đó.
  • Có 4 loại pseudo element:
    • ::after: thêm nội dung vào phần tử HTML sau.
    • ::before: thêm nội dung vào phần tử HTML trước.
    • ::first-letter: thêm nội dung vào phần tử HTML đầu tiên.
    • ::first-line: thêm nội dung vào phần tử HTML dòng đầu tiên.

VD:

p::after {
    content: "Hello World";
}

IX. Style cho text trong CSS.

Text
  • Có 4 thuộc tính của text:
    • color: màu chữ.
    • text-align: căn lề.
    • text-decoration: gạch chân.
    • text-transform: chuyển đổi chữ.

VD:

p {
    color: red;
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
}

[Web-Buổi 1] Tìm hiểu về cách hoạt động của Web, HTML cơ bản

Mục lục:

  • Cách thức hoạt động của một trang web
  • Cấu trúc của HTML
  • Block, inline elements. Qua phân biệt div, span.
  • Các thẻ liên quan đến table trong HTML
  • Các thẻ: image, video, links, audio
  • Section elements: div, span, header, footer, nav, main, section, article
  • HTML text fundamentals: h1 -> h6, p, ul, li
  • Các thẻ liên quan đến form: form, input, button, label, textarea
  • Có thể tìm hiểu các thẻ khác ngoài các thẻ trên các thẻ trên

I. Cách thức hoạt động của một trang web

Khi máy tính nhà của mình kết nối đến một trang web trên mạng, ta có thể gọi chúng là các clients (máy khách) và servers (máy chủ).

Ảnh minh hoạ: ảnh minh hoạ 1

Client máy khách sẽ gửi các Requests (yêu cầu) về máy chủ, và máy chủ sẽ trả về Response (Phản hồi) tương ứng với yêu cầu của người dùng.

VD:

  • Người dùng gửi yêu cầu tìm trang bạn bè, server trả về trang banbe.html
  • Người dùng gửi yêu cầu nhắn tin, server trả về dữ liệu tin nhắn

Ở thời kì đầu của web, đa phần các web đều là web tĩnh. Tức là các trang web chỉ có thể hiển thị các nội dung cố định, không thể thay đổi được. Ví dụ như các trang web tin tức, các trang web thông tin, các trang web giới thiệu sản phẩm, …

Tuy nhiên, với sự phát triển của công nghệ, các trang web ngày nay có thể thay đổi được nội dung, có thể tương tác với người dùng. Ví dụ như các trang web mạng xã hội, các trang web thương mại điện tử, các trang web chơi game, … (Được gọi là web động). Các trang web động sẽ có dữ liệu hiển thị tuỳ theo người dùng khác nhau, và có thể thay đổi được dữ liệu hiển thị tuỳ theo người dùng. Ví dụ như trang web mạng xã hội, khi bạn đăng nhập vào trang web, bạn sẽ thấy các bài viết của bạn bè, và bạn có thể đăng bài viết của mình lên trang web.

ảnh minh hoạ 2

Vậy nhìn chung thì Web là một dữ liệu sẽ được server trả về khi người dùng yêu cầu. Tuy nhiên nếu đào sâu ra thì đây là một quá trình rất dài, tưởng tượng máy bạn là nhà bạn, và web bạn truy cập là một cửa hàng trên phố, lúc này để truy cập web, bạn cần đi qua một tuyến đường để đến cửa hàng đó.

Quá trình xảy ra khi bạn kết nối một trang web:

  • Đầu tiên tưởng tượng, để đến một cửa hàng (web), ta cần địa chỉ của nó. Các máy chủ hay máy người dùng khi kết nối đến hệ thống internet toàn cầu đều được cấp một địa chỉ, thường là Ipv4 (ví dụ 98.139.180.149)
  • Tuy nhiên, số lượng ipv4 là có hạn. Vì vậy thông thường các máy tính sẽ nằm trong một mạng cục bộ, và chỉ có một ipv4 bên ngoài quyết định chúng. VD: Toàn bộ máy tính của 1 toà nhà sẽ đều kết nối vào một modem mạng có Ipv4 là (98.139.180.149). Đây sẽ là địa chỉ để bên ngoài có thể kết nối tới. Tuy nhiên khi có yêu cầu gửi tới, ta có thể cài đặt nó sẽ được đi vào máy tính nào trong toà nhà đó, các máy tính lúc này sẽ có một ipv4 cục bộ kiểu: 192.168.0.1, 192.168.0.2, ….. Tưởng tượng: Các cửa hàng nằm trong phố Nguyễn Trãi, ta đi đến Nguyễn Trãi và nó sẽ là số 100 Nguyễn Trãi, số 101 Nguyễn Trãi, …
ảnh minh hoạ 3
  • Như vậy ta đã biết là bằng cách trên. Một server có thể truy cập bằng một địa chỉ Ipv4. Kiểu ta có thể truy cập bằng http://98.139.180.149. Tuy nhiên người dùng không thể nhớ hết số IP này, vì vậy ta cần một hệ thống định dang (tên miền – domain) để biến ip số này thành các tên miền dễ nhớ. VD: http://google.com, http://facebook.com, http://youtube.com, …
  • Để có thể biết được địa chỉ ip của một tên miền, ta cần một hệ thống DNS (Domain Name System). Hệ thống này sẽ lưu trữ các tên miền và địa chỉ ip tương ứng của nó. VD: google.com -> 20.002.003.149
  • Các hệ thống DNS như một cuốn từ điển và cho biến tên miền nào chỉ đến ip nào. Thông thường khi kết nối, đầu tiên máy tính sẽ tìm lại vào cache của chính máy mình để xem tên miền đã được lưu chưa, nếu chưa có thì máy tính sẽ tìm đến các dns server của ISP (nhà mạng, ví dụ Viettel, VNPT). Nếu vẫn chưa tìm thấy, máy tính sẽ tìm đến các DNS Server khác như của Google (8.8.8.8), Cloudflare (1.1.1.1), …
  • Khi người dùng gõ tên miền vào trình duyệt, trình duyệt sẽ gửi yêu cầu tới DNS để lấy địa chỉ ip của tên miền đó. Sau đó trình duyệt sẽ gửi yêu cầu tới địa chỉ ip đó, và server sẽ trả về dữ liệu tương ứng với yêu cầu của người dùng.
ảnh minh hoạ 4

II. Cấu trúc của HTML

ảnh minh hoạ 5
ảnh minh hoạ 6
  • HTML là một ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language). Nó được sử dụng để xây dựng các trang web. HTML được sử dụng để đánh dấu các phần tử trong một trang web. Các phần tử này được đánh dấu bằng các thẻ HTML. Mỗi thẻ HTML bắt đầu bằng một ký tự đặc biệt và kết thúc bằng một ký tự đặc biệt. Nội dung giữa các thẻ HTML là nội dung của phần tử đó. Ví dụ: <p> This is a paragraph </p>
  • Các thẻ HTML có thể được phân thành hai loại: thẻ đóng và thẻ không đóng. Thẻ đóng có một thẻ đóng tương ứng, trong khi thẻ không đóng không có thẻ đóng tương ứng. Ví dụ: <p> This is a paragraph </p> là một thẻ đóng, trong khi <br> là một thẻ không đóng.

III. Thẻ khối và thẻ nội tuyến

Các thẻ HTML có thể được nhóm thành các thẻ khối và các thẻ nội tuyến. Các thẻ khối bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng của trình duyệt, trong khi các thẻ nội tuyến không bắt đầu trên một dòng mới và chỉ chiếm một phần của chiều rộng của trình duyệt. Ví dụ: <p> là một thẻ khối, trong khi <b> là một thẻ nội tuyến.

Có 2 kiểu giá trị hiển thị chính : block và inline.

Block-level elements (thẻ khối) :

Một block-elements luôn bắt đầu trên một dòng mới và Browser tự động thêm khoảng trắng (margin) và trước và sau phần tử đó. Nó luôn chiếm toàn bộ chiều rộng có sẵn. 2 block-elements thường dùng là : <p> và <div>.

Inline elements (thẻ nội tuyến) :

Một Inline elements không bắt đầu trên một dòng mới. Nó chỉ chiếm chiều rộng cần thiết. Một phần tử inline không thể chưa phần tử block.

  • <div> là một thẻ khối, nó được sử dụng để nhóm các phần tử HTML lại với nhau. Nó không có bất kỳ ý nghĩa đặc biệt nào. Nó thường được sử dụng để tạo các nhóm phần tử CSS để áp dụng các kiểu CSS cho các phần tử đó. Ví dụ: <div> This is a div </div>
  • <span> là một thẻ nội tuyến, nó được sử dụng để nhóm các phần tử HTML lại với nhau. Nó không có bất kỳ ý nghĩa đặc biệt nào. Nó thường được sử dụng để tạo các nhóm phần tử CSS để áp dụng các kiểu CSS cho các phần tử đó. Ví dụ: <span> This is a span </span>

IV. Các thẻ liên quan đến table trong HTML

  • <table> là một thẻ khối, nó được sử dụng để tạo một bảng. Nó có thể chứa một hoặc nhiều thẻ <tr>. Ví dụ: <table> This is a table </table>
  • <tr> là một thẻ khối, nó được sử dụng để tạo một hàng trong bảng. Nó có thể chứa một hoặc nhiều thẻ <td>. Ví dụ: <tr> This is a table row </tr>
  • <td> là một thẻ nội tuyến, nó được sử dụng để tạo một ô trong bảng. Nó có thể chứa một hoặc nhiều thẻ <p>. Ví dụ: <td> This is a table cell </td>
  • <th> là một thẻ nội tuyến, nó được sử dụng để tạo một ô trong bảng. Nó có thể chứa một hoặc nhiều thẻ <p>. Nó khác với thẻ <td> ở chỗ nó được sử dụng để tạo một ô tiêu đề trong bảng. Ví dụ: <th> This is a table header </th>
ảnh minh hoạ 7
  • <img> là một thẻ nội tuyến, nó được sử dụng để chèn một hình ảnh vào trang web. Nó không có thẻ đóng tương ứng. Ví dụ: <img src="image.jpg" alt="Image">
<img src="url" alt="alternatetext">
  • <video> là một thẻ khối, nó được sử dụng để chèn một video vào trang web. Nó có thể chứa một hoặc nhiều thẻ <source>. Ví dụ: <video> This is a video </video>
  • <source> là một thẻ nội tuyến, nó được sử dụng để chỉ định một nguồn video. Nó không có thẻ đóng tương ứng. Ví dụ: <source src="video.mp4" type="video/mp4">
  • <audio> là một thẻ khối, nó được sử dụng để chèn một âm thanh vào trang web. Nó có thể chứa một hoặc nhiều thẻ <source>. Ví dụ: <audio> This is an audio </audio>
  • <source> là một thẻ nội tuyến, nó được sử dụng để chỉ định một nguồn âm thanh. Nó không có thẻ đóng tương ứng. Ví dụ: <source src="audio.mp3" type="audio/mp3">
  • <a> là một thẻ nội tuyến, nó được sử dụng để tạo một liên kết đến một trang web khác. Nó có thể chứa một hoặc nhiều thẻ <img>. Ví dụ: <a href="https://www.google.com"> This is a link </a>
<a href="url">link text</a>
  • attributes quan trọng nhất của thẻ là “href”, nó cho biết đích đến của link.
  • Target attribute :
    • _self : mở tài liệu cùng cửa sổ khi nhấn link.
    • _blank : mở tài liệu ở cửa sổ mới.
    • _parent : mở tài liệu trong khung chính.
    • _top : mở tài liệu trong toàn bộ cửa sổ.

VI. Section elements: div, span, header, footer, nav, main, section, article

https://www.w3schools.com/html/img_sem_elements.gif
  • <div> là một thẻ khối, nó được sử dụng để nhóm các phần tử HTML lại với nhau. Nó không có bất kỳ ý nghĩa đặc biệt nào. Nó thường được sử dụng để tạo các nhóm phần tử CSS để áp dụng các kiểu CSS cho các phần tử đó. Ví dụ: <div> This is a div </div>
  • <span> là một thẻ nội tuyến, nó được sử dụng để nhóm các phần tử HTML lại với nhau. Nó không có bất kỳ ý nghĩa đặc biệt nào. Nó thường được sử dụng để tạo các nhóm phần tử CSS để áp dụng các kiểu CSS cho các phần tử đó. Ví dụ: <span> This is a span </span>
  • <header> là một thẻ khối, nó được sử dụng để tạo một tiêu đề cho trang web hoặc một phần của trang web. Ví dụ: <header> This is a header </header>
  • <footer> là một thẻ khối, nó được sử dụng để tạo một chân trang cho trang web hoặc một phần của trang web. Ví dụ: <footer> This is a footer </footer>
  • <nav> là một thẻ khối, nó được sử dụng để tạo một thanh điều hướng cho trang web hoặc một phần của trang web. Ví dụ: <nav> This is a nav </nav>
  • <main> là một thẻ khối, nó được sử dụng để tạo một phần chính của trang web. Ví dụ: <main> This is a main </main>
  • <section> là một thẻ khối, nó được sử dụng để tạo một phần của trang web. Ví dụ: <section> This is a section </section>
  • <article> là một thẻ khối, nó được sử dụng để tạo một bài viết. Ví dụ: <article> This is an article </article>

VII. HTML text fundamentals: h1 -> h6, p, ul, li

ảnh minh hoạ 8
  • <h1> là một thẻ khối, nó được sử dụng để tạo một tiêu đề lớn nhất cho trang web hoặc một phần của trang web. Ví dụ: <h1> This is a heading </h1>
  • <h2> là một thẻ khối, nó được sử dụng để tạo một tiêu đề lớn hơn <h1> cho trang web hoặc một phần của trang web. Ví dụ: <h2> This is a heading </h2>
  • …
  • <p> là một thẻ khối, nó được sử dụng để tạo một đoạn văn bản. Ví dụ: <p> This is a paragraph </p>
  • <ul> là một thẻ khối, nó được sử dụng để tạo một danh sách không có thứ tự. Nó có thể chứa một hoặc nhiều thẻ <li>. Ví dụ: <ul> This is an unordered list </ul>
  • <li> là một thẻ khối, nó được sử dụng để tạo một mục trong danh sách. Nó có thể chứa một hoặc nhiều thẻ <p>. Ví dụ: <li> This is a list item </li>
  • <ol> là một thẻ khối, nó được sử dụng để tạo một danh sách có thứ tự. Nó có thể chứa một hoặc nhiều thẻ <li>. Ví dụ: <ol> This is an ordered list </ol>
ảnh minh hoạ 9

VIII. Các thẻ liên quan đến form: form, input, button, label, textarea

  • <form> là một thẻ khối, nó được sử dụng để tạo một biểu mẫu. Nó có thể chứa một hoặc nhiều thẻ <input>, <button>, <label>, <textarea>. Ví dụ: <form> This is a form </form>
  • <input> là một thẻ nội tuyến, nó được sử dụng để tạo một trường nhập liệu. Nó không có thẻ đóng tương ứng. Ví dụ: <input type="text">
  • <button> là một thẻ nội tuyến, nó được sử dụng để tạo một nút. Nó có thể chứa một hoặc nhiều thẻ <img>. Ví dụ: <button> This is a button </button>
  • <label> là một thẻ nội tuyến, nó được sử dụng để tạo một nhãn cho một trường nhập liệu. Nó có thể chứa một hoặc nhiều thẻ <input>. Ví dụ: <label> This is a label </label>
  • <textarea> là một thẻ khối, nó được sử dụng để tạo một trường nhập liệu dài. Nó không có thẻ đóng tương ứng. Ví dụ: <textarea> This is a textarea </textarea>
  • <select> là một thẻ khối, nó được sử dụng để tạo một trường nhập liệu dạng danh sách thả xuống. Nó có thể chứa một hoặc nhiều thẻ <option>. Ví dụ: <select> This is a select </select>
  • <option> là một thẻ khối, nó được sử dụng để tạo một mục trong danh sách thả xuống. Nó không có thẻ đóng tương ứng. Ví dụ: <option> This is an option </option>
ảnh minh hoạ 11

IX. Có thể tìm hiểu các thẻ khác ngoài các thẻ trên các thẻ trên

  • <br> : Xuống dòng
  • <hr> : Thẻ ngang
  • <i> : In nghiêng
  • <b> : In đậm

Cài đặt WordPress với Docker, Nginx, MariaDB trên Ubuntu 22

Giới thiệu

Ở bài viết này chúng ta sẽ tiến hành tạo một website WordPress thông qua Docker Compose, Nginx, MariaDB trên Ubuntu 22.04. Về phần Docker mình sẽ sử dụng Portainer để quản lý container.

Cài đặt Docker và Portainer

Cài đặt Docker trên Ubuntu

sudo apt update
sudo apt upgrade
sudo apt install docker.io -y

Tự động bật Docker khi máy chủ khởi động

sudo -i
systemctl start docker
systemctl enable docker

Cài đặt Portainer

docker volume create portainer_data
docker run -d -p 9000:9000 --name portainer --restart always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer
docker ps

Truy cập Portainer

Sau khi cài đặt xong, bạn hãy lên web và truy cập vào http://localhost:9000 để vào giao diện của Portainer

image - quochung.cyou PTIT

Vào lần truy cập đầu tiên, bạn sẽ được hỏi để tạo mật khẩu truy cập Portainer.

Vì mình quản lý từ local nên mình sẽ chọn Local ở bước tiếp theo

02 connect local - quochung.cyou PTIT

Cài đặt WordPress

Cài đặt Nginx

Bạn vào mục Container và tạo một container cho nginx như sau

image 1 - quochung.cyou PTIT
+ Name: nginx (Tùy ý bạn chọn để đặt tên cho container)
+ Image: nginx
+ Manual network port publishing:
Chọn port truy cập cho nginx, mặc định ở phần container phải là 80, và host là port bạn truy cập đến nginx
Hoặc bật Publish all exposed network ports to random host ports để tự động chọn port ngẫu nhiên 

Ở đây mình chọn 80:80

Chọn Deploy Container để tiếp tục

Tiếp theo thử truy cập localhost:(cổng bạn chọn) để kiểm tra xem nginx đã hoạt động chưa?

welcome to nginx window 5x3 2 - quochung.cyou PTIT

Cài đặt MariaDB

Tiếp tục tạo Container cho MariaDB như sau

image 2 - quochung.cyou PTIT
+ Name: mariadb (Tùy ý bạn chọn để đặt tên cho container)
+ Image: mariadb 
+ Manual network port publishing:
Chọn port truy cập cho mariadb , mặc định ở phần mariadb phải là 3306, và host là port bạn truy cập đến nginx
Hoặc bật Publish all exposed network ports to random host ports để tự động chọn port ngẫu nhiên 

Ở đây mình chọn 4166:3306

Chọn Deploy Container để tiếp tục

Sau đó truy cập vào Console và tạo database cho wordpress

mysql -u root -p
create database wordpress;

Cài đặt WordPress

Tạo container wordpress như sau

image 3 - quochung.cyou PTIT
+ Name: wordpress (Tùy ý bạn chọn để đặt tên cho container)
+ Image: wordpress 
+ Manual network port publishing:
Chọn port truy cập cho wordpress, mặc định ở phần container phải là 80, và host là port bạn truy cập đến wordpress
Hoặc bật Publish all exposed network ports to random host ports để tự động chọn port ngẫu nhiên 

Ở đây mình chọn 4167:80

Chọn Deploy Container để tiếp tục

Cấu hình Nginx

Truy cập vào Console nginx và gõ lệnh sau

apt -y update
apt -y install nano
nano /etc/nginx/conf.d/wordpress.conf

Bạn tạo config file theo mẫu sau với ip, port theo bạn tạo

server {
    listen       80;
    server_name  wordpress.quochung.cyou; 

location / {
    proxy_pass       http://ip:4167;
    proxy_redirect             off;
    proxy_set_header Upgrade   $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Như vậy mình đã trỏ subdomain wordpress.quochung.cyou về IP của nginx trên cổng http 80. Sau đó nginx sẽ chuyển đến http://ip:4167 (Trang của wordpress)

Bạn save file và gõ

nginx -t

Để kiểm tra xem config đã đúng chưa

Sau khi xong khởi động lại container nginx, truy cập tên miền đã tạo để kiểm tra kết quả

WordPress setup wizard - quochung.cyou PTIT