Đồ án tốt nghiệp ngành cntt đề tài xây dưng website học tiếng anh

GIỚI THIỆU

Tầm quan trọng của tiếng anh

Tiếng Anh đã trở thành ngôn ngữ toàn cầu, được chọn làm phương tiện giao tiếp chính giữa hàng trăm ngôn ngữ khác nhau Theo Wikipedia, có 53 quốc gia công nhận tiếng Anh là ngôn ngữ chính thức Trong các sự kiện quốc tế như Olympic và tại các tổ chức toàn cầu cũng như công ty đa quốc gia, tiếng Anh được sử dụng như ngôn ngữ chung, giúp mọi người dễ dàng hiểu nhau hơn.

Nhà tuyển dụng ưu tiên ứng viên có kỹ năng tiếng Anh tốt, vì điều này ảnh hưởng đến khả năng làm việc trong môi trường quốc tế Khi tốt nghiệp và tìm kiếm việc làm tại các công ty uy tín với mức lương hấp dẫn, yêu cầu quan trọng mà nhà tuyển dụng đặt ra là khả năng sử dụng tiếng Anh.

Nếu bạn làm việc cho một công ty Nhật Bản hoặc bất kỳ công ty đa quốc gia nào, việc thành thạo tiếng Anh sẽ giúp bạn trở thành ứng viên ưu tiên.

Lý do chọn đề tài nghiên cứu

Ngày nay, internet đã trở thành xu thế chủ đạo, ảnh hưởng đến mọi khía cạnh của cuộc sống Việc học tập trở nên thuận tiện hơn, đặc biệt là việc học tiếng Anh trực tuyến, đáp ứng nhu cầu thiết thực của sinh viên Việt Nam.

Để bắt kịp xu hướng học tập trực tuyến, tôi đã lên kế hoạch xây dựng một website học tiếng Anh Tuy nhiên, với sự phát triển mạnh mẽ của internet, có rất nhiều website học tập trực tuyến ra đời, trong đó có các trang học tiếng Anh Hiện nay, tại Việt Nam, có nhiều website học tiếng Anh dành cho người Việt như tienganhmoingay.com và mshoagiaotiep.com.

Để có một lộ trình học tập cụ thể và tiếp cận các bài giảng chất lượng từ các website, người dùng cần đăng ký tài khoản và trả một khoản phí nhất định Hơn nữa, việc học các kỹ năng mềm như luyện nói và luyện nghe cũng gặp nhiều khó khăn.

Nhằm đáp ứng nhu cầu học Tiếng Anh của mọi người, đặc biệt là những ai chưa biết bắt đầu từ đâu, tôi sẽ triển khai một website học Tiếng Anh trực tuyến.

Điểm khác biệt so với các Website khác

Những điểm khác biệt so với các Website học tiếng anh khác là:

Người dùng có thể học hoàn toàn miễn phí mà không cần đăng nhập, trong khi việc tạo tài khoản và đăng nhập chỉ nhằm mở khóa thêm một số tính năng bổ sung của chương trình.

Hệ thống của chúng tôi nổi bật hơn so với các website khác nhờ vào việc áp dụng trí tuệ nhân tạo, cho phép nhận diện giọng nói của người dùng và chuyển đổi giọng nói đó thành văn bản một cách chính xác.

Văn bản sẽ được so sánh với từ gốc để đánh giá độ chính xác, từ đó đưa ra nhận xét cho người dùng về những điểm phát âm sai và cách nhấn mạnh âm đúng cách.

Trên nhiều website luyện nói, người dùng thường phải trả phí cao để giao tiếp với người nước ngoài và không có sự linh hoạt về thời gian Tuy nhiên, với website của chúng tôi, mọi thứ đều do người dùng chủ động, giúp họ dễ dàng luyện tập giao tiếp theo lịch trình của riêng mình.

Sau mỗi bài kiểm tra, số câu đúng của người dùng sẽ được ghi lại Khi đạt được một số lượng câu đúng nhất định, người dùng sẽ nhận được số sao tương ứng.

Tính năng này kích thích sự cạnh tranh giữa người dùng, điều này không chỉ thúc đẩy sự phát triển mà còn tạo động lực học tập mạnh mẽ hơn cho họ.

Tuy nhiên tính năng nay vẫn chưa được hoàn thiện trong chương trình vì thời gian làm đồ án là có hạn mong thầy cô thông cảm.

Mục tiêu đề tài

Tìm hiểu về HTML CSS, JavaScript cơ bản

Tìm hiểu về Bootstrap4, Jquery

Tìm hiểu về Python Django và Django Rest Framework

Xử dụng những kiến thức tìm hiểu được xây dựng Website học tiếng anh

Cấu trúc của đồ án tốt nghiệp

Nội dung sẽ được trình bày trong 4 chương sau phần sau:

 Chương 2: Cơ sở lý thuyết

 Chương 3: Công cụ lập trình

 Chương 4: Xây dựng Website học tiếng anh

CƠ SỞ LÝ THUYẾT

Học Tiếng Anh

Học ngoại ngữ là quá trình chuyển đổi âm thanh và chữ viết thành biểu tượng có nghĩa, nhưng ngôn ngữ lại rất phong phú và đa dạng, chứa đựng nền văn hóa riêng Do đó, không có phương pháp nào có thể giúp hiểu một ngôn ngữ chỉ trong 21 ngày Chỉ có ngữ cảnh và trải nghiệm lâu dài mới giúp chúng ta thành thạo một ngoại ngữ.

Học tiếng Anh cũng vậy Sau đây là một số lời khuyên chung chung có thể sẽ hữu ích với những ai thích học tiếng Anh:

Để học tiếng Anh hiệu quả, bạn cần xác định rõ mục đích của mình, như sử dụng tiếng Anh cho công việc, xin việc, giao tiếp với người nói tiếng Anh, hoặc hỗ trợ trong việc học tập.

Để cải thiện khả năng tiếng Anh, bạn cần xác định rõ mức độ thành thạo mà mình mong muốn đạt được trong các kỹ năng nói, nghe, đọc và viết Việc này sẽ giúp bạn có kế hoạch học tập hiệu quả hơn và tập trung vào những lĩnh vực cần cải thiện.

Hãy hình dung rõ ràng về bản thân khi bạn đạt được trình độ tiếng Anh thành thạo mà bạn mong muốn Bạn sẽ cảm nhận được sự tự tin, khả năng giao tiếp hiệu quả và sự thoải mái khi sử dụng ngôn ngữ Bạn sẽ nghe thấy những cuộc trò chuyện sống động xung quanh và nhìn thấy cơ hội mới mở ra trong sự nghiệp và cuộc sống cá nhân.

Đăng ký một khóa học tiếng Anh sẽ rất hữu ích; nếu không thể, hãy tạo ra môi trường xung quanh bạn để thường xuyên sử dụng tiếng Anh.

Tìm kiếm cơ hội để học và sử dụng tiếng Anh là rất quan trọng Hãy thực hành nói tiếng Anh mọi lúc có thể, lắng nghe đài và CD tiếng Anh, cũng như đọc và viết bằng tiếng Anh Khi bạn chủ động tìm kiếm những cơ hội này, bạn chắc chắn sẽ đạt được tiến bộ.

Ghi chép từ vựng mới vào một cuốn sổ là phương pháp hiệu quả để học tập Hãy luôn mang theo cuốn sổ bên mình, để bạn có thể tra cứu bất cứ lúc nào khi có thời gian rảnh rỗi.

Luyện tập là chìa khóa thành công, đặc biệt khi học ngoại ngữ Một câu thành ngữ tiếng Anh nhấn mạnh rằng nếu bạn không muốn thất bại, hãy thường xuyên rèn luyện Điều này cho thấy tầm quan trọng của việc kiên trì và nỗ lực trong quá trình học tập.

Tìm một người bạn hoặc đồng nghiệp để cùng học tiếng Anh, có thể giao tiếp trực tiếp hoặc qua tin nhắn Việc này không chỉ giúp bạn cải thiện kỹ năng ngôn ngữ mà còn tạo cơ hội thực hành thường xuyên.

Học tiếng Anh một ít mỗi ngày, chỉ cần 10 phút, sẽ hiệu quả hơn so với việc học một lần mỗi tuần dù thời gian dài hơn Tạo thói quen học tập thường xuyên giúp cải thiện khả năng ngôn ngữ của bạn một cách bền vững.

Khi bắt đầu mỗi buổi học, hãy đặt câu hỏi cho bản thân: "Hôm nay mình muốn học gì?" và vào cuối buổi, hãy tự hỏi: "Mình đã học được gì hôm nay?"

Các phần chính trong một Website học tiếng anh

2.2.1 Từ vựng Để học tiếng anh, trước hết chúng ta nên có vốn từ vựng nhất định Và để học được, chúng ta cần phải hiểu về chúng:

Trong tiếng Anh, từ có thể được phân loại theo nhiều cách khác nhau, nhưng không có phương pháp nào hoàn hảo Theo truyền thống, từ thường được chia thành 8 loại cơ bản.

 Danh từ (Noun): là tên gọi người, đồ vật, sự kiện hay nơi chốn.

 Đại từ (Pronouns): là từ dùng thay cho danh từ để danh từ đó không bị lặp lại nhiều lần.

 Tính từ (Adjectives): là từ cung cấp tính chất cho danh từ, làm cho danh từ rõ nghĩa hơn, chính xác và đầy đủ hơn.

 Động từ (Verb): là từ diễn tả một hành động, một tình trạng hay cảm xúc Nó xác định chủ từ làm hay chịu đựng một điều gì đó.

 Trạng từ (Adverb): là từ bổ nghĩa cho động từ, tính từ hay một trạng thái khác.

Tương tự như tính từ, nó làm cho các từ mà nó bổ nghĩa rõ ràng, đầy đủ và chính xác hơn.

Giới từ (Prepositions) là những từ kết hợp với danh từ và đại từ để chỉ ra mối quan hệ giữa chúng với các từ khác, thường liên quan đến hoàn cảnh, thời gian hoặc vị trí.

Giới từ (Prepositions) là những từ kết hợp với danh từ và đại từ, thể hiện mối quan hệ giữa chúng với các từ khác, thường liên quan đến hoàn cảnh, thời gian hoặc vị trí.

 Thán từ (Interjections): là từ diễn tả tình cảm, cảm xúc đột ngột không ngờ Các từ này không can thiệp vào ngữ pháp câu.

Có nhiều từ đảm nhiệm nhiều loại chức năng khác nhau và do đó có thể xếp vào nhiều loại từ khác nhau

Thông qua việc phân loại từ, người đọc có thể dễ dàng nắm bắt cấu trúc và ngữ nghĩa, từ đó học từ vựng hiệu quả hơn Đặc trưng của từ vựng trong tiếng Anh chuyên ngành CNTT chủ yếu là sự biến thể của các loại từ.

Programmable(adj): có thể program hóa

Programmability(n): sự có thể program hóa

Clause = M nh đ ệ ề : là t h p có đ ch ng và v ng nh ng ph i đi kèm ổ ợ ủ ủ ữ ị ữ ư ả m t m nh đ khác phù h p v ngh a đ t o thành m t câu có ý ngh a ộ ệ ề ợ ề ĩ ể ạ ộ ĩ

Cụm từ trong tiếng Anh (Phrase) được hình thành khi các từ được kết hợp, tạo ra nghĩa mới có thể tương tự hoặc khác biệt so với nghĩa của từng từ riêng lẻ.

Desktop computer = Desktop + Computer = Cái bàn + Máy tính

->Desktop computer = máy tính để bàn.

Khi dịch và đọc tài liệu tiếng Anh, hãy tránh dịch từng từ một Thay vào đó, nên hiểu theo ngữ cảnh, tập trung vào trọng tâm của câu và ghi nhớ ý nghĩa tổng thể của nó.

Khi học tiếng Anh, người học nên tập trung vào từng chủ đề riêng biệt thay vì học lan man mọi thứ cùng lúc Việc này giúp người học nắm bắt tốt hơn nội dung và từ vựng liên quan đến chủ đề đang nghiên cứu.

Học ngữ pháp thôi chắc chắn là không đủ để giúp bạn học giỏi tiếng anh Nhưng lại là nền tảng cho vốn kiến thức của bạn sau này

Ngữ pháp giống như một bài tập thể lực mà các vận động viên thực hiện để chuẩn bị cho những trận đấu quan trọng Những bài tập này cần được duy trì đều đặn để nâng cao kỹ năng và sự tự tin.

Trước nhất, để hiểu được tiếng Anh thông thường chúng ta nên nắm rõ các dạng ngữ pháp cơ bản sau:

2.2.2.1 Các thì của động từ

-Hiện tại đơn giản (Simple Present)

-Hiện tại hoàn thành (Present Perfect )

-Hiện thại hoàn thành tiếp diễn (Present Perfect Progressive).

-Quá khứ đơn giản (Past Simple)

-Quá khứ tiếp diễn (Past Progressive)

-Quá khứ hoàn thành (Past Perfect)

-Quá khứ hoàn thành tiếp diễn (Past Perfect progressive).

Tương lai (Future) -Tương lai đơn giản (Simple Future) -Tương lai tiếp diễn (Future Progressive) -Tương lai hoàn thành (Future Perfect).

-Tương lai đơn giản (Simple Future)

-Tương lai tiếp diễn (Future Progressive)

-Tương lai hoàn thành (Future Perfect).

Để thành thạo tiếng Anh, bạn cần trải qua một quá trình ôn luyện lâu dài, tập trung vào bốn kỹ năng nghe, nói, đọc và viết Kỹ năng đọc đặc biệt quan trọng vì nó giúp bạn nhanh chóng tích lũy từ vựng và ngữ pháp, tạo nền tảng vững chắc cho việc phát triển các kỹ năng khác.

2.2.3.1 3 Yếu Tố Để Luyện Đọc Tiếng Anh Tốt

Việc trau dồi từ vựng tiếng Anh là rất quan trọng để hiểu nội dung bài đọc một cách đầy đủ Để làm giàu vốn từ vựng, bạn nên tích lũy từ mới một cách thường xuyên, liên tục và có chọn lọc Hãy kết hợp luyện đọc với việc học từ mới và ôn tập đều đặn để đạt được hiệu quả tốt nhất.

Ngữ pháp, giống như từ vựng, là yếu tố quan trọng thứ hai giúp bạn đọc và hiểu nhanh chóng Mỗi cấu trúc ngữ pháp trong tiếng Anh mang một ý nghĩa hoặc sắc thái biểu đạt riêng.

Hiểu biết về cấu trúc ngữ pháp là rất quan trọng để nắm bắt và phân tích các lớp ý nghĩa trong câu và đoạn văn Trong nhiều trường hợp, chỉ cần nhận diện cấu trúc ngữ pháp, bạn có thể suy luận được ý nghĩa tổng thể của câu.

Vốn hiểu biết tự nhiên giúp bạn hiểu bài đọc quen thuộc, mặc dù không biết nhiều từ mới Điều này cho phép bạn trả lời các câu hỏi một cách trơn tru.

Hiểu biết về các vấn đề trong cuộc sống sẽ giúp bạn tự tin hơn khi gặp phải chúng trong các bài đọc tiếng Anh Bạn hoàn toàn có khả năng hoàn thành bài đọc một cách dễ dàng, ngay cả khi có nhiều từ vựng mới mà bạn chưa biết.

Luôn chủ động tìm hiểu các vấn đề, đặc biệt là những câu hỏi thường gặp trong bài thi, là bài học quan trọng Việc nghiên cứu những vấn đề này bằng tiếng Anh không chỉ giúp nâng cao kiến thức mà còn mang lại nhiều lợi ích bổ ích khác.

Nghe là một trong những kĩ năng khó nhất của việc học tiếng Anh Khi nghe, người nghe thường gặp một số khó khăn sau:

 Không nắm được chủ đề của bài

 Quá nhiều thông tin nên không thể nắm bắt được chủ đề bài nghe

 Thời gian và công sức bỏ ra nhiều nên dễ gây nản lòng người học

 Sự cản trở về mặt trí tuệ nên người nghe bị cuốn theo đoạn văn, từ đó dẫn tới không nắm được những thông tin cần thiết

 Không tự tin để giao tiếp do không quen hay do nhút nhát

 Rào cản ngôn ngữ do phải dịch từ tiếng Việt sang Anh để nói hay ngược lại để hiểu.

 Phát âm không chuẩn nên nghe không được

 Có những thông tin không hiểu làm ta phân vân nên không tập trung tư tưởng để nghe

 Không có hiểu biết về lĩnh vực đang nghe

CÔNG CỤ LẬP TRÌNH

DJANGO

Django là gì? Nói một cách đơn giản, Django là một Framework lập trình Web bậc cao, mã nguồn mở được viết bằng Ngôn ngữ lập trình Python.

Django là một Framework giúp bạn lập trình web nhanh hơn và tốt hơn so với các framework như Flask mà lại dễ hơn nhiều

Lập trình web yêu cầu tích hợp nhiều phần quan trọng như xác thực người dùng, đăng nhập, đăng ký và upload tập tin Những công việc này rất phổ biến, nhưng nếu tự thực hiện, bạn sẽ mất nhiều thời gian.

Sử dụng Framework Django giúp bạn tiết kiệm thời gian và công sức nhờ vào việc cung cấp một tập hợp thành phần sẵn có để thực hiện các công việc phổ biến.

3.1.1 Tại sao nên sử dụng Django Framework

Nó nhanh và đơn giản, Django giúp bạn có thể lập trình web trong thời gian ngắn

Django nổi bật với tài liệu chất lượng và tuân thủ nguyên tắc DRY (Don't Repeat Yourself), điều mà nhiều framework khác không chú trọng Ngoài ra, Django còn hỗ trợ ORM (Object Relational Mapping), giúp tối ưu hóa việc quản lý cơ sở dữ liệu.

Một cơ sở dữ liệu có thể được cập nhật thông qua command line chỉ bằng cách sử dụng lệnh sau đây.

Và migrations có thể được tạo ra bằng cách sử dụng:

3.1.2 Tìm hiểu về MVT Pattern của Django

Django sử dụng mô hình MVT (Model-View-Template) thay vì sử dụng mô hình MVC (Model-View-Controller).

Mô hình MVT được sử dụng trong khi tạo một ứng dụng với Tương tác người dùng.

Mô hình này thì bao gồm code HTML với Django Templage Language (DTL)

Controller là mã được viết để kiểm soát sự tương tác giữa Model và View và Django dễ dàng chăm sóc nó.

Bất cứ khi nào người dùng người request, nó xử lý request của người dùng đó bằng Model, View và Template.

Nó hoạt động như một Controller, kiểm tra khả năng sử dụng thông qua việc ánh xạ URL Nếu URL ánh xạ thành công, View sẽ tương tác với Model và gửi Template trở lại cho người dùng dưới dạng phản hồi.

Hình 1 Mô hình MVT của Django

3.1.3 Hướng dẫn cài đặt Django

Cài đặt Django rất dễ dàng so với các framework khác nhưng nó sẽ khác với Hệ điều hành khác nhau.

Chúng ta có thể tải xuống phiên bản mới nhất từ trang web chính thức của họ tại đây: https://www.djangoproject.com/download/

Bạn có thể cài đặt nó trên Linux hoặc Mac OS bằng cách sử dụng package manager hoặc pip installer Đối với Windows, nếu Python đã được cài đặt, bạn cần kiểm tra xem Python Path đã được thiết lập trong biến hệ thống Chỉ cần giải nén và nhấn cài đặt để hoàn tất.

Django hỗ trợ nhiều loại cơ sở dữ liệu và có thể được cấu hình linh hoạt theo nhu cầu của người dùng Ngoài ra, nó còn tích hợp một máy chủ nhẹ, thuận tiện cho việc phát triển và thử nghiệm ứng dụng.

3.1.4 Các thành phần cơ bản của ứng dụng Django

Dự án Django tạo ra một bộ cài đặt, bao gồm cấu hình cơ sở dữ liệu và các tùy chọn cụ thể, cùng với các cài đặt mặc định cho ứng dụng trong dự án.

Nếu bạn nhìn vào thư mục của mình bạn sẽ thấy:

 manage.py: Cho phép bạn tương tác với dự án Django theo các cách khác nhau

 init .py: Nói với trình thông dịch python là thư mục nên được coi là một python package Tập tin này chủ yếu là trống.

 settings.py: Tập tin cấu hình

 urls.py: Bao gồm tất cả khai báo URL cho dự án Django và mục lục của trang web Django.

 wsgi.py: Đây là lối vào cho các máy chủ web tương thích WSGI để phục vụ các dự án của bạn và deploy với WSGI.

Nếu bạn muốn kiểm tra, dự án của bạn có đang chạy không, bạn có thể kiểm tra nó bằng lệnh sau:

3.1.5 Django làm cho Lập trình web dễ dàng hơn như thế nào?

Python tuân theo nguyên tắc "Đơn giản luôn tốt hơn Phức tạp", và các package quan trọng như Numpy, Scipy, Pillow đã được tích hợp sẵn trong cài đặt Python Để kiểm tra xem các package này đã được cài đặt và sẵn sàng để sử dụng trong dự án của bạn hay chưa, bạn có thể thực hiện một số bước đơn giản.

Nó cung cấp tất cả các công cụ cần thiết để phát triển một ứng dụng hoàn chỉnh, bao gồm các template tích hợp sử dụng HTML, định tuyến URL, ORM (Ánh xạ quan hệ đối tượng), và quản lý phiên làm việc.

Django cung cấp nhiều công cụ hỗ trợ SEO, cho phép lập trình viên tối ưu hóa thời gian tải trang thông qua việc sử dụng cache template và nén CSS, JavaScript.

Ngoài ra Django còn có một công cụ là robot.txt.Django thậm chí vượt cả kỳ vọng của các chuyên gia SEO.

3.1.6 Các công ty hàng đầu sử dụng Django Framework

Instagram là nền tảng mạng xã hội nổi bật cho việc chia sẻ hình ảnh và video, được phát triển bằng Python Mỗi giây, Instagram xử lý một khối lượng dữ liệu khổng lồ và quản lý hàng triệu tương tác giữa người dùng.

Django đã giúp Instagram xử lý tất cả các công việc này bằng cách giữ cho nó đơn giản đúng như tinh thần của Python.

Spotify đã cách mạng hóa ngành công nghiệp âm nhạc bằng cách thay đổi thói quen nghe nhạc của người dùng, giúp họ dễ dàng truy cập âm nhạc trên mọi thiết bị.

Spotify sử dụng Python cho cả Back end Service và Machine Learning với Django Framework.

YouTube là một trong những nền tảng chia sẻ video hàng đầu hiện nay, ban đầu được phát triển trên PHP Tuy nhiên, để nâng cao hiệu suất, YouTube đã chuyển sang sử dụng Django.

Dropbox là một trong những dịch vụ lưu trữ đám mây nổi tiếng cho các tài liệu, video và hình ảnh.

Nó được phát triển bằng Python cho cả phần mềm Desktop và Client Server Dropbox áp dụng Django Framework để hỗ trợ lưu trữ, đồng bộ hóa và cung cấp các tùy chọn chia sẻ nhiều loại tệp khác nhau.

Chắc không cần giới thiệu về trình duyệt Mozilla Frifox đâu nhỉ?

Mặc dù các thành phần cũ của Mozilla không được viết bằng python nhưng các thành phần mới được triển khai bằng Django.

Nhiều trang web hỗ trợ và add-ons đã chuyển đổi từ PHP (CakePHP) sang Python (Django Framework), cho phép họ xử lý hàng triệu lượt truy cập hàng tháng và hàng ngày, cùng với lượng lớn lưu lượng truy cập API.

Django REST Framework

REST stands for Representational State Transfer, which is an architectural style that defines rules for designing web services focused on system resources.

Trong kiến trúc REST, mọi thứ đều được xem là tài nguyên, bao gồm tệp văn bản, hình ảnh, trang HTML, video, và dữ liệu động Máy chủ REST cung cấp quyền truy cập vào các tài nguyên này, trong khi máy khách REST có khả năng truy cập và thay đổi chúng Các tài nguyên được định danh thông qua URI, và REST sử dụng các định dạng như văn bản, JSON, và XML để biểu diễn chúng.

Trong bài viết này, mình sẽ giới thiệu một thư viện hữu ích giúp tạo RESTful Web API cho ứng dụng Django (Python).

Kiến thức python căn bản Python.org

 Đầu tiên ta tạo ra 1 virtualenv để làm việc

 Tiếp theo là install Django và django-rest

$ pip install django # pip install pre django -> nếu muốn cài Django 2.0

$ pip install markdown # Markdown support for the browsable API.

$ pip install django-filter # Filtering support

 Tiếp theo ta tạo 1 Project Django

$ django-admin startproject djangorest -> tạo project

$ python manage.py startapp rest -> tạo một app tên là rest

$ python manage.py migrate -> khởi tạo dữ liệu ban đầu cho project

 Sau đó ta run server bằng lệnh

$ python manage.py runserver -> tạo một app tên là rest

Hình 4 Sau khi run server

Bỏ qua ORM, Template và URL của Django, chúng ta sẽ tập trung vào cách tạo REST API, vì phần này gần như tách biệt với các thành phần khác của Django.

Ta thêm app framework và rest vào settings.py.

HTML là gì?

HTML, viết tắt của HyperText Markup Language, là ngôn ngữ dùng để tạo ra các trang web Mỗi website thường chứa nhiều trang, mỗi trang được định dạng dưới dạng tài liệu HTML Tim Berners-Lee, người sáng lập ra HTML, cũng là người khai sinh ra World Wide Web và là chủ tịch của World Wide Web Consortium (W3C), tổ chức chịu trách nhiệm thiết lập các tiêu chuẩn trên Internet.

Một tài liệu HTML bao gồm các phần tử HTML được xác định bởi các cặp thẻ, và các thẻ này được bao bọc bởi dấu ngoặc ngọn.

HTML thường được khai báo dưới dạng cặp thẻ, bao gồm thẻ mở và thẻ đóng, như ví dụ Nội dung cần đánh dấu bằng HTML sẽ được đặt bên trong cặp thẻ, chẳng hạn như Đây là chữ in đậm Tuy nhiên, một số thẻ đặc biệt, như thẻ , không có thẻ đóng và dữ liệu được khai báo trong các thuộc tính.

Một tập tin HTML sẽ bao gồm các phần tử HTML và được lưu lại dưới đuôi mở rộng là html hoặc htm.

3.3.1 HTML được xử lý ra sao?

Khi một tập tin HTML được tạo ra, trình duyệt web sẽ đảm nhiệm việc xử lý nó bằng cách đọc và hiểu nội dung từ các thẻ HTML Trình duyệt chuyển đổi nội dung này thành văn bản đã được đánh dấu, cho phép người dùng đọc, nghe hoặc để các bot máy tính hiểu Bạn có thể kiểm tra kết quả của một tập tin HTML bằng cách sử dụng khung nội dung bên dưới để chuyển đổi giữa phần HTML và kết quả hiển thị.

Hình 5 Ví dụ về HTML

3.3.2 Cấu trúc một đoạn HTML

HTML được khai báo thông qua các phần tử sử dụng từ khóa Nội dung nằm giữa cặp từ khóa sẽ được định dạng bằng HTML Dưới đây là một ví dụ về đoạn HTML để khai báo một đoạn văn bản.

[html]

Đây là một đoạn văn bản trong HTML.

Trong các thẻ HTML, các thuộc tính được đặt bên trong thẻ mở, với mỗi thuộc tính có giá trị nằm trong dấu ngoặc kép và được phân cách bởi dấu "=" Ví dụ dưới đây minh họa một thẻ sử dụng thuộc tính.

[html] [/html]

Một thẻ có thể sử dụng nhiều thuộc tính chứ không phải chỉ một thuộc tính nhé.

3.3.3 Dùng chương trình gì để tạo tập tin HTML?

HTML là một loại tập tin siêu văn bản, cho phép bạn sử dụng các chương trình soạn thảo văn bản đơn giản mà không cần tính năng định dạng để tạo ra tập tin HTML.

Trên Windows, bạn có thể sử dụng Notepad để tạo tập tin HTML, trong khi trên Mac, TextEdit là lựa chọn thích hợp Đối với các hệ điều hành Linux, Vim cũng là một công cụ hữu ích Để đảm bảo tập tin có thể được đọc trên trình duyệt, hãy nhớ lưu nó với đuôi html.

Notepad là một công cụ quá đơn giản cho việc soạn thảo HTML, vì vậy từ các bài tiếp theo, chúng ta sẽ chuyển sang sử dụng một chương trình khác tương tự Tôi không khuyến khích việc chỉnh sửa tệp HTML bằng Notepad để tránh gặp phải lỗi hiển thị các ký tự tiếng Việt.

3.3.4 HTML đóng vai trò gì trong website?

HTML là ngôn ngữ đánh dấu siêu văn bản, đóng vai trò quan trọng trong việc xây dựng cấu trúc siêu văn bản cho website và khai báo các tập tin kỹ thuật số như hình ảnh, video và nhạc.

HTML không phải là ngôn ngữ duy nhất để tạo ra một website; nó chỉ đóng vai trò cơ bản trong cấu trúc của website Ví dụ, trang web Thachpham.com được xây dựng từ nhiều ngôn ngữ khác nhau, mỗi ngôn ngữ đảm nhận một vai trò quan trọng trong việc phát triển và tối ưu hóa trải nghiệm người dùng.

 HTML – Xây dựng cấu trúc và định dạng các siêu văn bản.

 CSS – Định dạng các siêu văn bản dạng thô tạo ra từ HTML thành một bố cục website, có màu sắc, ảnh nền,….

 Javascript – Tạo ra các sự kiện tương tác với hành vi của người dùng (ví dụ nhấp vào ảnh trên nó sẽ có hiệu ứng phóng to).

PHP là một ngôn ngữ lập trình mạnh mẽ, được sử dụng để xử lý và trao đổi dữ liệu giữa máy chủ và trình duyệt, ví dụ như việc lưu trữ các bài viết trên máy chủ.

 MySQL – Hệ quản trị cơ sở dữ liệu truy vấn có cấu trúc (SQL – ví dụ như các bài viết sẽ được lưu lại với dạng dữ liệu SQL).

HTML là phần quan trọng nhất của một website, giống như bộ xương của một cơ thể hoàn chỉnh, nó tạo ra khung sườn cho toàn bộ cấu trúc của trang web.

Dù website sử dụng loại ngôn ngữ lập trình nào để xử lý dữ liệu, HTML vẫn là yếu tố cần thiết để hiển thị nội dung cho người truy cập.

Nhân tiện đây mình cũng nói luôn, website có hai loại chính:

Website tĩnh (static web) là loại website không tương tác với máy chủ web để gửi hoặc nhận dữ liệu, mà chỉ hiển thị các thông tin đã được định sẵn bằng HTML và được trình duyệt đọc trực tiếp.

CSS

CSS, hay Cascading Style Sheet, là ngôn ngữ thiết lập phong cách cho trang web, giúp định dạng và tạo kiểu cho các yếu tố được viết bằng ngôn ngữ đánh dấu như HTML.

Nó cho phép điều chỉnh định dạng nhiều trang web đồng thời, giúp tiết kiệm thời gian cho người viết Bằng cách kiểm soát bố cục, màu sắc và font chữ, nó tách biệt cách hiển thị của trang web với nội dung chính.

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì một lý do đơn giản

HTML không được thiết kế để gắn tag để giúp định dạng trang web Bạn chỉ có thể dùng nó để “đánh dấu” lên site.

Tags như trong HTML 3.2 đã gây khó khăn cho lập trình viên do sự đa dạng về font chữ, màu nền và phong cách trên các website Việc viết lại mã cho trang web trở nên phức tạp và tốn thời gian Để khắc phục vấn đề này, CSS được phát triển bởi W3C nhằm đơn giản hóa quy trình thiết kế web.

HTML và CSS có mối quan hệ chặt chẽ, trong đó HTML là ngôn ngữ đánh dấu cơ bản cho website, còn CSS chịu trách nhiệm về phong cách và giao diện Sự kết hợp giữa hai ngôn ngữ này là yếu tố không thể thiếu trong việc xây dựng và thiết kế một trang web hiệu quả.

CSS về lý thuyết không có cũng được, nhưng khi đó website sẽ không chỉ là một trang chứa văn bản mà không có gì khác.

3.4.2 Ưu điểm của CSS là gì

Sự khác biệt giữa site có CSS và không có CSS rất dễ nhận biết.

Chắc bạn đã thấy rồi, khi website không load được đầy đủ và chỉ có nền trắng và chữ thì chỉ có màu đen và xanh Như sau:

Một website không có CSS sẽ trông rất thiếu hấp dẫn và không chuyên nghiệp, cho thấy rằng thành phần CSS không tải lên được hoặc không tồn tại Bạn có muốn website của mình xuất hiện như vậy không? Chắc chắn là không.

Trước khi áp dụng CSS, các phong cách cần được tích hợp vào mã HTML, yêu cầu bạn phải xác định rõ các thành phần như màu nền, màu phông chữ, và cách căn chỉnh.

CSS cho phép bạn định dạng mọi thứ trong một tệp riêng, giúp tạo phong cách trước và sau đó tích hợp tệp CSS vào đầu tệp HTML Điều này làm cho mã HTML trở nên rõ ràng và dễ quản lý hơn.

CSS giúp bạn tránh việc lặp lại các mô tả cho từng thành phần, từ đó tiết kiệm thời gian và rút ngắn mã code, giúp bạn dễ dàng kiểm soát lỗi hơn.

CSS giúp bạn có nhiều styles trên một trang web HTML, vì vậy, khả năng điều chỉnh trang gần như vô hạn?

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

CSS sử dụng cú pháp tiếng Anh đơn giản để xây dựng một tập hợp quy tắc có thể áp dụng Như đã đề cập, HTML không được sử dụng để định hình phong cách cho các phần tử, mà chỉ đóng vai trò đánh dấu để xác định loại yếu tố.

 Ví dụ:

Đây là văn bản.

Còn làm thế nào để tạo ra phong cách cho văn bản đó? Syntax của CSS rất đơn giản.

Nó có phần block chọn và block khai báo Bạn chọn một yếu tố và khai báo làm gì với nó Rất đơn giản phải không?

Tuy nhiên, cũng có nhiều quy tắc cần ghi nhớ.

Selector sẽ chỉ định yếu tố HTML mà bạn muốn áp dụng phong cách Khối khai báo sẽ bao gồm một hoặc nhiều khai báo, được phân tách bằng dấu chấm phẩy.

Mỗi khai báo CSS bao gồm một tên và giá trị, được phân tách bằng dấu hai chấm Khai báo CSS phải kết thúc bằng dấu chấm phẩy, và các khai báo được nhóm lại trong dấu ngoặc nhọn.

Hãy xem qua ví dụ:

Tất cả các thành phần trong element

sẽ dùng màu xanh và in đậm.

p { color: blue; text-weight: bold;

Ở ví dụ khác, tất cả các yếu tố trong

sẽ được canh giữa, rộng 16x và màu hồng.

p { text-align: center; font-size: 16px; color: pink;

3.4.4 Internal, External và Inline CSS Styles

Style CSS Internal làm tăng thời gian tải trang vì nó được tải lại mỗi khi trang web được refresh Hơn nữa, kiểu CSS này chỉ áp dụng cho từng trang riêng lẻ, do đó không thể sử dụng cho nhiều trang khác nhau.

Tuy nhiên, lợi ích của style CSS Internal là khi mọi thứ đã đặt trong một trang thì nó dễ chia sẽ trang để xem trước hơn.

Phương pháp dùng Style External là thuận tiên nhất Mọi thứ được lưu trong file css

Có nghĩa là bạn có thể tạo phong cách ở file khác áp dụng CSS vào trang bạn muốn External style sẽ cải thiện thời gian tải trang rất nhiều.

Cuối cùng, chúng ta sẽ khám phá về style CSS Inline, một phương pháp áp dụng phong cách trực tiếp cho các yếu tố cụ thể thông qua thẻ Mặc dù mỗi thành phần cần có phong cách riêng biệt, nhưng phương pháp này không phải là cách hiệu quả và dễ dàng nhất để quản lý CSS.

Inline CSS mang lại sự tiện lợi cho việc thay đổi nhanh chóng một yếu tố mà không cần truy cập trực tiếp vào file CSS Bạn có thể xem trước các thay đổi ngay lập tức.

JavaScript

Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa

JavaScript là ngôn ngữ lập trình phổ biến được sử dụng rộng rãi trong các ứng dụng web Ngôn ngữ này được hỗ trợ trên hầu hết các trình duyệt, bao gồm Firefox và Chrome, cả trên máy tính và thiết bị di động.

Javascript đóng vai trò quan trọng trong việc xử lý các đối tượng HTML trên trình duyệt, cho phép người dùng dễ dàng can thiệp vào các hành động như thêm, xóa hoặc sửa đổi thuộc tính CSS và các thẻ HTML.

Javascript là ngôn ngữ lập trình chủ yếu được sử dụng trên trình duyệt ở phía client Tuy nhiên, sự ra đời của NodeJS đã mở rộng khả năng của Javascript, cho phép nó hoạt động hiệu quả ở phía backend.

Khi truy cập vào một số website trên internet, bạn sẽ thấy những hiệu ứng hấp dẫn như slide, menu xổ xuống và hình ảnh chuyển động bắt mắt.

Tất cả các chức năng này đều được xử lý bằng Javascript đấy các bạn ạ.

Trong những năm gần đây, sự ra đời của các framework như NodeJS và ExpressJS, cùng với nhiều thư viện frontend như Angular, jQuery, và ReactJS, đã tạo nên một cơn sốt cho từ khóa Javascript Fullstack.

JS là một từ viết tắt của JavaScript, vì vây khi một ai đó nhắc tới JS thì bạn phải hiểu rằng đó là Javascript nhé.

Javascript Framework là một bộ thư viện được xây dựng dựa vào ngôn ngữ lập trình Javascript

Mỗi framework thường được tạo ra để phục vụ cho một lĩnh vực nào đó

Angular and React are specialized frameworks for frontend development, while NodeJS is focused on backend processing Additionally, jQuery is a powerful library for manipulating HTML and CSS in the DOM.

Sức mạnh của Javascript là không thể chối cãi, bằng chứng là hiện nay có rất nhiều libraries và framework được viết bằng Javascript ra đời như:

 Angular: Một thư viện dùng để xây dựng ứng dụng Single Page.

 NodeJS: Một thư viện được phát triển phía Server dùng để xây dựng ứng dụng realtime.

 Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile.

 jQuery: Một thư viện rất mạnh về hiểu ứng.

 ReactJS: Một thư viện viết ứng dụng mobie.

 Và còn nhiều thư viện khác.

3.5.3 Ưu điểm và nhược điểm của Javascript

Javascript là một ngôn ngữ lập trình phổ biến nhưng không hoàn hảo Dưới đây là những ưu điểm và nhược điểm của Javascript mà bạn nên biết.

3.5.3.1 Ưu diểm của JavaScript là gì

Javascript giúp thao tác với người dùng ở phía client và tách biệt giữa các client Ví dụ

2 người đang truy cập vào 2 trình duyệt khác nhau thì cả hai đều có những phiên xử lý Javascript khác nhau, không ảnh hưởng lẫn nhau.

Javascript có thể hoạt động trên nhiều nền tảng khác nhau, từ Windows, macOS cho đến các hệ điều hành trên mobile.

Javascript là một ngôn ngữ dễ tiếp cận, bạn sẽ dễ dàng học nó mà không cần phải cài đặt quá nhiều phần mềm

3.5.3.2 Nhược điểm của Javascript là gì?

Ngôn ngữ lập trình dễ bị phân tích mã nguồn khiến nó trở thành mục tiêu dễ dàng cho hacker Bằng cách nhập đoạn mã vào khung console của trình duyệt, hacker có thể khiến trình duyệt xác nhận đoạn mã đó là hợp lệ, từ đó gửi các yêu cầu đến server một cách thuận lợi.

Bạn có thể đã gặp các công cụ và đoạn mã trên mạng liên quan đến Facebook, chúng giúp thay đổi chức năng và giao diện của nền tảng này, và tất cả đều được lập trình bằng Javascript.

3.5.4 Cách viết chương trình javascript đầu tiên

Để bắt đầu học Javascript, bạn cần chuẩn bị một phần mềm viết mã Mặc dù mình thích sử dụng Netbeans, nhưng nếu bạn là người mới, Notepad++ sẽ là lựa chọn tốt hơn vì nó nhẹ và dễ cài đặt.

JavaScript là một ngôn ngữ lập trình được hỗ trợ bởi tất cả các trình duyệt, do đó người dùng không cần tải xuống thư viện nào Thay vào đó, chỉ cần sử dụng các đoạn mã script, trình duyệt sẽ nhận diện và thực thi JavaScript một cách dễ dàng.

3.5.4.1 Cặp thẻ mở và thẻ đóng

Tất cả những đoạn mã Javascript đều phải đặt trong cặp thẻ mở và thẻ đóng , ví dụ:

alert("Hello World!");

Chúng ta có ba cách đặt thường được sử dụng sau đây:

 Cách 1: Internal - viết trong file html hiện tại

Thông thường, đoạn mã JavaScript thường được đặt trong phần head của trang web, nhưng điều này không phải là bắt buộc Thay vào đó, bạn có thể đặt mã JavaScript ở bất kỳ vị trí nào trên trang web miễn là được bao lại bằng thẻ script.

Ví dụ đặt trong thẻ head

alert("Hello World!");

Ví dụ đặt trong thẻ body

alert("Hello World!");

 Cách 2: External - viết ra một file js khác rồi import vào

Bạn có thể viết mã JavaScript trong file có đuôi js và sử dụng thẻ script để import vào trang web, tương tự như cách làm với CSS Ví dụ, nếu file JavaScript của bạn có tên là demo.js, bạn có thể import nó như sau:

Trong file demo.js, bạn không cần thêm thẻ script nữa vì trình duyệt đã tự nhận diện đây là file chứa mã Javascript nhờ vào phần đuôi js.

 Cách 3: Inline - viết trực tiếp trong thẻ HTML

Inline là việc viết mã Javascript trực tiếp trong thẻ HTML Ví dụ, đoạn mã alert(1) được sử dụng trong sự kiện onclick của thẻ button là một trường hợp của việc viết inline.

3.5.5 Các câu hỏi thường gặp khi học Javascript

Thẻ script dùng để khai báo cho trình duyệt biết nội dung bên trong sẽ là một đoạn mã Javascript.

 Type = text/javascript là gì?

Bootstrap

Bootstrap là một framework bao gồm các HTML, CSS và JavaScript template dùng để phát triển website chuẩn responsive.

Bootstrap streamlines the web design process by providing essential components such as typography, forms, buttons, tables, grids, navigation, and image carousels, making it faster and easier to create websites.

Bootstrap là bộ công cụ mã nguồn mở miễn phí giúp tạo mẫu website hoàn chỉnh Với các thuộc tính giao diện như kích thước, màu sắc, độ cao và độ rộng được quy định sẵn, các designer có thể sáng tạo sản phẩm mới mẻ, đồng thời tiết kiệm thời gian trong quá trình thiết kế giao diện website.

Bootstrap, được phát triển bởi Mark Otto và Jacob Thornton tại Twitter, là một framework mã nguồn mở ra mắt vào ngày 19/8/2011 trên GitHub, ban đầu mang tên Twitter Blueprint Vào ngày 31/1/2012, phiên bản 2 của Bootstrap đã được phát hành, bổ sung bố cục lưới 12 cột và thiết kế tùy chỉnh để đáp ứng nhiều kích thước màn hình Tiếp theo thành công của phiên bản 2, Bootstrap 3 được giới thiệu vào ngày 19/8/2013 với giao diện tương thích cho smartphone.

Chỉ 3 năm sau ngày ra mắt, Bootstrap đã trở thành No.1 project trên GitHub Vào tháng 10/2014, Mark Otto công bố phiên bản Bootstrap 4 đang được phát triển Phiên bản alpha đầu tiên của Bootstrap 4 đã được triển khai vào tháng 8/2015 Phiên bản mới nhất của Bootstrap được giới thiệu đến người dùng là Bootstrap 4.3.1 Cho đến nay, Bootstrap vẫn là một trong những framework thiết kế website có lượng người dùng “khủng” nhất.

Dưới đây là 3 File chính giúp quản lý các chức năng của Website và giao diện người dùng:

CSS là một Framework quan trọng giúp quản lý và sắp xếp bố cục của các trang Web Trong khi HTML đảm nhiệm vai trò quản lý cấu trúc và nội dung, CSS sẽ chịu trách nhiệm về bố cục của Website Do đó, sự kết hợp giữa HTML và CSS là cần thiết để thực hiện các chức năng cụ thể trên trang Web.

Giờ đây, bạn không cần tốn thời gian chỉnh sửa thủ công cho những thay đổi nhỏ trong thiết kế Thay vào đó, bạn có thể sử dụng CSS để tạo ra một giao diện đồng nhất trên nhiều website mà không gặp phải giới hạn nào.

CSS không chỉ áp dụng cho kiểu văn bản mà còn cho định dạng bảng và bố cục hình ảnh Để CSS hoạt động hiệu quả, bạn cần dành thời gian để ghi nhớ các khai báo và bộ chọn.

Bootstrap.JS là phần quan trọng chứa các file JavaScript, chịu trách nhiệm cho sự tương tác của website Để tiết kiệm thời gian viết mã JavaScript, nhiều nhà phát triển sử dụng jQuery, một thư viện JavaScript mã nguồn mở và đa nền tảng, giúp bổ sung nhiều chức năng cho trang web.

Theo kinh nghiệm của em, jQuery sẽ thực hiện một số chức năng như:

 Thực hiện các yêu cầu của Ajax như: loại trừ dữ liệu đến từ một vị trí khác một cách linh hoạt.

 Giúp tạo các tiện ích bằng bộ sưu tập Plugin JavaScript.

 jQuery sẽ tạo hình động tùy chỉnh bằng các thuộc tính của CSS.

 Thêm một số tính năng động cho nội dung các trang Web của bạn.

While Bootstrap effectively utilizes HTML and CSS elements, it still relies on jQuery for creating responsive designs Without jQuery, you are limited to static CSS components only.

Icons là một phần quan trọng trong giao diện trang Web, thường được liên kết với các dữ liệu cụ thể và hành động trong trải nghiệm người dùng.

Bootstrap dùng Glyphicons để đáp ứng nhu cầu trên và nó đã mở khóa bộ Halflings

Glyphicons để bạn sử dụng miễn phí Tại bản miễn phí, tuy chỉ có giao diện chuẩn nhưng phù hợp với các chức năng thiết yếu.

Nếu bạn muốn trang web của mình trở nên nổi bật và đẹp mắt hơn, hãy xem xét việc mua bộ Icon Premium đa dạng từ Glyphicons Những biểu tượng này sẽ mang lại phong cách độc đáo cho thiết kế của bạn.

3.6.5 Tại sao nên dùng Bootstrap

Giữa muôn vàn ứng dụng thiết kế website hiện nay, Bootstrap vẫn có khả năng cạnh tranh cao là nhờ những đặc điểm nổi bật sau:

 Chất lượng sản phẩm đầu ra hoàn hảo

Cơ chế hoạt động của Bootstrap dựa trên mã nguồn mở HTML, CSS và JavaScript, vì vậy người dùng cần nắm vững kiến thức cơ bản về ba ngôn ngữ này để sử dụng Bootstrap một cách hiệu quả Ngoài ra, các mã nguồn này cũng cho phép người dùng dễ dàng thay đổi và chỉnh sửa theo nhu cầu.

Bootstrap là một framework mã nguồn mở giúp các designer linh hoạt hơn trong việc lựa chọn các thuộc tính và phần tử phù hợp với dự án của họ Việc sử dụng CDN trong Bootstrap không chỉ tiết kiệm dung lượng mà còn loại bỏ cần thiết phải tải mã nguồn về máy.

3.6.5.3 Chất lượng sản phẩm đầu ra hoàn hảo

Bootstrap là một sản phẩm của những lập trình viên tài năng trên toàn cầu, đã được nghiên cứu và thử nghiệm kỹ lưỡng trên nhiều thiết bị Qua nhiều lần kiểm tra trước khi ra mắt, Bootstrap đảm bảo mang đến cho người dùng khả năng tạo ra những sản phẩm chất lượng cao và đáng tin cậy.

3.6.5.4 Độ tương thích cao Điểm cộng lớn nhất của Bootstrap là khả năng tương thích với mọi trình duyệt và nền tảng Đây là một điều cực kì quan trọng và cần thiết trong trải nghiệm người dùng Sử dụng Grid System cùng với hai bộ tiền xử lý Less và Sass, Bootstrap mặc định hỗ trợ Responsive và ưu tiên cho các giao diện trên thiết bị di động hơn Bootstrap có khả năng tự động điều chỉnh kích thước trang website theo khung browser Mục đích để phù hợp với màn hình của máy tính để bàn, tablet hay laptop.

3.6.6 Cấu trúc và tính năng của Bootstrap là gì?

Bootstrap chứa các tập tin JavaScript, CSS và fonts đã được biên dịch và nén lại.

XÂY DỰNG WEBSITE HỌC TIẾNG ANH