- Học cách trao đổi, báo cáo, làm việc Nguyễn ThịHải Yến Hoàn thành 2 - Tìm hiểu HTML, CSS - Tìm hiểu về Bootstrap, PUG Nguyễn ThịHải Yến Hoàn thành 3 - Tìm hiểu về ngôn ngữ Javascript -
LỊCH LÀM VIỆC TẠI NƠI THỰC TẬP
Tuầ n Nội dung công việc Cán bộ hướng dẫn
Nhận xét của người hướng dẫn
- Tìm hiểu về công ty, nội quy, quy định của công ty.
- Làm quen với môi trường làm việc của công ty.
- Học cách trao đổi, báo cáo, làm việc
- Tìm hiểu về Bootstrap, PUG
3 - Tìm hiểu về ngôn ngữ Javascript
- Tìm hiểu về NodeJs, Express
- Lên kế hoạch xây dựng website
- Cài đặt các thư viện cần thiết - Xây dựng giao diện người dùng
- Xử lý các tương tác trên giao diện
6 Giai đoạn back-end: Phan Thị Hà Hoàn
- Cài đặt các thư viện cần thiết
- Xây dựng các chức năng phía admin
7 - Xử lý yêu cầu CRUD
- Test các xử lý và các chức năng của website
- Báo cáo cuối đợt thực tập
Công ty Cổ Phần TLT Thái Nguyên, có địa chỉ tại Tổ dân phố Mãn Chiêm, phường Hồng Tiến, thành phố Phổ Yên, Thái Nguyên, được dẫn dắt bởi Giám đốc Lương Duy Tùng Để biết thêm thông tin, vui lòng liên hệ qua số điện thoại 0985 996 567.
Công ty chúng tôi chuyên duy trì kết nối dữ liệu và cung cấp các dịch vụ mạng, bao gồm mạng không dây, nhằm đảm bảo hiệu suất tối đa cho người dùng Chúng tôi cũng phát triển công nghệ phần mềm và cung cấp cơ sở hạ tầng cần thiết để hỗ trợ các giải pháp mạng hiệu quả.
LÝ THUYẾT CÔNG CỤ ÁP DỤNG
Tìm hiểu về HTML, CSS, PHP, JS
HTML (Ngôn ngữ Đánh dấu Siêu Văn bản) là tiêu chuẩn cơ bản để xây dựng trang web, cung cấp cấu trúc cho các trang và xác định các phần tử cũng như nội dung hiển thị trên trình duyệt.
HTML sử dụng các thẻ để đánh dấu và xác định các phần tử trên trang web, với mỗi thẻ có khả năng chứa nội dung và thuộc tính để mô tả thông tin về phần tử đó.
Phần tử HTML bao gồm các thành phần như , , và , giúp xác định tiêu đề và phần thân của trang web Ngoài ra, nó còn chứa nhiều thẻ khác nhau để hiển thị nội dung đa dạng như văn bản, hình ảnh, video, liên kết, và biểu mẫu.
HTML cho phép xác định cấu trúc hình thức của trang web, bao gồm việc sắp xếp các phần tử, định dạng văn bản và thiết lập bố cục một cách hiệu quả.
HTML5 là phiên bản mới nhất và mạnh mẽ nhất của HTML, mang đến nhiều tính năng cải tiến như hỗ trợ tích hợp video và âm thanh, đồ họa vector, khả năng tương thích di động tốt hơn và tăng cường khả năng tương tác.
HTML thường được kết hợp với CSS để định dạng và trang trí giao diện người dùng, trong khi JavaScript được sử dụng để thêm tính năng tương tác động, nâng cao trải nghiệm người dùng.
CSS (Cascading Style Sheets) là ngôn ngữ định dạng kiểu được W3C phát triển vào năm 1996, dùng để trình bày và định dạng nội dung trên trang web Hiện nay, CSS đã trở thành công cụ thiết yếu trong thiết kế giao diện web.
Tương tự như HTML, CSS cũng đã trải qua nhiều phiên bản khác nhau Dưới đây là một bảng so sánh các phiên bản của CSS:
Phiên bản Năm phát hành Tính năng
CSS1 1996 Phiên bản đầu tiên của CSS
CSS2 1998 Bổ sung các tính năng mới như tạo danh sách, bảng, form,
CSS3 2001 Cải tiến về cú pháp và tính năng của CSS
CSS4 Đang phát triển Dự kiến sẽ bổ sung thêm nhiều tính năng mới
CSS cung cấp nhiều tính năng quan trọng cho việc định dạng và trình bày nội dung trên trang web, bao gồm khả năng kiểm soát bố cục, màu sắc, phông chữ và khoảng cách giữa các phần tử Những tính năng này giúp cải thiện trải nghiệm người dùng và tối ưu hóa giao diện của trang web.
● Cho phép tạo ra các kiểu định dạng khác nhau cho các phần tử trong trang web.
● Tách biệt giữa nội dung và kiểu định dạng, giúp cho việc chỉnh sửa giao diện trở nên dễ dàng hơn.
● Cung cấp các thuộc tính để điều khiển kích thước, màu sắc, khoảng cách, của các phần tử.
● Hỗ trợ các tính năng mới như animation, transition,
JavaScript là một ngôn ngữ lập trình web phổ biến, được tích hợp vào HTML để làm cho website trở nên sống động hơn Nó hoạt động như một phần quan trọng của trang web, cho phép thực hiện các script phía client từ người dùng, tương tự như cách mà Node.js hoạt động trên máy chủ, nhằm tạo ra những trang web động.
Javascript dùng để làm gì?
Ngoài việc tìm hiểu về ngôn ngữ JavaScript, việc hiểu rõ mục đích sử dụng của nó cũng rất quan trọng Nắm bắt được các ứng dụng của JavaScript sẽ giúp bạn dễ dàng áp dụng vào công việc của mình.
Thay đổi nội dung HTML: Một trong số nhiều phương thức HTML JavaScript chính là getElementById () Chúng được sử dụng để tìm một phần tử của HTML với id
=”demo” và dùng để thay đổi nội dung của phần từ (Internal HTML) sang thành “Hello JavaScript”
JavaScript cho phép thay đổi giá trị thuộc tính HTML, chẳng hạn như thuộc tính src của thẻ Ngôn ngữ lập trình này có nhiều ưu điểm, bao gồm tính linh hoạt và khả năng tương tác cao với người dùng.
+ Chương trình rất dễ học.
+ Những lỗi Javascript rất dễ để phát hiện, từ đó giúp bạn sửa lỗi một cách nhanh chóng hơn.
+ Những trình duyệt web có thể dịch thông qua HTML mà không cần sử dụng đến một compiler.
JavaScript là một ngôn ngữ lập trình linh hoạt, có khả năng hoạt động trên nhiều nền tảng và trình duyệt web khác nhau Được các chuyên gia công nhận, JavaScript được xem là một ngôn ngữ nhẹ và nhanh hơn so với nhiều ngôn ngữ lập trình khác.
+ JS còn có thể được gắn trên một số các element hoặc những events của các trang web.
+ Những website có sử dụng JS thì chúng sẽ giúp cho trang web đó có sự tương tác cũng như tăng thêm nhiều trải nghiệm mới cho người dùng.
Người dùng có thể sử dụng JavaScript để kiểm tra các input một cách tự động, thay vì phải thực hiện kiểm tra thủ công thông qua việc truy xuất cơ sở dữ liệu.
Giao diện của ứng dụng rất phong phú với nhiều thành phần như Drag and Drop và Slider, mang đến cho người dùng một trải nghiệm Rich Interface đầy tính năng Ứng dụng hỗ trợ thao tác dễ dàng cho người dùng phía Client và tạo sự tách biệt giữa các Client với nhau Tuy nhiên, vẫn tồn tại một số nhược điểm cần lưu ý.
+ JS Code Snippet khá lớn.
+ JS dễ bị các hacker và scammer khai thác hơn.
+ JS cũng không có khả năng đa luồng hoặc đa dạng xử lý.
JavaScript có thể được sử dụng để thực thi mã độc trên máy tính của người dùng, gây ra những rủi ro bảo mật nghiêm trọng Hơn nữa, sự khác biệt trong cách các thiết bị thực hiện JavaScript có thể dẫn đến tình trạng không đồng nhất trong trải nghiệm người dùng.
+ Vì tính bảo mật và an toàn nên các Client-Side Javascript sẽ không cho phép đọc hoặc ghi các file.
+ JS không được hỗ trợ khi bạn sử dụng ở trong tình trạng thiết bị được kết nối mạng.
Khảo sát, phân tích thiết kế hệ thống
Cửa hàng dụng cụ và quần áo bóng đá của chúng tôi cung cấp một nền tảng quản lý bán hàng trực tuyến thông qua website, nơi giới thiệu đa dạng sản phẩm thể thao liên quan đến bóng đá như áo đấu, giày bóng đá và phụ kiện như găng tay và bóng Website tập trung vào việc cung cấp thông tin chi tiết về từng sản phẩm, giúp người dùng dễ dàng tìm kiếm sản phẩm phù hợp Người dùng có thể tìm kiếm thông tin bằng cách nhập từ khóa liên quan, không cần phải chính xác tên sản phẩm, chỉ cần chứa các ký tự liên quan để hệ thống trả về kết quả chính xác.
- Đối với admin: Admin sẽ quản lý về danh mục, sản phẩm, phân quyền, đơn hàng, người dùng.
+ Quản lý sản phẩm : thêm, sửa, xóa.
+ Quản lý danh mục: thêm, sửa, xóa.
+ Quản lý đơn hàng: cập nhật, xóa.
+ Quản lý phân quyền: thêm, sửa, xóa.
+ Quản lý tài khoản: Xóa.
Người dùng có thể dễ dàng quản lý giỏ hàng và tài khoản của mình, thực hiện đặt hàng và thanh toán đơn hàng một cách thuận tiện Họ cũng có khả năng đăng nhập, đăng ký và đăng xuất, cùng với việc tìm kiếm các sản phẩm liên quan một cách nhanh chóng.
+ Quản lí tài khoản: cập nhật thông tin, đổi mật khẩu.
+Quản lí giỏ hàng: thêm sản phẩm vào giỏ hàng, xóa sp ra khỏi giỏ hàng, cập nhật số lượng mua.
Cửa hàng sẽ nhập thiết bị theo thương hiệu và phân loại, sau đó bộ phận quản lý sẽ cập nhật thông tin sản phẩm lên website, bao gồm tên, giá, mô tả, ảnh và phân loại Ngoài ra, quản trị viên cũng sẽ thêm thông tin về sản phẩm mới và điều chỉnh trạng thái hoạt động của từng sản phẩm Khách hàng có thể truy cập website để xem chi tiết từng loại sản phẩm hoặc thực hiện tìm kiếm.
2.2.3 Yêu cầu hệ thống a Yêu cầu chức năng
Người dùng có thể dễ dàng truy cập website để xem và tìm kiếm thông tin sản phẩm, đặt hàng, thanh toán, cũng như quản lý tài khoản và giỏ hàng của mình Họ cũng có thể tạo tài khoản, đăng nhập và đăng xuất một cách thuận tiện.
Về tổ chức lưu trữ, thực hiện các yêu cầu:
- Thêm, xóa, sửa thông tin, hình ảnh về sản phẩm.
- Thêm, xóa, sửa thông tin về danh mục
- Xóa thông tin về bình luận
- Thêm, xóa, sửa thông tin về người dùng
- Cập nhật trạng thái đơn hàng, xóa đơn hàng. b Yêu cầu phi chức năng
- Giao diện trực quan dễ sử dụng
- Thao tác đơn giản, đầy đủ chức năng
- Dung lượng không quá lớn, tốc độ xử lý nhanh.
- Nâng cấp và bảo trì dễ dàng
- Đảm bảo an toàn dữ liệu khi chạy website trực tuyến.
Hình 3 1: Biểu đồ usecase tổng quát
Phân tích thiết kế cơ sở dữ liệu
2.3.1 Nội dung công việc a) Tìm hiểu về hệ quản trị cơ sở dữ liệu MongoDB
- Cấu hình database b) Phân tích, thiết kế cơ sở dữ liệu
- Tiến hành phân tích cơ sở dữ liệu.
- Tiến hành thiết kế, tạo các object dữ liệu
- Mô hình hoá dữ liệu cho MongoDB
- Kết nối ứng dụng nodejs với database
2.3.2.1 Tầm quan trọng của cơ sở dữ liệu.
Hầu hết các ứng dụng và website đều cần cơ sở dữ liệu để lưu trữ và xử lý thông tin, từ đó tạo ra các báo cáo và hỗ trợ tìm kiếm hiệu quả.
Khi dữ liệu trở thành trung tâm của ứng dụng, việc cung cấp chức năng cho người dùng phụ thuộc vào khả năng thao tác dữ liệu Điều này đặt ra thách thức cho các nhà thiết kế và phát triển ứng dụng, khi họ cần chú trọng đến cách sử dụng và quản lý dữ liệu hiệu quả.
+ Lưu dữ liệu tập trung.
+ Đảm bảo toàn vẹn dữ liệu.
+ Đảm bảo khả năng truy xuất đồng thời của nhiều người dùng trên dữ liệu. + Đảm bảo thời gian hồi đáp ngắn cho mỗi người dung.
+ Trao đổi dữ liệu giữa các hệ thống khác nhau.
MongoDB là cơ sở dữ liệu được thiết kế theo hướng đối tượng
Mongoose là một thư viện Object Data Modeling (ODM)
- Thư viện mô hoá dữ liệu đối tượng cho MongoDB
- Mongoose cho phép định nghĩa các object với một schema được định nghĩa rõ ràng, được anh xạ tới một MongoDB document
Tạo và CSDL online Để tạo datatabase bằng MongoDB thì các anh iem cần https://cloud.mongodb.com và làm như sau:
+ Tiếp đó sẽ hiện lên một trang cho phép bạn điền tên database và collation và ấn Create để tạo lập
- Bước 1: Chọn CSDL cần tạo bảng
- Bước 2: Viết một object thông tin cần tạo
2.3.3.1 Nghiên cứu các tài liệu.
- Chọn lọc các thông tin hợp lý
Tích lũy kiến thức sẵn có giúp bạn có cái nhìn tổng quát hơn, từ đó quy nạp thông tin hiệu quả hơn để định hướng cho mục tiêu tổng thể của mình.
2.3.3.2 Thiết kế cơ sở dữ liệu.
- Xác định mô tả các cấu trúc Database
- Mô tả đặc tính riêng.
- Kỹ năng đọc docs và google search
- Kỹ năng học hỏi liên tục, phân tích và nhìn nhận vẫn đề.
- Kỹ năng phân tích dữ liệu và thu thập những dữ liệu cần thiết.
- Kỹ năng xác định các vấn đề và các hạn chế.
- Kỹ năng sử dụng SQL.
- Học hỏi cách thức làm việc
- Có tính kỷ luật trong công việc
2.3.6 Tự đánh giá kết quả thực hiện công việc
- Làm quen dần với môi trường làm việc của công ty và học hỏi được nhiều kinh nghiệm làm việc thực tế.
- Trong thời gian đã củng cố và tìm hiểu thêm những kiến thức mới để thiết kếWebsite chuyên nghiệp.
XÂY DỰNG DEMO VÀ KẾT QUẢ ĐẠT ĐƯỢC
Vào việc demo
3.1.1 Cài đặt công cụ, thư viện
Download và cài đặt tại: https://nodejs.org/
Kiểm tra version NodeJS: node -v
NPM – là viết tắt của Node Package Manager, là một công cụ tạo và quản lý các thư viện lập trình JavaScript cho NodeJs
Link website: https://www.npmjs.com/
Bước 1: Gõ lệnh npm -v trên cmd để kiểm tra phiên bản.
Bước 2: Gõ lệnh npm init để tạo ra một file package.json.
Bước 3: Gõ lệnh npm install [tên package]
- ExpressJS là một framework để xây dựng các ứng dụng trong NodeJS
Bước 1: Tạo folder phongcach và chạy npm init
Bước 2: Cài đặt npm i express
Bước 3: Tạo file index.js
Bước 4: Bật terminal chạy câu lệnh node index.js
- Template Engines là công cụ giúp tách mã HTML thành các phần nhỏ hơn, gọn hơn, nhìn đỡ rườm già ngứa mắt hơn,
- Để tái sử dụng nhiều file HTML
- Template Engines sử dụng kỳ này là PUG (npm i pug để cài đặt)
- Link trang chủ https://getbootstrap.com/
Một số hình ảnh demo
Cấu trúc thư mục trong mô hình MVC
Hình 3 1: Cấu trúc theo mô hình MVC
Bước 1: Xây dựng các route tương ứng với các trang
Hình 3 2: Xây dựng các route
Bước 2: Từ route đó sẽ gọi đến các controller tương ứng
Hình 3 3: Xây dựng routes con
Bước 3: Trong controller sẽ viết các câu lệnh để lấy dữ liệu từ CSDL thông qua models
Hình 3 4: Xây dựng controller tương ứng với route
Bước 4: Sau khi lấy được dữ liệu thông qua model, controller sẽ truyền dữ liệu qua cho view
Bước 5: view sẽ nhận được dữ liệu và hiển thị ra giao diện người dùng
Hình 3 7: File hiển thị dữ liệu
- Ta dùng Mixin để sử dụng lại các phần code một số nơi mà không cần viết lại cấu trúc hoặc các tham số
- Sử dụng để upload ảnh online
- Dùng dotenv để quản lý private các biến môi trường
Hình 3 9: Code env a, Giao diện trang home phía client
Hình 3 8: Giao diện home b, Giao diện đăng ký
Hình 3 9: Giao diện đăng ký c, Trang danh sách sản phẩm
Hình 3 10: Giao diện danh sách sản phẩm e, trang phân quyền
Hình 3 11: Giao diện phân quyền f, Trang thêm mới sản phẩm
Hình 3 12: Giao diện thêm sản phẩm
Kết luận
- Kỷ luật và chấp hành đúng giờ làm việc.
- Kỹ năng giao tiếp, tác phong ứng sử chuyên nghiệp hơn:
Kỹ năng giao tiếp là yếu tố quan trọng giúp phát triển toàn diện cá nhân, đặc biệt trong lĩnh vực công nghệ thông tin Việc trình bày và giải thích thông tin một cách rõ ràng, cùng với khả năng hợp tác để tìm ra và thực hiện giải pháp, là cần thiết để giao nhiệm vụ hiệu quả cho cả nhóm.
Công ty cũng giúp thay đổi những tác phong ứng xử trong môi trường công sở:
- Tạo được mối quan hệ thân thiết với những anh chị đồng nghiệp, được anh chị nhiệt tình chỉ bảo.
- Hòa nhã với các nhân viên nơi thực tập, tham gia sôi nổi các hoạt động ngoài giờ làm việc cùng mọi người trong dự án.
- Chủ động tiếp cận công việc và sẵn sàng hỗ trợ đồng nghiệp để có thể hoàn thành công việc chung, tự khẳng định năng lực bản thân.
- Phong cách, trang phục luôn chỉnh tề, phù hợp, lịch sự
- Khả năng làm việc nhóm:
Làm việc theo nhóm mang lại nhiều lợi ích cho bản thân em, giúp em lắng nghe và tôn trọng ý kiến từ nhiều phía Qua đó, em rèn luyện khả năng thuyết phục, khuyến khích các thành viên trao đổi và suy xét các ý tưởng Đồng thời, em cũng nâng cao khả năng tự bảo vệ quan điểm và thuyết phục người khác đồng tình với ý kiến của mình.
- Lên kế hoặc công việc và quản lý thời gian:
Lập kế hoạch cho công việc là một kỹ năng quan trọng mà em đã học được tại công ty Để hoàn thành tốt nhiệm vụ, em biết cách sắp xếp các vấn đề cần giải quyết, ưu tiên những phần quan trọng nhất và tiến hành theo thứ tự giảm dần.
Việc này không chỉ giúp bản thân em điều chỉnh thời gian cho phù hợp mà còn giúp tiến độ công việc được nâng cao.
Bài báo cáo đã trình bày được lý thuyết tổng quan về HTML, CSS, JavaScript cũng như framework expressJS
Tìm hiểu và áp dụng những thứ đã học được để xây dụng giao diện trang web và một vài chức năng cơ bản của trang web.
Với thời gian hạn chế và kinh nghiệm thực tế còn ít, tôi nhận thấy mình còn nhiều thiếu sót về kiến thức và kỹ năng, ảnh hưởng đến kết quả đạt được Tôi sẽ nỗ lực khắc phục những hạn chế này để hoàn thành tốt bài báo cáo trong đợt bảo vệ đồ án sắp tới.
- Tích cực phát huy kỹ năng mềm đã tích lũy được trong môi trường làm việc thực tế.
- Tích cực học hỏi, trau rồi thêm nhiều kiến thức
Áp dụng các ngôn ngữ lập trình đã học vào việc giải quyết các bài toán quy mô lớn giúp xây dựng giao diện website phức tạp và hấp dẫn hơn.
