Hành Trang Cần Thiết Cho Lập Trình Web

Bạn đam mê Lập trình web, nhưng không biết bắt đầu từ đâu? Lập trình web gồm những gì, và cần phải chuẩn bị gì khi bắt đầu học tập và làm việc. Nếu bạn là người mới bắt đầu tìm hiểu về Lập Trình Web, bài viết này là dành cho bạn.

Mục đích khi bạn học lập trình là gì?


Đây ắt hẳn là một câu hỏi đã được trả lời khi bạn lựa chọn ngành nghề mà mình theo học. Để có thể thành công, bạn cần phải bắt đầu bằng “sự kết thúc trong tâm trí” trước đã (7 thói quen của người thành đạt – Stephen R.Covey).

Nghĩa là khi bạn biết được con đường mà mình đã chọn lựa trong tương lai, bạn cần phải cố gắng để có thể đạt được nó. Trước khi bắt đầu học lập trình web, bạn nên tự hỏi bản thân mình sẽ làm được gì sau khi học xong? Từ đó xác định chính xác mục tiêu, lựa chọn một ngôn ngữ mình muốn theo học, và tiếp cận với lập trình web dựa trên mục tiêu của bạn.

Khi đọc bài viết này, hãy luôn nhớ mục tiêu trong đầu và ra quyết định lựa chọn: ngôn ngữ nào, Front-Endhay Back-End thậm chí là làm cách nào để có thể học được nó.


Bài viết dưới đây sẽ cung cấp những kiến thức căn bản mà một người lập trình web cần phải có, từ đó đưa ra định hướng của bản thân.

.


NHỮNG NỘI DUNG CHÍNH


Phần 1: Tổng quan về Lập Trình Web

Những kiến thức cơ bản về web, các ngôn ngữ lập trình, frameworks

Phần 2: Các kĩ năng Front-End

Thiết kế giao diện, Đa nền tảng (Responsive design), tools hỗ trợ

Phần 3: Các kĩ năng Back-End

Ngôn ngữ sử dụng, ngôn ngữ Cơ sở dữ liệu, Máy Chủ.

.

.


Phần 1: Tổng quan về Lập Trình Web


1. Website Và Các Khái Niệm Liên Quan


– Website: còn gọi là trang web hoặc trang mạng, là một tập hợp trang web, thường chỉ nằm trong một tên miền hoặc tên miền phụ trên World Wide Web của Internet. Một trang web là tập tin HTML hoặc XHTML có thể truy nhập dùng giao thức HTTP.


– Có 2 loại website:
+ Website tĩnh: Website tĩnh là website mà người quản trị (những người không phải là lập trình viên) không thể tùy ý thay đổi nội dung và hình ảnh mà phải cần kiến thức về HTML cơ bản. Website tĩnh được viết hoàn toàn dựa trên nền tảng HTML CSS và thêm các hiệu ứng từ Javascript.

+ Website động: Website động là website được viết kèm theo một bộ công cụ quản trị để tùy biến nội dung dành cho webmaster (người quản trị) có thể dễ dàng thay đổi nội dung, hình ảnh. Website động được thiết kế bởi các lập trình viên để làm sao cho phép website có thể thay đổi được nội dung thường xuyên. Một số công nghệ, ngôn ngữ để xây dựng website động bao gồm PHP, ASP.NET, Java.



– Một website bắt buộc phải có 3 thành phần chính:
+ Tên miền (Domain): Tên miền đóng vai trò quan trọng nhất trong các thành phần cơ bản của một website. Đây chính là địa chỉ website trên internet, giúp người dùng có thể truy cập được website đó. Là tên định danh duy nhất. Các domain thông dụng hiện nay như: .com, .vn, .org, .net, …
+ Web Hosting (Hosting): Web Hosting là các máy chủ chạy trên internet, người dùng sẽ phải thuê các Web Hosting này và đặt các dữ liệu trang web trên đó, để người khác có thể truy cập trang web.
+ Source Code: Source code hay còn gọi là mã nguồn của website là nơi hiển thị nội dung, chức năng để cho người dùng xem, đọc và truy cập. Source Code có thể phức tạp hoặc đơn giản, nhiều hay ít câu lệnh đều phụ thuộc vào chức năng và yêu cầu của website. Source code có thể được viết bởi nhiều ngôn ngữ lập trình khác nhau.


2. Các Trình Soạn Thảo Code Phổ Biến


Nếu bạn chỉ làm việc chủ yếu với HTML, CSS, Javascript, bạn hoàn toàn có thể lập trình bằng Windows Notepad hay Text Edit trên Mac OS nếu bạn muốn. Nhưng như thế thì có vẻ không được chuyên nghiệp lắm.

Dưới đây là những trình soạn thảo phổ biến mà một người lập trình web thường sử dụng.


– Sublime text

Sublime Text 3 đã được nhiều người dùng biết đến là trình soạn thảo code chuyên nghiệp với khả năng hỗ trợ hầu hết các ngôn ngữ lập trình. So với phần mềm Notepad++ quen thuộc thì ứng dụng này có vẻ mang đến nhiều ưu việt hơn, chất lượng cũng như trải nghiệm người dùng tốt hơn. Trên thực tế thì những người đã cùng sử dụng Notepad++ và Sublime Text 3 đều cảm thấy Sublime Text 3 tốt hơn rất nhiều.


– Dreamweaver

Ngoài những tính năng kéo thả để xây dựng trang web, Dreamweaver còn cung cấp một môi trường viết mã với đầy đủ chức năng bao gồm các công cụ viết mã (như tô màu mã, bổ sung thẻ tag, thanh công cụ mã), hỗ trợ các ngôn ngữ lập trình thông dụng HTML, CSS, Javascript, ASP VBScript, PHP hay XML. Nếu muốn xây dựng các ứng dụng web động chạy trên công nghệ máy chủ ASP.NET, ASP, JSP và PHP thì Dreamweaver hoàn toàn có thể đáp ứng được các dự án lớn này.


– Atom

Atom là một trình soạn thảo văn bản (và mã nguồn) miễn phí, mã nguồn mở, hỗ trợ các hệ điều hành Linux, Mac OS, Windows. Nó hỗ trợ các plugin để lập trình với NodeJS và nhúng Git-Control, phần mềm này được phát triển bởi GitHub.
Atom được đánh giá là phần mềm soạn thảo văn bản (và mã nguồn) có giao diện hiện đại, dễ sử dụng và có các tính năng vượt trội so với các phần mềm tương tự.
Các ngôn ngữ được hỗ trợ bởi Atom: C/C++, C#, Clojure, CSS, CoffeeScript, GitHub Flavored Markdown, Go, Git, HTML, JavaScript, Java, JSON, Julia, Less, Make, Mustache, Objective-C, PHP, Perl, Property List (Apple), Python, Ruby on Rails, Ruby, Sass, Shell script, Scala, SQL, TOML, XML, YAML.


3. Version Control – Quản Lý Phiên Bản


Sau khi chọn được trình soạn thảo phù hợp thì bắt tay vào việc code nào!

Tuy nhiên bạn lại vô tình gây ra lỗi trong những dòng code của mình, và mặc cho việc bạn có Ctrl-Z bao nhiêu lần thì code bạn vẫn lỗi, bạn sẽ làm gì trong trường hợp này?

Hệ thống quản lý phiên bản – Version Control System là một hệ thống ghi nhận và lưu lại sự thay đổi của các file theo thời gian, từ hệ thống đó một file có thể phục hồi quay về trạng thái (phiên bản) ở một thời điểm trước đó. Ngoài ra bạn có thể theo dõi sự thay đổi của một file theo thời gian, ai đã thay đổi, thay đổi vào lúc nào,… Có nhiều hệ thống VCS mà bạn có thể chọn sử dụng như: Concurrent Versions System, Subversion, Git, Mercurial.


Giới thiệu hệ thống VCS Git



+ Giới thiệu: Git chính là hệ thống quản lý phiên bản phân tán (DVCS), với các ưu điểm: tốc độ, đơn giản, phân tán, phù hợp với dự án lớn nhỏ.

+ Cách lưu dữ liệu của Git: Git lưu dữ liệu dưới dạng một loạt “ảnh chụp” (snapshot) của một tập hợp các file, có nghĩa là mỗi khi bạn commit (lưu lại) thì Git tiến hành chụp lại hệ thống các file thời điểm đó và lưu giữ một tham chiếu đến ảnh chụp dó, nhớ rằng các file không có thay đổi thì Git sẽ không lưu lại file đó lần nữa mà chỉ có một liên kết đến file đã lưu ở lần trước.

+ Hầu hết mọi thao tác với Git diễn ra ở Local: Vì mỗi máy trạm có một Database Git nên hầu hết thao tác với Git như thêm mới, xem lại lịch sử,… đều không cần đến Server (trừ cần commit lên Server, lấy về một file do người khác đã cập nhật).

+Ba trạng thái với Git:Với Git, các file của bạn có thể nằm ở một trong ba trạng thái:
*COMMITTED: dữ liệu đã lưu trữ an toàn trong Database (local).
*MODIFIED: dữ liệu (file) có thay đổi nhưng chưa lưu trong Database (local).
*STAGED: đánh dấu các file sửa đổi modified chuẩn bị được commit tiếp theo.



4. Các Trang Học Lập Trình Web

Tự học luôn là điều quan trọng nhất đối với người lập trình viên, bạn có thể tham khảo các trang dạy học miễn phí sau đây để trao dồi thêm kiến thức cho bản thân.


Vậy là bạn đã trang bị đủ kiến thức cơ bản để bắt đầu rồi đó. Bây giờ, hãy xem những kiến thức cần chuẩn bị ngay thôi!

Phần 2: Các kĩ năng Front-End


Sau khi thông thạo những kiến thức cơ bản về HTML, CSS và Javascript, bạn có thể lựa chọn kĩ năng Front-End để làm việc. Front-End là phần tương tác với người dùng, chịu trách nhiệm cho giao diện của một trang web và kiến trúc những trải nghiệm của người dùng. Mọi thứ bạn nhìn thấy khi tương tác với website, màu chữ, thanh menu, chuyển hướng,… đều là việc của người lập trình Front-End.

Có thể tưởng tượng, một lập trình viên Front-End sẽ phải thiết kế nội thất của một ngôi nhà đã được xây dựng bởi các lập trình viên Back-End. Các phong cách trang trí được quyết định bởi chủ nhà.



Nói về cả hai nhóm lập trình viên Front-End và Back-End “Các lập trình viên làm việc trên Front-End đôi khi hào hứng nhiều hơn về những gì họ làm bởi vì họ thực sự có thể tận dụng khả năng sáng tạo của mình.” (Theo Greg Matranga, Giám đốc tiếp thị sản phẩm tại Apptix).


Responsive design – kiến thức bắt buộc trong thời đại smartphone



Khi Smartphone và dữ liệu di động vẫn chưa xuất hiện. Làm một website, bạn chỉ phải suy nghĩ về cách chúng hiển thị trên máy tính như thế nào. Tuy nhiên hiện nay, số lượng người dùng smartphone tăng với con số chóng mặt. Vì vậy website cần phải hoạt động và nhìn ổn định trên mọi thiết bị, dù là những màn hình nhỏ nhất.

Kĩ năng này gọi là responsive design (“tùy biến” trên mọi loại thiết bị hiển thị).

Để xây dựng một website có thể responsive cần chuẩn bị từ bước lên kế hoạch trong khâu thiết kế. Bạn phải cân nhắc mọi thứ hiển thị như thế nào trên tất cả thiết bị. Tới khâu lập trình, bạn phải sử dụng media queries (chính là @media) để điều khiển các thuộc tính CSS được sử dụng như thế nào tùy thuộc vào độ rộng màn hình cụ thể.


Frameworks


Việc viết code CSS cho một trang web responsive tốn rất nhiều thời gian và công sức.

Nếu bạn không thể dành nhiều thời gian cho nó, hãy sử dụng một framework hỗ trợ responsive như Bootstrap hay Zurb Foundation.

Sức mạnh của các framework này là nó đã hỗ trợ sẵn các code CSS và Javascript tùy biến. Các thành phần như headlines và buttons đã được viết những đoạn code tùy biến phù hợp. Chúng cũng đi kèm các thành phần Javascript khác như cửa sổ popup dạng modal và thanh điều hướng.

Sử dụng các công nghệ đã được đảm bảo sẽ giúp bạn xây dựng website dễ dàng hơn. Điều duy nhất bạn cần lưu ý là không nên phụ thuộc quá nhiều vào các frameworks.


Các công cụ hỗ trợ cài thêm các gói packages


Khi sử dụng các Build Tool, ta cần tải về các gói hỗ trợ hay packages. Ta có thể sử dụng các tool như npm (Node Package Manager), Bower, hay Yarn. Đây là những công cụ cho phép bạn cài đặt các packages trên máy tính chỉ bằng cách gõ các dòng lệnh trong cửa sổ command line. Hiểu đơn giản thì chúng là những tools giúp bạn tải về tools khác.

Ba ông lớn trong Javascript framework: Angular, React, Vue


Hiện tại, React có số lượng lập trình viên sử dụng và yêu quý nhiều nhất, theo sau là Angular. Angular có vẻ không còn thú vị và được nhiều người muốn tái sử dụng nữa. Vue có số lượng người sử dụng ít hơn, nhưng lại dẫn đầu trong công nghệ các lập trình viên muốn thử trong tương lai nhiều nhất. Có thể đoán trước được Vue sẽ là một tay chơi lớn trong vài năm tới. Tuy nhiên tôi nghĩ rằng bộ ba này vẫn sẽ tồn tại vững chắc trong tương lai, ít nhất là trong vài năm tới.

Phần 3: Các kĩ năng Back-End


Back-End Developer là ai?


Nếu như Front-End tạo nên vẻ đẹp của website thì Back-End chịu trách nhiệm xử lý các công việc ẩn phía sau, giúp cho hệ thống hoạt động trơn tru. Dữ liệu của người dùng, thuật toán phân tích.. đều nằm ở Back-End.


Lấy ví dụ, sau khi bạn nhập email, mật khẩu trên trang đăng nhập Facebook và nhấn nút đăng nhập, để xử lý quá trình đăng nhập thì Back-End sẽ lấy email và mật khẩu của bạn đem so trong cơ sở dữ liệu xem có khớp hay không, nếu khớp thì sẽ chuyển hướng sang trang chủ với tài khoản của bạn, nếu sai mật khẩu hoặc tên đăng nhập thì hệ thống sẽ báo lỗi lên cho người dùng.

Khi bạn post 1 status, để status ấy được lưu trữ thì cần Back-End, để status ấy lưu những react (Love, Angry, Wow, Haha,… ) cũng cần Back-End.

Back-End Developer là người quyết định các website được vận hành.



Kỹ năng Back-End


Để trở thành Back-End developer thì bạn cần biết ngôn ít nhất một ngôn ngữ lập trình cũng như biết cách thao tác với cơ sở dữ liệu:
– Một số ngôn ngữ lập trình Back-End: PHP, C#, Java, Python, Ruby,… và các Framwork của chúng hỗ trợ việc lập trình nhanh chóng và dễ dàng hơn: ASP.NET MVC, Spring, Django, Rail,…
– Kiến thức về database SQL: SQL Server, MySQL,.. Gần đây cũng có sự xuất hiện của một số database NoSQL: MongoDB, CouchDB, Terastore,…
– Kiến thức về web nói chung, cách viết web service, cách đăng nhập và phân quyền.
– Kiến thức về 1 số CMS: WordPress, Joomla, Umbraco,…

Kiến thức phần Back-End rất rộng và phức tạp, hiện nay có rất nhiều ngôn ngữ lập trình hỗ trợ lập trình Back-End, bạn nên chọn từ 2-3 ngôn ngữ để học, tránh “ tẩu hỏa nhập ma”. Back-End developer có thể trau dồi kiến thức để leo lên vị trí System Analyst hoặc Software Architecture.
Sau này , bạn cũng có thể học cả Front-End và Back-End để làm Full Stack Developer. Full Stack Developer là người vừa có óc thẩm mĩ để thiết kế giao diện, vừa có tư duy logic tốt. Các lập trình viên full stack làm việc giống các lập trình viên Back-End ở phía máy chủ, họ cũng thành thạo các ngôn ngữ Front-End để điều khiển nội dung trông như phía nào ở giao diện trang web. Họ là những người đa năng.

Để trở thành Full Stack Developer thì bạn cần thông thạo các skill sau:



“Nhất nghệ tinh nhất thân vinh”. Bạn nên thử học cả Front-End và Back-End, sẽ biết được mình thích hợp với mảng nào, tuy nhiên chỉ nên chuyên theo 1 hướng, thành thạo, giỏi 1 hướng còn hơn cái gì cũng biết mà lở dở lương ương, không đến nơi đến chốn. Nếu có khả năng, bạn có thể làm Full Stack.

Chúc các bạn thành công!

Write a Comment

Your email address will not be published. Required fields are marked *