Bài đầu tiên trong series như một phép thử, nếu bạn làm theo thành công và thấy nó cũng không quá khó và có hứng thú để tìm hiểu thêm, thì ở bài này, chúng ta sẽ đi sâu hơn 1 chút. Giới thiệu một chút thì mình biết đến lập trình chủ yếu là tự học, lên mạng xem video clip và đọc các bài viết của các blogger khác, cứ như vậy mà tích lũy kiến thức dần dần. Nguồn học chính của mình ngày trước là Freecodecamp, đây là một trang tự học rất hay (mình sẽ giới thiệu chi tiết hơn 1 chút ở các phần sau). Tuy nhiên khi gửi cho bạn bè trang này thì mọi người đều chạy hết (Do nó là tiếng anh và có ghi hơn 1000 giờ tự học!! nản luôn 😂 ).

Đó cũng là nguyên nhân mình muốn tạo ra blog series này, lập trình không quá khó, và lương cũng ổn, có thể tự cày thêm kinh nghiệm được, nên hãy thử học lập trình xem, biết đâu lại có duyên với nghề.

• Nếu bạn có khả năng tự học, và đọc hiểu và tìm kiếm đc với từ khóa tiếng Anh, hãy bắt đầu với freecodecamp.org/learn , đây là hành trình khá gian nan, nhưng học xong mấy cái cơ bản ở đây là đi làm việc dự án thật okie.

• Nếu bạn cần thêm các bài viết nhỏ lẻ để tham khảo, tăng thêm kiến thức, thì tiếp tục đọc tiếp series này

OK cách học sẽ chia ra thành 2 phần là Cầm tay chỉ việc và Bản chất vấn đề (hay gọi là phương pháp C2B). Không giới thiệu quá nhiều kiến thức mà thay vào đó làm dần dần những cái nhỏ nhưng thực tế, để việc học vui hơn và đỡ cực.

1. Giải thích bản chất 1 số vấn đề ở bài trước

1. Để ý khi dùng codepen.io/pen , nó có 3 phần là HTML, CSS, JS (là viết tắt của Javascript). Đây chính là thành phần tạo nên 1 website

Nhưng trước hết, website là gì? website là văn bản thông minh, trình duyệt web (Chrome, Firefox,...) là phần mềm đọc văn bản thông mình, đại khái là như vậy.

Giờ hãy thử làm theo như này:

• Mở codepen ra, viết lại y như ảnh bên trên (Do code cũng không nhiều, nên tự gõ vào để làm quen dần)
• Test thử bằng cách nếu nó hiện chữ Hello world đỏ, bấm vô thì nó hiện thông báo là okie.
• Giờ mở Nodepad (đối với những ai dùng Windows) hoặc textEdit (với ai dùng Macbook) và soạn thảo với nội dung sau

{copy paste đoạn code HTML vào}
<style>
{copy paste đoạn code CSS vào}
</style>
<script>
{copy paste đoạn code JS vào}
</script>

Lưu ý: cái {copy paste...} là chỉ dẫn thực hiện, chứ không phải nội dung file.

• Lưu file với tên index.html (Nếu lưu thành công thì file sẽ có biểu tượng liên quan đến trình duyệt, nếu của bạn không giống, thì google về tên file và đuôi file, nhiều trường hợp sẽ bị lưu thành index.html.txt thì cần sửa lại cho đúng)
• Mở thử bằng trình duyệt xem nó hiện như nào, có giống như trên Codepen không, nếu giống là thành công rồi đó.
• Trong 1 file HTML, sẽ có thể chứa code HTML, code CSS (được bọc trong thẻ <style>), và code JS (được bọc trong thẻ <script>). Mỗi loại có 1 kiểu code khác nhau (quy luật khác nhau), sau này quen thì nhìn phát biết luôn cái nào là cái nào, cái đó gọi là Syntax Code
• Nhìn qua có thể thấy HTML là để tạo nội dung (chữ hello world), CSS là tạo giao diện (màu đỏ), JS là tạo hành động (bấm vào hiện thông báo)

Qua những điều trên:

• Tổng kết lại thì 1 website = HTML + CSS + JS, có thể mở từ file có đuôi .html
• Hãy tự google thêm về HTML, CSS, JS (về JS thì xem qua thôi, ban đầu tập trung vào HTML và CSS). Có 1 trang khá hay để học là w3schools.com/html/default.asp

Trang này cũng có phần tự gõ code vào nó hiện ra luôn như Codepen

Cứ xem qua từng bài từng bài 1 cũng được (Bấm nút Next ở bên dưới), cái này bằng tiếng anh và hơi khô khan 1 chút, nhưng có thể dùng để tra cứu khi cần khá tiện.

Bài tập:

• Không nhìn vào code ở bài viết trước, hay tự viết lại từ đầu làm sao web nhìn cho giống nhất có thể (bấm nút không cần phải hoạt động như bài trước, tạm thời chỉ cần làm giao diện trước)
• Yêu cầu tối thiểu là có thể giao diện nó không giống, có thể nhìn xấu hơn 1 chút, nhưng phải đầy đủ các thành phần (câu giới thiệu, ô nhập dữ liệu và nút bấm)

2. Cầm tay chỉ việc làm 1 website tin tức hoặc bán hàng

Song song với học bản chất thì chúng ta học theo 1 hướng khác. Hiện nay có rất nhiều cách để làm website không cần code, xu hướng này trên mạng gọi là No Code khá là hot. No Code thực chất là có nhiều bên mã nguồn/dịch vụ họ đã làm sẵn, đóng gói thành sản phẩm, và cho mình sử dụng, lúc đó mình sẽ không cần code nữa. VD như mình không phải code trang web viết blog này, mà mình tạo 1 tài khoản trên HashNode.com, từ đây có thể viết blog free luôn (nhiều dịch vụ sẽ mất tiền), mà tên miền thì vẫn là của mình.

Okay giờ chúng ta sẽ làm 1 website tin tức hoặc bán hàng theo công thức:

1. Cài Wordpress
2. Cài Theme
3. Cập nhật dữ liệu.

Các công đoạn làm sẽ khá giống với việc cài đặt phần mềm lên máy tính, không cần đến kiến thức về lập trình cũng có thể làm được. Tuy nhiên để làm theo cách này hiệu quả nhất, thì sẽ phải bỏ ra 1 chút tiền, bạn cứ tưởng tượng nó giống như việc nhập hàng về bán vậy.

• Bước 1: Cài Wordpress. Bạn có thể cài lên máy tính cá nhân và làm vậy sẽ k mất tiền thuê server, tuy nhiên sẽ thêm khá nhiều bước phức tạp và dễ lỗi khiến thời gian làm bị tăng lên nhiều và nhanh nản. (Bạn có thể tự làm bằng cách Google Cách cài Wordpress lên windows/mac) Chúng ta sẽ thuê 1 server nào có khả năng tự cài Wordpress. Mình thì hay dùng hawkhost.com là 1 dịch vụ nước ngoài, tự động hóa nhiều nên k cần contact support quá nhiều. (Các dịch vụ của VN thì cứ bảo hỗ trợ cài cho thì họ cũng cài ok)

Gói rẻ nhất là 2.99 USD / tháng tức là tầm 70k. Tuy nhiên bạn sẽ cần có Domain (tên miền, VD như trong bài này mình sẽ dùng tên miền wp.hanoiapp.xyz là tên miền mình đang sở hữu) để dùng kèm với Server nên là nếu chưa có thì trong quá trình thuê server ở hawkhost.com họ cũng sẽ thể cho mình mua luôn domain. Đoạn này thuần túy là mua bán, sau khi thanh toán xong thì họ sẽ gửi lại thông tin server (url, tài khoản + mật khẩu) cho mình để minh đăng nhập.

Sau khi bạn đăng nhập vào xong thì sẽ thấy 1 trang quản lý giao diện tựa như này:

Bây giờ gõ vào ô search "soft" và nó sẽ lọc luôn kết quả cho bạn

Kết quả 1 và 2 đều được, bạn bấm vào nó sẽ dẫn ra trang cài Wordpress, bấm để Install (cài) 1 bản wordpress mới

Nó hiện lên một bảng như này, điền các thông số vào như hình

Nếu bạn mua domain cùng chỗ vs server như mình có nhắc đến ở trên thì vào đây nó sẽ tự động hiện ra cho bạn chọn. Kéo xuống bên dưới là các mục như tên, tài khoản admin thì cứ điền theo ý thích. Xong hết thì bấm Install. Lưu ý bên dưới có mục chọn Theme thì bỏ qua nha (vì các Theme đó là theme free sẽ k có nhiều giá trị lắm, mình sẽ cài Theme khác ở bước thứ 2). Nó hiện như này là xong nè

Và khi bấm vào đường link thì nó sẽ hiện như này:

Đó là 1 bản Wordpress hoàn toàn mới, đã được cài lên Domain site1.wp.hanoiapp.xyz, làm được như vậy là kết thúc bước 1. Có rất nhiều cách cài Wordpress và cách bên trên chỉ là 1 cách mà mình cho là nhanh nhất, bạn có thể Google thêm để làm theo cách khác, kết quả cuối cùng là có 1 bản Wordpress lên hình là ok.

• Bước 2: Cài Theme:

Truy cập vào {tên domain}/wp-admin, nó sẽ dẫn bạn đến 1 trang đăng nhập, đăng nhập với tài khoản đã tạo ở bước 1 là đc

Vào trang Apperance -> Themes

Giờ tạm để đó đã, truy cập vào trang elements.envato.com/wordpress/shop+theme

Đây là 1 trang mua bán theme giá khá ổn, như hình là mình đang tìm từ khóa các site dạng shop bán hàng, nếu làm site tin tức, thì dùng từ khóa news.

Trang này chủ yếu là sẽ mất tiền để mua theme, mình cũng sẽ skip qua phần mua bán, sau khi thanh toán xong, bạn sẽ download đc 1 file zip theme về.

Trước khi mua/download thì nó có nút Live Preview để xem trước, bấm vào sẽ mở ra 1 website cài sẵn theme (site demo - hàng mẫu), bạn có thể vào lướt qua để xem nó như nào, nếu ưng thì mới lựa chọn mua/download. Sau này nếu làm cho khách, thì ở bước này, bạn lựa ra 4-5 theme, lấy link Live Preview và gửi khách cho khách chọn mẫu, sau đó thì mua/download thôi.

• Bước 2: Cài Theme:

Giờ quay lại trang Wordpress, bấm vào Add new -> Upload Theme -> Chọn file theme vừa download (phải giải nén ra và lấy file .zip bên trong nhé, vì cái file download chứa nhiều thứ khác, như hướng dẫn nữa) -> Install Now

Cài xong thì phải Activate theme lên

Nó sẽ báo cần cài thêm Plugin mới xài được, thì bấm vào Begin installing Plugins

Cài xong nó sẽ báo như này

Giờ quay lại và activate plugin hết lên, phải activate hết thì sau mới ra đúng kết quả được

Sau khi cài xong hết, bạn sẽ thấy thanh Menu bên trái mọc ra thêm rất nhiều mục, cái mục cần chú ý ở đây là Import Demo Content

Cái phần này là phần quan trọng nhất của việc cài Theme, là linh hồn của theme trả phí. VD như cái theme này thì nó có 4 lựa chọn cho mình

Tùy vào cái Live Preview bạn ưng kiểu nào thì chọn kiểu đó. Xong thì bấm Import và đợi.

Sau khi nó import xong thì về trang chính để xem. (nãy giờ chúng ta chủ yếu làm việc ở trang /wp-admin, là trang chỉ dành cho admin, còn trang chính cho khách xem thì ở /

Nếu import okie thì nó sẽ lên hình như này

Cái này nhìn qua tưởng chừng như bị lỗi ảnh nhưng thật ra nhiều theme sẽ kèm ảnh và nhiều theme sẽ thay bằng một ảnh màu xám để tránh yếu tố bản quyền ảnh. Cái quan trọng là nó làm sẵn các trang bố cục cho mình rồi, mình chỉ việc đổi nội dung + hình ảnh là xong. Những theme mà có kèm ảnh thì sẽ dễ dàng cho mình nhìn hơn, nhưng sau cùng thì mình cũng sẽ phải đổi ảnh để dùng với các sản phẩm của mình.

• Bước 3: Cập nhật nội dung:

Bước này sẽ là thay logo, thay tên, thay menu, thay ảnh, thay sản phẩm từ demo. Cái này b có thể đọc file hướng dẫn đính kèm trong từng theme để biết rõ từng chỗ để thay. Mở file hướng dẫn bằng trình duyệt và đọc và làm theo. Mỗi 1 theme trả phí sẽ có 1 hướng dẫn khác nhau, tuy nhiên nhìn chung nó cũng theo 1 hướng nên nếu làm quen có thể mò ra vị trí rất nhanh mà k cần đọc hướng dẫn. Tuy nhiên mới đầu thì khuyên các bạn nên đọc kỹ hướng dẫn để tiết kiệm thời gian thử đi thử lại.

Cơ bản là vậy, bạn đã có 1 trang web, có thể bán hàng, đăng sản phẩm,...

Bài tập:

• Cài 1 website wordpress (cài lên máy tính, hoặc mua server)
• Cài 1 theme lên và import demo data