logo
Hỗ trợ: 24/7
Điện thoại: 098 984 8886
Email: info@thuonghieuweb.com

10 bài học để trở thành một chuyên gia lập trình web

5/5 1390 votes
updated on 2020-11-22

Lập trình web là một công việc lý thú và hấp dẫn đối với các bạn trẻ. Tuy nhiên việc học lập trình web không hề đơn giản. Thương Hiệu Web xin trân trọng giới thiệu 10 bài học bổ ích nhất, thực hành nhất với hi vọng là các bạn sẽ tìm ra một lối đi đơn giản nhất để trở thành chuyên gia lập trình web.

Bài 1: Các khái niệm và công cụ


Mục tiêu của bài học này là giúp các bạn bắt đầu từ số không, kể cả những bạn chưa biết gì về lập trình web cũng có thể hiểu được và dần dần trở thành một coder chuyên nghiệp. Vì vậy nếu bạn nào đã học qua lập trình web và biết về các công cụ thiết kế, phát triển web thì có thể bỏ qua bài viết này. Tuy nhiên tôi khuyên các bạn nên đọc lướt qua để chúng ta có những đồng nhất về định nghĩa, khái niệm cũng như các công cụ thực hành để sau này dễ dàng theo sát các ví dụ trong các bài học tiếp sau. Bài học gồm 3 phần, phần 1 là các khái niệm, phần 2 giới thiệu các công cụ mà bạn cần có trên máy tính của mình để thực hành và phần 3 sẽ hướng dẫn bạn làm 1 trang web đầu tiên.

Các khái niệm

Website hoạt động như thế nào?

Hãy hình dung khi bạn định vào một trang web nào đó, bạn cần có một máy tính với một phần mềm được gọi là browser mà các bạn hay dùng như firefox, chrome trên hệ điều hành windows hay safari trên nền tảng apple. ở mỗi browser này sẽ có một dòng gọi là URL, bạn gõ tên website vào URL đó rồi enter, thế là trang web hiện ra. Vậy những gì diễn ra sau khi bạn enter ở cuối dòng URL? Có rất nhiều điều xảy ra đầu tiên là Browser phải thiết lập kết nối đến máy chủ chứa trang web đó, sau đó nó cho máy chủ biết tên trang web mà nó cần đọc dựa trên URL mà bạn gõ vào. Máy chủ sẽ gửi đến browser một trang web với 2 thành phần 1 là NỘI DUNG và 2 là mã HTLM. Browser căn cứ vào mã HTML để trình bày một trang web như cái mà bạn nhìn thấy trên màn hình, trong đó mã HTML quy định chỗ nào thì mầu xanh, chỗ nào thì mầu đỏ, chỗ nào chữ to, chỗ nào chữ nhỏ, chỗ nào có ảnh, chỗ nào có video, chỗ nào có link đến một trang web khác.... đó chính là nguồn cơn cho tên gọi HTML nghĩa là Hyper Text Marker Language (Ngôn ngữ đánh dấu siêu văn bản).

Ngôn ngữ HTML làm việc như thế nào?

HTML làm việc bằng các thẻ đánh dấu ví dụ trong đoạn text: "tôi là Thương Hiệu Web" nếu như tôi muốn một browser nhận ra và cho chữ Thương Hiệu Web in đậm lên trong khi các đoạn text khác không thay đổi mầu thì tôi phải đánh dấu đoạn text Thương Hiệu Web bằng 1 thẻ mở và một thẻ đóng như sau:




Khi đó nếu máy chủ web gửi về browser một trang web mà có dòng như trên thì browser sẽ hiển thị như sau:

tôi là Thương Hiệu Web

Tất nhiên browser sẽ chẳng hiển thị thẻ đóng thẻ mở ra làm gì vì người viếng thăm website đâu cần quan tâm đến các thẻ, họ chỉ quan tâm đến nội dung và cách trình bày nội dung đó mà thôi. Tóm lại một trang web do máy chủ gửi đến máy tính của người đọc sẽ có 2 thành phần, một là NỘI DUNG, là cái mà người đọc nhìn thấy và hai là MÃ HTML mà browser có thể hiểu để trình bày NỘI DUNG cho đúng ý của người lập trình web. Đến đây chắc các bạn đã hiểu là công việc của một người lập trình web là gì. Công việc đó là tạo ra các trang web với các mã HTML đúng chỗ, đúng lúc, còn công việc của một người quản trị website là nhập những nội dung cần hiển thị. Hai công việc tách bạch rất rõ. Bạn muốn làm công việc nào? Nếu muốn làm công việc lập trình web, hãy đọc tiếp. Còn nếu muốn trở thành một người quản trị web chuyên nghiệp, hãy dành thời gian đọc seri bài viết khác nhé.

PHP là gì?

Ban đầu khi web mới ra đời các chuyên gia lập trình web dùng một loại code thuần là HTML. Lúc đó thực ra chưa có khái niệm chuyên viên lập trình web mà thực ra là khái niệm nhân viên viết trang web. Một chuyên gia web sẽ vừa phải nhập nội dung sau đó gắn các mã thẻ HTML cho đúng ý của chủ trang web. Và lúc đó các trang web trên mạng đều là website tĩnh vì nội dung với code gắn cứng với nhau. Mỗi lần muốn thay đổi lại phải gọi chuyên gia viết web đến chỉnh sửa Tuy nhiên khi website phát triển lên, nôi dung web tăng nhanh và thay đổi hàng ngày, và lượng các chuyên gia viết web không đáp ứng nổi nhu cầu viết các trang web tĩnh nữa. Lúc này người ta mới phát minh ra các ngôn ngữ trung gian khác có nhiệm vụ là tự sinh ra các đoạn code HTML để sẵn đó, sau rồi mới nhập nội dung vào. Từ đó phân công lao động rõ ràng, chuyên gia lập trình thì ngồi viết các chương trình sinh web bằng các ngôn ngữ khó hơn như PHP, ASP, Java.... đề tạo ra các trang web "trống" sau đó chuyên gia nhập dữ liệu website thì bằng một công cụ nào đó, đưa các nội dung thô vào các trang web trên, kết hợp lại sẽ có 1 trang web mà nay thế này, mai thế khác tùy theo người nhập nội dung quyết định. Từ đó khái niệm web động ra đời. Và đến nay 90% các trang web trên mạng là động. Ví dụ điển hình nhất là trang tin tức, với trang tin này bạn sẽ thấy nó thay đổi hàng giờ, đó là do đội ngũ nhập tin bài, còn đội ngũ viết code cho trang web đó thì ngồi ở hậu trường xử lý các vấn đề kỹ thuật.

Như vậy chúng ta tạm hiểu PHP là một ngôn ngữ lập trình dùng để sinh ra các trang web có code HTML. Vậy PHP nằm ở đâu? và nó làm việc như thế nào? Xin thưa, PHP làm việc theo cơ chế nhúng. Có nghĩa là với một trang web tĩnh bất kỳ, nếu như bạn muốn phần nào là động thì chỉ việc chèn vào đó đoạn code PHP đặt trong hai ký hiệu script như hình vẽ sau:

php là gì

Lưu ý là PHP không làm việc ở phía browser, mà làm việc ở trên máy chủ. Trên mỗi máy chủ hỗ trợ PHP sẽ có một tiến trình nền miệt mài đọc các trang web do chuyên viên lập trình web để trên đó, nếu nó thấy là 1 trang web tĩnh, chỉ bao gồm mã HML, nó sẽ đơn giản là chuyển trang web đó đến browser yêu cầu trang web là xong nhiệm vụ. Nhưng nếu nó bắt gặp 1 trang web có cả mã nhúng PHP, nó sẽ phải làm thêm một công đoạn là đọc xem đoạn PHP đó nói gì, từ đó sinh ra một đoạn mã HTML theo đúng ý của đoạn mã PHP hay nói đúng hơn là theo ý của người lập trình PHP, và chèn ngược lại vào trang web đó trước khi gửi trang web đến với browser. Tất nhiên đã loại bỏ hết mã PHP rồi, vì browser không hiểu được PHP nói gì.

  quy-trinh-xu-ly-web-request

MySQL là gì?

Khi nội dung đã được động hóa qua cơ chế làm việc của PHP nêu trên, chúng sẽ không nằm trong trang web mà nằm ở một chỗ trung gian, được đánh số và quản lý nghiêm ngặt. Chỗ đó gọi là cơ sở dữ liệu. Có rất nhiều hệ quản trị cơ sở dữ liệu như SQL, MySQL, Oracle... và đều có thể làm việc với website, tuy nhiên PHP rất khoái MySQL vì cả hai đều là sản phẩm của mã nguồn mở, rất dễ dùng và quan trọng nhất là miễn phí.

Hãy hình dung vai trò của của cơ sở dữ liệu như sau. Trong một lớp có 40 học sinh, mỗi học sinh được đánh số từ 1 đến 40 và danh sách này nằm trong cặp của thày giáo, danh sách đó chính là cơ sở dữ liệu. Các học sinh là NỘI DUNG, còn thày giáo là PHP. Khi thầy muốn một bạn nào đó lên bảng làm bài thày chỉ cần mở danh sách và gọi theo số, bạn đó sẽ xuất hiện trên bục giảng, bục giảng chính là trang web mà máy chủ gửi tới cho browser là chúng ta, các thanh tra của sở giáo dục đến dự giờ.

Khó hiểu không các bạn? Ok tôi sẽ lấy ví dụ gần với web hơn, đó là trang tin tức VNexpress. Trang này có một vị trí rất đắc địa là home page và chỉ dùng để đưa các tin hot nhất. Lúc 9h bạn mở ra thấy có tin về cơn bão Haiyen. Đến 10h mở ra, chỗ đó đã bị thay bằng tin về họp quốc hội. Vậy cơn bão Haiyen hay họp quốc hội là các nội dung, dạng text hoặc hình ảnh. Nó sẽ được lưu ở trong cơ sở dữ liệu còn trang web VNexpress chắc chắn sẽ có một đoạn mã nhúng PHP hay ASP gì đó, đoạn mã này có nhiệm vụ lấy các nội dung mà nó cho là hot nhất trong cơ sở dữ liệu đưa lên trình bày ở trang web vnexpress và gửi đến browser nếu có yêu cầu.

Vẫn khó hiểu ư? OK, nếu vậy không cần hiểu nữa. Không cần hiểu kỹ về MySQL bạn vẫn có thể làm được web. chỉ cần hình dung thế này. MySQL là một chỗ nào đó để tống được các nội dung A, B, C vào đó và để PHP thích thì lôi thằng A, hay thằng B, hay thằng C ra đặt vào trang web và gửi về cho các độc giả.

 

Các công cụ cần thiết

OK now! Nếu bạn nào đọc xong phần trên mà vẫn còn nhiệt huyết, chúng ta có thể đi tiếp phần sau đây. Còn nếu bạn nào thấy choáng quá thì nên đi ngủ, ngày mai đọc lại đoạn trên thấy dễ tiêu hơn, ngày kia đọc tiếp cho nó tiêu hẳn rồi hãy đọc tiếp phần này bởi vì. Lý thuyết giúp soi đường cho thực tiễn. Nếu đã thấm nhuần các khái niệm bên trên thì mới biết tìm các công cụ gì để thực hành.

Để hoàn thành 10 bài học này, bạn cần chuẩn bị một máy tính cấu hình vừa phải, trên đó cài win7 hoặc windows XP là ổn sau đó bạn download các phần mềm dưới đây và cài lên máy của mình. Mục đích là gì: trước hết để biến máy của bạn thành một webserver, để bạn vừa đá bóng vừa thổi còi. Nghĩa là browser và web server cùng ở một chỗ, khi đó sẽ thuận tiện cho bạn viết web tĩnh hay động đều có thể test tại chỗ được.

Mục đích thứ 2 là biến webserver của bạn thành một máy chủ web hỗ trợ PHP và có sẵn hệ quản trị cơ sở dữ liệu MySQL để thực hành web động. Mục đích 1 và 2 được giải quyết bằng Wamp server

Mục đích thứ 3 là để có một công cụ có thể soạn thảo các trang web tĩnh cũng như động một cách thoải mái, cộng cụ này có tên là Dreamwaver.

Mục đích thứ 4: là có một bàn trang điểm cho các ảnh trước khi đưa lên website. Vấn đề về ảnh tuy đơn giản nhưng nếu bạn coi thường nó, bạn sẽ gặp rất nhiều rắc rối về sau. Hai nữa là bạn cần tập thói quen chỉn chu, kiên nhẫn khi xử lý ảnh thì mới có thể tạo ra những website vừa mắt được. Để xử lý ảnh nếu bạn nào có Win 7 rồi thì có thể dùng Paint sẵn có trong win 7, còn nếu bạn nào dùng XP thì nên download thêm một bản Pickpick dùng với rất nhiều tính năng hữu ích.

Dưới đây là link để down load và hướng dẫn cài đặt các phần mềm này. Lưu ý là các phần mềm này đều có nhiều bản update liên tục ra, tuy nhiên để demo tôi dùng các phiên bản khá cũ, vì nó chạy ổn định, ít hoa mắt, phù hợp với các bạn mới nhập môn. Bạn nào đã từng sử dụng các công cụ này thành thạo rồi thì cứ tùy ý dùng các phiên bản mới nhất mà mình thấy phù hợp là được.

    Wampserver 2.0 tải về ở đây
    Dreamwaver CS4 tải về ở đây hoặc mua đĩa ở Tạ Quang Bửu nếu thấy download lâu quá
    Pickpick  download ở đây

Đoạn code đầu tiên

Nào, bây giờ sau khi cài đặt xogn các công cụ trên, chúng ta sẽ bắt tay vào viết một trang web đầu tiên. Hãy mở Dreamwaver ra, chọn New File (Ctrl-N) rồi chọn kiểu file là HTML, sau đó bấm creat. Bạn sẽ thấy khung soạn thảo của Dreamwaver, với một số code HTML đặt sẵn, bạn sửa file đó như sau:

Sau đó các bạn save file nói trên với tên gọi my-first-webpage.html và để ngay trên destop cũng được, sau đó đóng dreamwave lại và tìm file đó trên desktop, double-click vào nó, bạn sẽ thấy firefox mở file này ra và xuất hiện dòng chữ "Xin chào, đây là đoạn code HTML đầu tiên của tôi" Nếu nó không làm việc các bạn có thể download file này về để so sánh và tìm hiểu nguyên nhân tại sao.


Giải thích:

Trong file trên chúng ta thấy các thẻ mở và đóng html, head, body. Thẻ html cho biết đây là một file được đánh dấu bằng các thẻ html. Thẻ head cho biết đây là phần đầu file, các thông tin ở đầu file hầu hết là không hiển thị trong browser, mà có tác dụng cho việc khai báo các thông tin của trang, các scrip hoặc css. Lưu ý các thông tin ở trong thẻ mở và thẻ đóng head có tác dụng rất nhiều cho việc SEO sau này. Vì thế đừng nên coi thường và bỏ qua nó. Ví dụ thông tin giữa 2 thẻ mở và đóng title sẽ hiển thị trong browser cho biết tiêu đề trang web là gì và Google rất coi trọng thông tin này.  Còn thẻ body cho browser biết bắt đầu từ đây là nội dung chính của trang web.

Ngoài ra chúng ta thấy thẻ meta không có thẻ mở và đóng như thông lệ. Có rất nhiều thẻ thuộc dạng này được gọi là thẻ tự đóng vì tính chất hiển thị của nó.

Danh sách và vai trò của các thẻ, các bạn tham khảo tại http://www.w3schools.com

Xem tiếp bài học 2:  Các thẻ HTML




   
 
Có thể bạn muốn xem thêm....

Những điều cần biết khi xây dựng website

Xây dựng một website không đơn giản chỉ là một gian hàng hay một tờ rơi. Bạn cần phải làm mọi cách để website của mình hướng tới khách hàng, và quan trọng hơn cả, là làm sao để nội dung của bạn có sức lan tỏa nhanh chóng trong môi trường mạng từ đó lôi kéo khách hàng đến với website của bạn

Xem chi tiết

Những điều cần biết về dịch vụ email với tên miền riêng

Email tên miền riêng là email gắn với tên miền của doanh nghiệp kiểu như tennhanvien@tencongty.com. Email tên miền riêng sẽ tạo sự chuyên nghiệp và tin cậy khi giao dịch, đồng thời có thể cấp phát cho nhân viên khi mới đi làm, thu hồi lại khi nhân viên đó thôi việc và lưu trữ được mọi giao dịch trên email mà không sợ nhân viên đổi mật khẩu, mang theo hòm thư khi rời công ty...

Xem chi tiết
Đội ngũ lập trình viên, kỹ thuật viên và seo-er của Thương Hiệu Web cam kết

Hỗ trợ 24/7

Hỗ trợ khách hàng 24 giờ 1 ngày, 7 ngày 1 tuần qua điện thoại, email và chat online

Hoàn tiền 100%

Trong thời gian 45 ngày sử dụng dịch vụ, nếu quý khách không hài lòng!

Cam kết uptime 99.99%

Nếu dịch vụ của quý khách bị gián đoạn, chúng tôi sẽ cộng thêm 1 tháng sử dụng

KHÁCH HÀNG NÓI VỀ CHÚNG TÔI

Một đơn vị xây dựng web tận tâm và chuyên nghiệp!

"Thương Hiệu Web là đơn vị thiết kế website có năng lực, tôn trọng và có trách nhiệm với khách hàng, đặt mình vào vị trí khách hàng để mang lại cho khách hàng nhiều giá trị từ chính dịch vụ của mình. Với tôi, Thương Hiệu Web là một lựa chọn hợp lý!" Chị Nguyễn Phượng, TP kinh doanh, Công Ty Cổ Phần Quản Lý Công Trình Đô Thị Hải Dương.

Xem bình luận trên FB
Sitemap Điều khoản sử dụng Chính sách riêng tư
Bản quyền thuộc về công ty cổ phần truyền thông số VDATA
Tầng 2, tòa nhà 71 Hoàng Cầu, Đống Đa, Hà Nội
Điện thoại: (04) 3990 9643 - Email: info@vdata.com.vn
Giấy chứng nhận ĐKKD số: 0102766780, do Sở KHĐT Tp Hà Nội cấp ngày 28/04/2009

Online