, October 02, 2022

0 kết quả được tìm thấy

Lập trình web là gì? Các bước lập trình 1 trang web.

  • Đăng bởi  Kieu Hoa
  •  Jul 12, 2022

  •   16 min reads
Lập trình web là gì? Các bước lập trình 1 trang web.

Lập trình web là một công việc mà nhiều người lựa chọn và theo đuổi khi bước chân vào ngành IT. Nếu bạn đang thắc mắc và muốn tìm hiểu sâu hơn về mảng này. Chắc hẳn những kiến thức cơ bản về lập trình web sẽ rất hữu ích với bạn. Vì thế trong bài viết này, 200Lab sẽ đi chi tiết từng phần như sau:

  • Lập trình web là gì?
  • 9 loại lập trình web
  • Quá trình lập trình web

Lập trình web là gì?

Lập trình web là một thuật ngữ tổng quát cho công việc xây dựng một trang web. Điều này bao gồm mọi thứ từ markup và viết code đến viết mã kịch bản (script), cấu hình mạng (network configuration) và phát triển CMS.

Lập trình web thường đề cập đến việc markup và code trang web. Trên thực tế, lập trình web bao gồm tất cả các task phát triển liên quan như scripting phía máy khách, scripting phía máy chủ, cấu hình máy chủ và bảo mật mạng, phát triển eCommerce và phát triển hệ thống quản lý nội dung (CMS).

Các loại lập trình web

Cho dù hiện tại bạn đang muốn thuê hay trở thành web developer (lập trình viên website). Bạn nên nắm được kiến thức về các loại lập trình web mà dev có thể dấn thân.

Các loại lập trình web này chủ yếu đề cập đến các lĩnh vực nghề nghiệp khác nhau mà web developer có thể làm việc. Các lĩnh vực nghề nghiệp này đôi khi lại trùng lặp. Vì thế web developer thường sẽ thành thạo nhiều loại lập trình web.

1. Lập trình Front-end

Lập trình viên front-end làm việc ở phía khách hàng hoặc phía người dùng trang web. Chương trình và phần mềm là những gì mà người dùng nhìn thấy. Họ thiết kế và phát triển các khía cạnh trực quan bao gồm layout, navigation, đồ họa...

Công việc chính của họ là xây dựng các giao diện giúp người dùng đạt được mục tiêu. Đó là lý do tại sao họ thường tham gia vào việc trải nghiệm người dùng trong các dự án của họ.

Xem thêm list bài viết về lập trình front-end của 200Lab:

Frontend - 200Lab Blog
Tổng hợp các bài viết chia sẻ kỹ thuật lập trình về Frontend

2. Lập trình Back-end

Nếu front-end là những gì người dùng nhìn thấy, thì back-end là những gì họ không thấy. Các lập trình viên back-end làm việc trên máy chủ của trang web, chương trìnhphần mềm để đảm bảo mọi thứ hoạt động tốt ở phía sau.

Họ làm việc với các hệ thống như máy chủ, hệ điều hành, API, cơ sở dữ liệu và quản lý code bảo mật, nội dung và kiến trúc web (site architecture). Họ cộng tác với các lập trình viên front-end để đưa sản phẩm đến với người dùng.

Xem thêm list bài viết về lập trình back-end của 200Lab:

Backend - 200Lab Blog
Tổng hợp các bài viết chia sẻ kỹ thuật lập trình về Backend

3. Lập trình Full Stack

Lập trình viên Full Stack làm việc cả phần front-end và back-end của một trang web. Họ có thể tạo ra trang web, ứng dụng hoặc chương trình phần mềm từ đầu đến cuối. “Stack” đề cập đến các công nghệ xử lý các chức năng khác nhau trên cùng một trang web, như máy chủ, giao diện, v.v.

Các lập trình viên full-stack yêu cầu nhiều năm kinh nghiệm trong lĩnh vực. Vì thế vị trí công việc này được rất nhiều người săn đón. Kiến thức toàn diện giúp họ tối ưu hóa hiệu suất, tìm ra vấn đề trước khi chúng xảy ra và giúp các thành viên trong nhóm hiểu rõ các phần khác nhau của một dịch vụ web.

4. Lập trình web

Lập trình viên web có thể là lập trình viên front-end, back-end hoặc full-stack. Tuy nhiên, những chuyên gia này chuyên xây dựng các trang web, trái ngược với các app di động, phần mềm desktop hoặc trò chơi điện tử.

5. Lập trình Desktop

Các lập trình viên Desktop chuyên xây dựng các ứng dụng phần mềm chạy cục bộ trên thiết bị của bạn, thay vì qua Internet trong trình duyệt web. Đôi khi bộ kỹ năng của lập trình viên này trùng với lập trình viên web nếu app có thể chạy online và off.

6. Lập trình di động (mobile)

Các lập trình viên di động xây dựng các ứng dụng cho thiết bị di động như smartphones hoặc máy tính bảng. Mobile apps hoạt động khác nhiều so với các trang web và chương trình phần mềm khác. Do đó đòi hỏi một bộ kỹ năng phát triển và kiến thức riêng biệt về ngôn ngữ lập trình chuyên dụng.

7. Lập trình game

Các lập trình viên trò chơi chuyên viết code cho video games, bao gồm trò chơi console (Xbox, PlayStation, v.v.), PC games, và mobile games.

8. Lập trình nhúng

Các lập trình viên nhúng làm việc với tất cả phần cứng không phải là máy tính (cái mà hầu hết chúng ta tưởng tượng là “máy tính”, có bàn phím và màn hình). Chúng bao gồm giao diện điện tử, thiết bị tiêu dùng, thiết bị IoT, hệ thống real-time, v.v.

9. Lập trình Security

Lập trình viên Security thiết lập các phương pháp và qui trình để bảo mật chương trình phần mềm hoặc web. Họ thường hoạt động như những hacker có đạo đức, cố gắng hack các trang web để lộ ra các lỗ hổng bảo mật mà chứ không có định phá hoại. Họ cũng xây dựng các hệ thống phát hiện và loại bỏ các rủi ro bảo mật.

Bây giờ, chúng ta hãy đi sâu vào quá trình lập trình web.

Quá trình lập trình web

Quá trình tạo ra một trang web hoàn chỉnh không hề dễ dàng. Cách thức lập trình sẽ khác nhau dựa vào loại web, ngôn ngữ lập trình và nguồn tài nguyên.

Dưới đây là tổng quan ngắn gọn về quy trình lập trình web và giới thiệu về các ngôn ngữ phổ biến và CMS.

1. Lập kế hoạch.

Trước khi cầm bút hay đánh máy, bạn phải làm việc với nhóm và nhân viên khác trong tổ chức để phát triển kế hoạch cho trang web.

Dưới đây một số câu hỏi bạn cần xem xét:

  • Mục tiêu trang web là gì?
  • Đối tượng là ai và bạn muốn họ làm gì trên trang web?
  • Bạn đang xây dựng loại trang web nào? (ví dụ: thông tin cơ bản, thành viên, cửa hàng trực tuyến)
  • Bạn muốn publish nội dung nào và khối lượng (volume) bao nhiêu?
  • Mục đích của nội dung trên web là gì?
  • Bạn sẽ cấu trúc trang web như thế nào để trải nghiệm điều hướng tốt nhất?
  • Ngân sách của bạn là bao nhiêu?

Để trả lời các câu hỏi yêu cầu bạn phải giao tiếp với các team lập trình web, marketing và tài chính để xác định các đầu việc cần ưu tiên để đưa ra quyết định sáng suốt.

Bước đầu tiên khá đơn giản nhỉ? Như bạn biết, việc tạo ra roadmap lúc bắt đầu sẽ dễ hơn nhiều so với việc bắt tay vào thực hiện.

2. Tạo ra wireframe.

Tất cả các trang web đều bắt đầu từ một bản thiết kế. Các dev gọi đây là một wireframe. Nó sẽ giúp cho cả bạn và dev tìm ra định hướng và nơi để bắt đầu. Bạn có thể vẽ nó trên bảng trắng hoặc sử dụng công cụ như Invision, Slickplan hoặc Mindnode.

Wireframe là công cụ trực quan, giúp bạn hiểu text và hình ảnh sẽ nằm ở đâu trên từng trang web. Bạn có thể sử dụng các hộp trống và đoạn văn bản giả để biết cách nội dung hiển thị trên phần front-end.

3. Lập ra một sitemap.

Tiếp theo, đã đến lúc tạo ra sitemap (đừng nhầm với sitemap.XML, là tệp XML giúp các công cụ tìm kiếm thu thập thông tin và tìm thấy trang web của bạn). Giống như kế hoạch kinh doanh cung cấp cho nhà đầu tư insight về mục tiêu và sản phẩm. Sitemap cung cấp cho dev thông tin cần thiết để đáp ứng tầm nhìn (vision) của bạn. Bạn có thể tự lực hoặc làm việc với dev để tạo ra sitemap.

Dưới đây là một số câu hỏi để tự vấn bản thân khi lên kế hoạch cho trang web:

  • Bạn muốn những trang riêng lẻ như thế nào?
  • Nội dung nào sẽ có mặt trên các trang đó?
  • Làm thế nào để sắp xếp các trang đó vào các danh mục?
  • Bạn phân cấp các trang trong web của mình như thế nào, trang nào trước trang nào sau?
  • Các trang sẽ liên kết với nhau như thế nào?
  • Những trang và danh mục nào cần thiết cho trang web và trải nghiệm người dùng?
  • Những trang hoặc danh mục nào có thể bị xóa hoặc kết hợp với nhau?

Bạn nên tham khảo ý kiến của các nhóm khác trong tổ chức. Nếu bạn có đội SEO và chiến lược nội dung, đóng góp của họ sẽ rất quan trọng trong cấu trúc liên kết và phân loại các trang.

3. Viết code cho trang web .

Bước tiếp theo của quá trình lập trình web là viết code.

Các devsẽ sử dụng các ngôn ngữ mã hóa khác nhau cho front-end và back-end của trang web, cũng như cho các chức năng khác nhau của trang (chẳng hạn như thiết kế, tương tác, v.v.). Các ngôn ngữ phối hợp với nhau để xây dựng và chạy trang web của bạn.

4. Xây dựng back-end của trang web.

Viết code có thể là một trong những phần phức tạp của quá trình lập trình web. Bạn cũng phải xây dựng cấu trúc và thiết kế trang web back-end và front-end.

Hãy bắt đầu với back-end.

Back-end xử lý dữ liệu để kích hoạt chức năng trên front-end. Ví dụ như back-end của Facebook lưu trữ ảnh, còn front-end cho phép người khác xem chúng. Nó được tạo thành từ hai thành phần chính:

  • Cơ sở dữ liệu, chịu trách nhiệm lưu trữ, tổ chức và xử lý dữ liệu để có thể truy xuất dữ liệu theo yêu cầu của máy chủ.
  • Máy chủ, là phần cứng và phần mềm tạo nên máy tính của bạn. Máy chủ chịu trách nhiệm gửi, xử lý và nhận các yêu cầu dữ liệu. Chúng là trung gian giữa cơ sở dữ liệu và máy khách/trình duyệt. Trên thực tế, trình duyệt sẽ nói với máy chủ "Tôi cần thông tin này", và máy chủ sẽ biết cách lấy thông tin đó từ cơ sở dữ liệu và gửi đến máy khách.

Các thành phần này làm việc cùng nhau để xây dựng nền tảng cho mỗi trang web.

Đối với việc xây dựng trang web của bạn, backend developers sẽ thiết lập ba điều.

  • Logic code của bạn, là tập hợp quy tắc về cách trang web phản hồi các yêu cầu nhất định và cách các đối tượng của trang web tương tác.
  • Quản lý cơ sở dữ liệu của bạn, đó là cách trang web của bạn tổ chức, quản lý và truy xuất dữ liệu.
  • Cơ sở hạ tầng (infrastructure) của bạn, đó là cách trang web của bạn được lưu trữ. Lưu trữ trang web sẽ cấp cho bạn quyền kiểm soát tốt hơn. Nhưng nó đắt hơn nhiều và đòi hỏi việc duy trì sức khỏe và bảo mật máy chủ.

Với các thành phần và quyết định này, trang web của bạn sẽ sẵn sàng cho việc phát triển front-end.

Lưu ý: Back-end hơi quan trọng đối với việc lập trình web vì không phải lúc nào cũng cần back-end nếu bạn không lưu trữ bất kỳ dữ liệu nào. “Dữ liệu” trong ngữ cảnh này nghĩa là bất kỳ thông tin nào do người dùng nhập mà bạn cần lưu lại. Hãy tưởng tượng khi đăng nhập vào một trang web. Nếu không có back-end, làm sao họ có thể nhớ được thông tin đăng nhập của bạn? Hoặc bạn cài đặt profile của mình như thế nào? Để có được thông tin này, bạn cần đến back-end.

Ví dụ như: Facebook cần biết những người có mặt trong list friends của bạn, những sự kiện bạn đã tham gia, những post bạn đã tạo ra và hơn thế nữa. Đây là tất cả "dữ liệu" sống trong cơ sở dữ liệu. Nếu không có back-end với cơ sở dữ liệu, thì sẽ không có dữ liệu nào trong số đó có thể truy cập được.

Mặt khác, một trang web chỉ thuần cung cấp thông tin và không yêu cầu người dùng nhập bất kỳ dữ liệu nào sẽ không cần phần back-end.

Vì vậy, nếu không có dữ liệu, bạn không nhất thiết phải phát triển back-end. Nhưng điều đó không có nghĩa rằng bạn không nên học những điều cơ bản liên quan đến back-end. Bạn sẽ không biết khi nào bạn dùng đến chúng cả.

5. Xây dựng front-end của trang web.

Nếu bạn đã từng say mê thiết kế web hoặc chơi với một trang web trong WordPress, Squarespace hoặc Google Sites. Bạn đã chạm vào lập trình web front-end rồi đấy.

Nội dung front-end rất quan trọng - đó là những gì người truy cập, khách hàng và người dùng của bạn nhìn thấy và cách họ sẽ sử dụng trang web của bạn.

Lập trình front-end (hoặc client-side) bao gồm sự kết hợp giữa JavaScript, HTML CSS. Nó cũng kiểm soát các thành phần như kiểu chữ, phông chữ, điều hướng (navigation), định vị cũng như khả năng tương thích và phản hồi của trình duyệt. Phần này phản ánh nhiều về tầm nhìn trang web và những gì bạn đưa vào wireframe.

6. (Không bắt buộc) Làm việc với CMS.

Tại sao người ta lại chọn CMS thay vì tự viết code? Đúng là CMS kém linh hoạt và ít quyền kiểm soát hơn đối với front-end. Tuy nhiên, CMS dễ sử dụng hơn (viết ít code hơn) và nó thường có các công cụ để lưu trữ trang web, lưu trữ thông tin người dùng, tạo blog, xuất bản landing pages, thu hút khách hàng tiềm năng và thậm chí tạo danh sách email. Nhờ vậy, bạn có thể dễ dàng tạo ra trang web của riêng mình, với ít công sức hơn.

Các tuỳ chọn CMS thường bao gồm các plugin không cần viết back-end. Ví dụ: có các plugin WordPress dành cho eCommerce. Vì thế bạn không cần xây dựng back-end phức tạp để tính phí (charge) thẻ của khách hàng. Bạn chỉ có thể sử dụng plugin hiện có và không cần xử lý databases và code phía máy chủ.

Các hệ thống quản lý nội dung (content management systems) phổ biến bao gồm HubSpot, Joomla, Magento và WordPress - chiếm hơn 65% thị phần. (Trong trường hợp này, chúng ta đang nói về phần mềm WordPress mã nguồn mở, không phải trình tạo trang web WordPress.)

7. Có được một tên miền.

Lúc này, trang web của bạn sẽ có địa chỉ IP. Nó cũng cần một tên miền, một tên trang web dễ nhớ mà người truy cập có thể nhanh chóng tìm ra trang web của bạn.

Có lẽ bạn đã nghe nói về các trang web như GoDaddyHover. Các dịch vụ này giúp bạn mua tên miền và đăng ký với ICANN (Internet Corporation for Assigned Names and Numbers). Hầu hết các đăng ký miền có hiệu lực trong một năm trước khi bắt buộc gia hạn.

Các nhà xây dựng trang web và dịch vụ lưu trữ web, như WordPressSquarespace, cũng cho phép bạn mua tên miền.

8. Ra mắt trang web của bạn.

Khi đã thiết lập tên miền và liên kết nó với máy chủ, bạn gần như đã sẵn sàng để ra mắt web của bạn.

Tuy nhiên đừng vội, bạn vẫn cần kiểm tra một số điều trước khi ra mắt chính thức. Chúng bao gồm việc kiểm tra trang web xem có bất kỳ trục trặc nào không, tối ưu hóa cho SEO và kiểm tra lần cuối trước khi “bật công tắc” và đưa trang web vào hoạt động

Lời kết:

Qua bài viết trên, 200Lab đã cung cấp những kiến thức cơ bản liên quan đến lập trình web. Đọc đến đây thì chắc hẳn bạn cũng nắm được khái niệm và các bước lập trình 1 trang web. Mong rằng bài viết trên đã giải đáp được những vướng mắc trong lòng bạn.

Nghề lập trình web có mức lương khá hấp dẫn nhưng mức độ cạnh tranh khá cao. Vậy nên khi đã theo đuổi công việc này, bạn phải cố gắng học hỏi, trau dồi không ngừng để nâng cao kiến thức và tay nghề chuyên môn của mình. Ngoài những kiến thức khô khan, ngọn lửa đam mê chính là thứ thổi bừng sức sống, tiếp thêm năng lượng để bạn đủ sức theo đuổi giấc mơ của mình. Khi thực sự đam mê với nghề, việc học những kiến thức mới sẽ trở nên vô cùng thú vị và dễ dàng.

Cảm ơn bạn đã đọc hết bài viết của 200Lab. Chúc bạn sớm đạt được mục tiêu đề ra và thành công trên con đường mình đã chọn nhé.

You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.