TRƯỜNG ĐẠI HỌC THƯƠNG MẠI

HỌC KỲ II NĂM HỌC 2021 – 2022

(Phần dành cho sinh viên/ học viên)

Bài thi học phần: Thiết kế và triển khai Website Số báo danh: 14
Mã số đề thi: 3 Lớp: 2218ECIT0731
Ngày thi: 02/06/2022 Tổng số trang: 13 Họ và tên: Nguyễn Thị Hà Giang

Điểm kết luận:

GV chấm thi 1: …….………………………......

GV chấm thi 2: …….………………………......

Câu 1:

1.1 Thiết kế giao diện cho Website:

❖ Quy trình thiết kế giao diện cho Website được thực hiện khi:

Với nhu cầu sử dụng thiết bị thông tin ngày càng nhiều cùng với thời đại của công nghiệp 4.0
rất phát triển như hiện nay, các tổ chức, doanh nghiệp hay chính những cá nhân đều nhận thấy
được vai trò quan trọng của website. Sử dụng website hiệu quả như cá nằm trong nước đối với
thời đại hiện nay, biết tận dụng, khai thác hiệu quả các chức năng của website có thể đem lại
hiệu quả kinh doanh cho tổ chức doanh nghiệp cũng như những nhu cầu sử dụng cá nhân. Với
chiều hướng sử dụng ngày càng nhiều thì nhu cầu cũng tăng theo, khách hàng, người sử dụng
website mong muốn sử dụng những website có giao diện chuyên nghiệp, hài hòa nhưng thu hút
được người sử dụng. Để làm được điều đó thì việc chúng ta cần phải làm đó là đi thiết kế giao
diện cho website.

❖ Các bước để thiết kế giao diện cho Website:

Bước 1: Xác định yêu cầu của người sử dụng

Việc xác định được yêu cầu này có thể hiểu được những vấn đề mà website hướng đến để xây
dựng và giải quyết. Đầu vào là những phiếu khảo sát, thu thập thông tin từ người sử dụng, đầu
ra là tổng hợp tất cả những yêu cầu cho website cần xây dựng

Bước 2: Phác thảo ý tưởng thiết kế giao diện trên giấy

Họ tên SV/HV: Nguyễn Thị Hà Giang - Mã LHP: 2218ECIT0731Trang 1/13.

Dựa trên những yêu cầu để xây dựng được cơ bản hướng đi xây dựng việc thiết kế giao diện
website. Tránh việc tốn thời gian, chậm trễ khi xây dựng website xong mới bàn bạc, đánh giá
với người dùng. Đầu vào là yêu cầu của người dùng được tổng hợp lại dưới dạng phiếu, dạng
logic, rõ ràng và đầu ra là những bản thiết kế vẽ trên giấy

Bước 3: Đánh giá mẫu phác thảo

Từ việc lấy ý kiến của người dùng về bản phác thảo giúp người thiết kế tìm được giải pháp phù
hợp, có hướng đi đúng đắn cho việc xây dựng thiết kế giao diện website. Đầu vào là những bản
thiết kế vẽ trên giấy và đầu ra là ý kiến phản hồi, góp ý chỉnh sửa của người dùng, có hướng đi
xây dựng giao diện website chi tiết, phù hợp, rõ ràng hơn.

Bước 4: Dùng giao diện đồ họa sử dụng công cụ đồ họa

Tạo ra các bản vẽ trên công cụ đồ họa vd:photoshop để minh họa cho giao diện của website để
các đối tượng them gia và việc xây dựng giao diện website có được cái nhìn tổng quan. Đầu vào
là những yêu cầu của người dùng cụ thể với những ý tưởng và đầu ra là các bản vẽ có thể là trên
phần mềm photóhop hay các công cụ đồ họa tương tự. Tùy vào website có bao nhiêu chức năng
sẽ có số lượng những bản vẽ tương ứng.

Bước 5: Cắt thiết kế thành các mảnh nhỏ tương ứng từng đối tượng trên giao diện web

Chia nhỏ các phần trong giao diện web được xây dựng dưới dạng bản vẽ như bên trên để tạo ra
những phần công việc nhỏ phù hợp nguồn nhân lực để chuẩn bị cho quá trình code mã nguồn.
Đầu vào là toàn bộ bản vẽ và đầu ra là các bản vẽ nhỏ được chia ra phù hợp theo từng tiêu chí
nhất định

Bước 6: Chuyển thiết kế sang các tệp mã nguồn HTML

CSS Đưa ý tưởng thành những mã nguồn thuần về giao diện hiện thị để nhìn rõ ràng hơn việc
triển khai các ý tưởng trong thực tế. Đầu vào là những bản vẽ được chia nhỏ và đầu ra là giao
diện khi được thiết kế bằng các tệp html và css

Bước 7: Test giao diện trên các trình duyệt khác nhau

Xem xét liệu giao diện có phù hợp với nhiều trình duyệt thiết bị không, tránh trưởng hợp bị lỗi
gây ảnh hưởng không tốt tới trải nghiệm của người dùng vì thực tế người dùng có thể truy cập
vào trang web từ nhiều thiết bị, trình duyệt. Đầu vào là những tệp css, html đầu ra là những
đánh giá về việc hiển thị giao diện trong những trình duyệt, thiết bị khác nhau

Bước 8: Chuyển mã nguồn giao diện cho đội lập trình

Họ tên SV/HV: Nguyễn Thị Hà Giang - Mã LHP: 2218ECIT0731Trang 2/13.

Chuyển công việc sang cho lập trình viên để đội lập trình có thể bổ sung thêm những tính năng.
Đầu vào là những tệp css, html đã được chỉnh sửa cho tối ưu và đầu ra là tệp mã nguồn đã được
thêm những tính năng đặc thù đã được yêu cầu từ phía người dùng

Công nghệ và công cụ hỗ trợ khi thiết kế website:

Các ngôn ngữ lập trình như : HTML, CSS, JavaSCript…

Phần mềm photoshop, thiết kế đồ họa của Adobe gồm Adobe Lightroom, Photoshop,
Dreamweaver… đây là những công cụ nổi bật cũng như được sử dụng nhiều nhất hiện nay
nhằm mục đích thiết kế đồ họa từ cơ bản đến nâng cao.

Ngoài ra còn một số phần mềm thiết kế hỗ trợ thiết kế giao diện website chuyên nghiệp như:
Sketch, Corel, Lunacy…

1.2 Vai trò của HTML, CSS, JavaScript, PHP khi được sử dụng để xây dựng website:

❖ Vai trò của HTML trong xây dựng website:

HTML là một loại ngôn ngữ siêu văn bản, nó được sinh ra để tạo nên các trang web với các
phần thông tin được trình bày trên Word Wide Web. Tuy nhiên HTML chỉ đóng góp 1 phần
trong quá trình xây dựng và thiết kế website, cụ thể HTML chỉ giúp cấu thành các cấu trúc cơ
bản trên 1 website và định dạng các siêu văn bản, nó đóng vai trò như một khung xương của
website cùng với các thành phần còn lại như da thịt để bù đắp và xây dựng một website hoàn
chỉnh hơn. Ngoài ra, để hiện thị thông tin, dữ liệu đã xử lý cho người dùng xem và sử dụng thì
vẫn cần 1 trong những ngôn ngữ lập trình là HTML. Đặc biệt, với đặc tính dễ hiểu, dễ học, tạo
điều kiện dễ dàng cho những người mới bắt xây dựng website. Vì những vai trò quan trọng trên
mà HTML là thành phần chính cũng như là thành phần không thể thiếu quá trình xây dựng
website nào.

Ví dụ về một website xây dựng những bước đầu, chúng ta có thể sử dụng các cặp thẻ HTML
như <head></head>, <body></body>, <p></p> để định hình khung website như những nét vẽ
đầu của bức tranh, ta tô màu, làm sinh động bức tranh đó bằng việc sử dụng thêm các ngôn ngữ
khác.

❖ Vai trò của CSS

CSS là một công cụ tuyệt với để chuẩn hóa lại các thẻ trong ngôn ngữ đánh dấu như HTML.
CSS giúp tạo 1 định dạng thống nhất trên toàn bộ nội dung của trang Web 1 cách nhanh nhất.
Hiện nay CSS được các nhà thiết kế Web ưu tiên và sử dụng nhiều.

“Vậy điều gì khiến cho CSS được ưa chuộng như vậy?”. Để trả lời cho câu hỏi này thì em sẽ
nêu những vai trò nổi bật mà CSS đã góp phần vào xây dựng website như sau:

Họ tên SV/HV: Nguyễn Thị Hà Giang - Mã LHP: 2218ECIT0731Trang 3/13.

 - CSS có khả năng giải quyết nhiều vấn đề gặp phải trong xây dựng website: một số vấn
đề đó là nếu chúng ta chỉ dùng ngôn ngữ HTML để xây dựng web, khi đó sẽ tốn rất
nhiều thời gian và công sức để định dạng lại các thành phần của mỗi trang như văn bản,
sắp xếp chúng, màu sắc... và CSS đã giải quyết được tất cả vấn đề trên.
- CSS giúp ta tiết kiệm được cả công sức và thời gian bởi khả năng điều khiển định dạng
của nhiều trang web và phân biệt cách hiển thị của website đó các tệp CSS có thể lưu bên
ngoài, điều này giúp ta có thể chỉnh sửa website trong quá trình xây dựng bằng 1 tệp.
Ngoài ra CSS hoạt động dựa vào các vùng được lựa chọn nên khi sử dụng CSS chúng ta
có thể dễ dàng kiểm soát các lỗi hơn.
- Một công cụ cung cấp thuộc tính với khả năng điều chỉnh là vô hạn, chúng ta có thể dễ
dàng thiết kế, định dạng với nhiều style trên website đã được xây dựng khung bằng
HTML.

Có thể nói CSS là một công cụ giúp việc xây dựng website hiệu quả hơn. Trang web sẽ chỉ là
một trang chứa văn bản và thiếu đi sự chuyên nghiệp, thu hút người sử dụng khi chỉ xây dựng
dựa trên HTML, sử dụng CSS giúp cho website chuyên nghiệp, lung linh và bắt mắt hơn.

❖ JavaScript có vai trò như nào đối với việc xây dựng website

JavaScript là một ngôn ngữ lập trình website, được tích hợp và nhúng trong HTML và giúp cho
website trở nên sống động hơn, nó còn là 1 ngôn ngữ lập trình phức tạp hơn HTML và CSS.
Hiện nay, thay vì sử dụng JavaScript, các nhà thiết kế web có thể sử dụng HTML và CSS để
thực hiện các hiệu ứng sinh động... Tuy nhiên, nếu có JavaScript thì hoạt động này có thể nhanh
chóng và đỡ tốn công sức hơn rất nhiều. JavaScript có thể tạo các hiệu ứng chuyên nghiệp, bắt
mắt như, xoay hình,kiểm tra thông tin nhập hợp lệ, hiển thị thông báo người dùng... Ngoài ra
JavaScript có một số vai trò cụ thể trong xây dựng website như sau:

- JavaScript trong xây dựng website có thể được sử dụng để sửa đổi nội dung cho trang
web, giúp trang web hoạt động theo nhiều cách khác nhau để tương thích cũng như đáp
ứng được nhu cầu của người dùng.
- Với cách thức hoạt động của JavaScript có thể giúp website tăng khả năng tương tác linh
hoạt hơn bằng việc hồi đáp lại các tương tác của người dùng, website chuyên nghiệp, tổ
chức các thành phần trên website khoa học, logic hơn
- JavaScript là ngôn ngữ đa nền tảng bởi chúng có thể chạy được ở nhiều môi trường máy
chủ, phần mềm, tạo điều kiện thuận lợi cho người làm web trong việc sử dụng, triển khai
ngôn ngữ vào quá trình xây dựng, thiết kế website.
- JavaScript còn hỗ trợ quản lý toàn bộ trang web qua các thao tác cơ bản như: thêm mới,
hủy bỏ, thay đổi thuộc tính của dữ liệu, ..

Để có một trình duyệt website hoàn chỉnh với đầy đủ các tính năng hoàn hảo, giúp đem lại trải
nghiệm tuyệt vời tới người truy cập, chúng ta nên áp dụng đồng thời CSS + HTML + Javascript.

Họ tên SV/HV: Nguyễn Thị Hà Giang - Mã LHP: 2218ECIT0731Trang 4/13.

Như vậy, website của bạn sẽ được xây dựng trên một nền tảng vững chắc, giúp giảm thiểu tối đa
các lỗi xung đột trong quá trình sử dụng của người dùng.

❖ PHP trong xây dựng website:

PHP là một loại ngôn ngữ lập trình kịch bản được phát triển chuẩn mã nguồn mở, được sử dụng
phổ biến để tạo ra các ứng dụng web chạy phía máy chủ, nó còn hỗ trợ cả lập trình hướng thủ
tục và ngôn ngữ lập trình hướng đối tượng. Một trong những vai trò quan trọng nhất của PHP là
sự hỗ trợ của nó cho một loạt các cơ sở dữ liệu. Xây dựng một website hỗ trợ cơ sở dữ liệu cực
kỳ đơn giản bằng cách sử dụng một trong các tiện ích mở rộng dành riêng cho cơ sở dữ như
mysql hoặc có thể kết nối với các cơ sở dữ liệu khác theo nhiều phương thức khác nhau.

Câu 2: Xây dựng website quản lý hàng

a. Ảnh chụp bộ thiết kế cơ sở dữ liệu:

Trang web có 1 cơ sở dữ liệu QL_HANG gồm có 1 bảng là bảng hàng gồm các cột mahang,
tenhang, dongia, loai.

Họ tên SV/HV: Nguyễn Thị Hà Giang - Mã LHP: 2218ECIT0731Trang 5/13.

 Hình ảnh bộ cơ sở dữ liệu

b. Số lượng, danh sách các tệp mã nguồn:

Trong bài em có sử dụng 5 tệp cụ thể :

1. index.php
2. xulythemmoi.php
3. ketnoi.php
4. sua.php
5. xulysuadl.php

c. Chi tiết các tệp mã nguồn:

1. index.php

Trong tệp mã nguồn này em có để form thêm mới và bảng hiển thị dữ liệu, được viết theo trình
tự để dễ thao tác cũng như thuận tiện theo dõi. Cũng như có sử dụng đoạn CSS lồng vào HTML
và PHP để website có màu săc, bắt mắt hơn.

Họ tên SV/HV: Nguyễn Thị Hà Giang - Mã LHP: 2218ECIT0731Trang 6/13.

Họ tên SV/HV: Nguyễn Thị Hà Giang - Mã LHP: 2218ECIT0731Trang 7/13.
Họ tên SV/HV: Nguyễn Thị Hà Giang - Mã LHP: 2218ECIT0731Trang 8/13.
2. xulythemmoi.php

Tệp mã nguồn này dùng để xứ lý dữ liệu qua form ở tệp index.php

Họ tên SV/HV: Nguyễn Thị Hà Giang - Mã LHP: 2218ECIT0731Trang 9/13.

3. ketnoi.php

Tệp chứa các đoạn mã giúp kết nối đươc với database, việc tách riêng thành 1 tệp giúp chúng ta
dễ dàng thêm kết nối với database vào các tệp khác và thuận tiện cho việc thay đổi máy chủ …

4.sua.php

Họ tên SV/HV: Nguyễn Thị Hà Giang - Mã LHP: 2218ECIT0731Trang 10/13.

Họ tên SV/HV: Nguyễn Thị Hà Giang - Mã LHP: 2218ECIT0731Trang 11/13.
5.xulysuadl.php

d. Ảnh chụp màn hình thực thi mã nguồn:

Tiến hành mở tệp index.php dựa vào công cụ mysql, có hình dạng như hình dưới đây:

Họ tên SV/HV: Nguyễn Thị Hà Giang - Mã LHP: 2218ECIT0731Trang 12/13.

 Tiến hành nhập dữ liệu vào
form như dữ liệu em vừa
nhập vào trong form

nhấn nút “Thêm mới”

Dữ liệu vừa điền vào form

đã được cập nhật lên cơ sở
dữ liệu cũng như

phần dữ liệu đã được bổ

sung vào bảng HANG, dưới đây là hình ảnh sau khi đã cập nhật.

Trong cột sửa, khi ta tiến hành kích chuôt vào “Edit”, giao diện sẽ chuyển sang tệp mã nguồn
sua.php có form chứa dữ liệu để ta chỉnh, ví dụ nhấn “Edit” của mã ở hàng cuối cùng của bảng
hiển thị là mã IP01.

Hiển thị giao diện của tệp mã nguồn sua.php, trong fỏm
là dữ liệu mới em nhập vào form, muốn sửa cho sản
phẩm có mã hàng là IP01.

Sau khi nhập xong dữ liệu cần sửa, nhấn nút “Sửa”, dữ
liệu của mã IP01 đã được cập nhật ở bảng tại giao diện

Họ tên SV/HV: Nguyễn Thị Hà Giang - Mã LHP: 2218ECIT0731Trang 13/13.

của tệp index.php

Tại form của tệp mã nguồn, khi ta tiến hành nhập dữ liệu để thêm mới cần nhập đầy đủ 4 yếu tố,
thiếu 1 trong 4 đều thêm mới không thành cồn, ví dụ: Khi ta nhập thiếu dữ liệu cho ô “Loại
hàng” sẽ có thông báo như hình dưới.

---Hết---

Họ tên SV/HV: Nguyễn Thị Hà Giang - Mã LHP: 2218ECIT0731Trang 14/13.