Báo cáo cuối kì môn nhập môn lập trình python cho phân tích Đề tài ứng dụng django framework tạo webapp(web Đọc truyện)

Một ứng dụng của lập trình wed khá phổ biến là wedsite ecommerce và đó là đề tài của chứng em tiền hành.Ở đề tài này chúng tôi sẽ tạo ra một wedsite để người dùng có thê mua những chiêc

Môn: Nhập môn lập trình python

cho phân tích

Đề tài: Ung dung Django framework tao

webapp( Web doc truyén)

GVHD: Nguyén Thanh Son

TP.HCM THANG 6/2021

Thanh vién nhom:

MUC LUC

CHƯƠNG 1: GIỚI THHIỆU 2-2 << <©S£€Ss£ES£€Ss£Ese€SseSsseserseseseerseseosee 4 1.1 Lý do chọn đề tài 4 1.2 GiGi thigu Ve Ge tbc sscssscssssssscssssssssssssssssssssssscsssssssssssssssesssssssssssssssesssessssees 4 CHUONG 2: TRINH BAY BAO CAO „5 2.1 Tổng quan vé Django 5

hy 408: 8000711 107 5

Sw phé biến của DanO Go HH ng HH ng 4 TH H08 98 5 Cach dat thu vién Django „6 2.2 Quản lý thư viện dùng trong Project 7 2.2.1 Cách cầu hình dự án và cách hoạt động nhóm - s5 5< «<< <s<+ 8 2.2.2 Giao diện tông quát và một số chức năng chính -5 13 2.3 Mô Hình MVC: HH Họ HH HH TH 0 19 2.3.5 MVC trong PFOj€CÍ co TT Họ TH TY 0 8 T041 98 21 2.4 User Registation and Login Authentication —- Đăng ký người dùng và xác 01) 1N) P)0158:1:7)1 27077 28 2.5 Password Change and Edit Infor Account- Đối mật khẩu tài khoản và chỉnh sửa thông tin tài khoải:, - <4 330 cà TT HH T904 cv 4 0906 34 2.6 Profile Page and Edit Profile Page— Trang cá nhân và trang chỉnh sửa trang

Cá IhẪNH «(<< 1 1 TH TH I0 10 8 00 0001 38 2.7 Model trong Django 44 2.7.1 Lý thuyết về Model trong D4anØ0 cọ in H01 vv 44 2.7.2 Áp dụng vào Project 46 2.8 Trang Admin trong DanØ0 - - - << se xì nh hi H Hi th nh 48 2.8.1 Tìm hiểu cơ bản về hệ thông Admin trong Dịang0 «« «<< 45 2.8.2 Áp dụng Admin vào PTr0jeCf -.e- se sec se se verkeveerke ae re seessre 5

CHUONG 1: GIOI THIEU

1.1 Lý do chọn đề tài

Nhận thấy được sự phát triển và phô biến của các thiết bị thong minh thi nhu cau

đề sỡ hữu một chiếc máy tính ngày càng tăng cao Nắm bắt được nhu cầu ngày cảng tăng cao ấy, chúng em quyết định xây dựng một website cho phép người dùng có thê đễ dàng

sỡ hữu cho mình một chiếc máy tính

1.2 Giới thiệu về đề tài

Công nghệ thông tin (CNTT) ngày càng có vai trò quan trọng trong cuộc sống hàng ngày của chúng ta Việc ứng dụng công nghệ thông tin vào các lĩnh vực trong đời sông giúp công việc được tiên hành nhanh chóng và hiệu quả hơn.Có rất nhiều công việc mới phát triển song song cùng voi CNTT, một trong số đó là lập trình wed, một hướng đi

dich vu mang lại hiệu quả kinh tê rât lớn

Một ứng dụng của lập trình wed khá phổ biến là wedsite ecommerce và đó là đề tài của chứng em tiền hành.Ở đề tài này chúng tôi sẽ tạo ra một wedsite để người dùng có thê mua những chiêc laptop một cách dễ dàng Tại đây người dùng sẽ tiếp cận được nhiều loại máy tình đến từ nhiều hãng khác nhau và dễ đàng thanh toán

Với sự phát triển của công nghệ thông tin thì bây giờ chúng ta đã có rất nhiều công nghệ để tạo ra một wedsite cho riêng mình, ví dụ như : JavaScrip,Python,PHP,C#, Va

ở đây chug em sẽ làm về ứng dụng Flask FreamWork tạo wedapp Các ưu điểm của Flask như giao diện quản trị đơn giản, thư viện hỗ trợ đầy đủ, khả năng mở rộng sẽ giúp cho

đồ án để đàng và tốt hơn.Kết hợp với kiến thức về cơ sở đữ liệu SQL chung em sé tao ra một wedsite mua bán máy tính với đầy đủ chức năng cho người dùng và admin

CHUONG 2: TRINH BAY BAO CAO

Những lợi thế của Flask:

« - Flask dễ cài đặt và triển khai: Sau khi cài đặt Python, để cài đặt Flask chỉ cần

bạn gõ lệnh: pip 1nstall Flask

« - Giúp bạn tập trung xây dựng ý tưởng, mục tiêu của mình: Flask có kiến trúc nhỏ, gọn nên bạn hoàn toàn không bị bó buộc bởi bộ khung céng kénh, khong gap bất cứ khó khăn nào khi cầu hình hay tổ chức ứng dụng Không những thế, Flask còn có các ưu điểm nổi bật như: cực kỳ linh hoạt, tối giản, đễ tìm hiểu và sử dụng, định tuyến dễ dang, rat dé mở rộng Vì vậy, công việc chính của bạn là chỉ cần xác định ý tưởng, mục tiểu, tập trung vào việc xây dựng ứng dụng web mà thôi + Nguon tai ligu phong phu: Flask cung cap rat nhiều tài liệu từ cài đặt đến thực hiện và triển khai, từ hướng dẫn nhanh đến hướng dẫn chỉ tiết Bạn có thê đễ đàng tìm kiểm, tham khảo, học tập về lập trinh web application véi Flask framework miễn phí trên Internet

¢ Linh hoat: Flask khong áp đặt cấu trúc dự án cụ thê nào, cho phép người phát

triển tự do tổ chức dự án theo cách họ muốn

¢ Extension ecosystem: Flask cung cấp một hệ sinh thái mở rộng (extension ecosysfem) phong phú cho phép người dùng mở rộng chức năng của Flask thông qua cac extension nhu Flask - SQLAIchemy cho viéc kết nối cơ sở đữ liệu, Flask -

WTF cho viéc xu ly mau, nhiéu extension khac

¢ Lightweight: Flask 1a mét framework siéu nhe, khong yéu cau nhiéu tài nguyên

và có thê được triển khai một cách dé dàng

Sw phé biến của Flask

Thực sự chưa có một bài thống kê cụ thê về sự phố biến các framework Việc đánh gia hiện nay dựa vào số lượng các web phố biến dùng Flask, số lượng người đóng góp codebase, và số lượng người phát trién cả tình nguyện lẫn được trả công Thì có thê cho rang Flask là framework phô biến

Cách dat thy vién Django

Ta sẽ cài đặt Flask bằng trình lệnh pip của Python Bây giờ bạn mở Terminal/CMD và

gõ lệnh sau:

pip install Flask

2.2 Quan ly thu vién dung trong Project

Các thư viện trong dự án được luu trong file requirements.txt để người sử dụng

cũng như tham gia phát triên dự án có thê cài đặt một cách nhanh nhật có thê

file requirements.txt trong hệ thống thư mục gốc

Những thư viện được đặt trong file

Đề thêm một thư viện vào ñle sau khi chúng ta cài đặt thì ta sẽ sử đụng lệnh pip

freeze > requirements txt

vd: Sau khi cài đặt thư viện mysqlClient để kết nối tới mysql ta sẽ chạy lệnh pip freeze > requirements.txt để khi người dùng hoặc người phát triển clone ve co thé nhan biết cũng như chạy lệnh pip install -r requirements.txt để load thư viện cần dùng

E Terminal

Chạy lệnh pip install -r requirements.txt để load thư viện

2.2.1 Cách cầu hình dự án và cách hoạt động nhóm

Với dự án này các thành viên sử dụng Github để hoạt động Trang github chính

thức của nhóm là https://github.com/dominhduc291001/My_ Truyen

Vậy chúng ta cần tìm hiểu Github là gì?

GitHub là một địch vụ nỗi tiếng cung cấp kho lưu trữ mã nguồn Git cho các dự án phân mêm Github có đây đủ những tính năng của Ơit, ngoài ra nó còn bô sung những tinh năng về socIal đề các developer tương tác với nhau

Vài thông tin về GIT:

® Là công cụ giúp quản lý source code tổ chức theo dạng đữ liệu phân tan

Giúp đồng bộ source code của team lên l server

Hỗ trợ các thao tác kiểm tra source code trong quá trình làm việc (diff, check modifications, show history, merge source, )

GitHub co 2 phién bản: miễn phí và trả phí Với phiên bản có phí thường được các doanh nghiệp sử dụng đề tăng khả năng quản lý team cũng như phân quyền bảo mật dự

án

Còn lại thì phần lớn chúng ta đều sử dụng Github với tài khoản miễn phí dé lưu trữ source code

e Github cung cap cac tinh nang social networking nhw feeds, followers, va network graph dé các developer học hỏi kinh nghiệm của nhau thông qua lich st commit

Nếu một comment để mô tả và giải thích một đoạn code Thi véi Github, commit message chính là phân mô tả hành động mà bạn thực hiện trén source code

Github trở thành một yêu tô có sức ảnh hưởng lớn trong cộng động nguồn mo Cùng với Linkedin, Github được coi là một sự thay thế cho CV của bạn Các nhà tuyển dụng cũng rất hay tham khảo Github profile đề hiểu về năng lực coding của ứng viên Các bước sử dụng và phát triển

Đề sử dụng cũng như phát triên dự án bước đầu tiên chúng ta cần clone về máy

Chúng ta mở cmd lên và khởi chạy lệnh như hình

Sau khi làm xong bước trên thì trên máy sẽ có thư mục dự án, chúng ta bật lên bằng trình

soạn thảo (ở Đây chúng ta dùng pycharm)

ango [MyTruyen]

Cấu trúc thư mục sẽ tương tự như sau

Để khởi chạy chúng ta cần đọc theo hướng dẫn trong file README.md hoặc truy cập vào link github chính đọc phân hướng dân

pip install -r requirements.txt

3 install admin interface

pip install django-admin-interface

3 make migration

python manage.py makemigrations

4 load migation

python managa.py migrate

5 run django project

python manage.py runserver

© Note: Chỉnh sửa thông tin database trong file setting

Hướng dẫn chỉ tiết cài dat str dung dy an

Sau khi hoàn thiện các bước trên chúng ta cần tạo một user admin(superuser) để sử dụng trang admin bang cau lénh python manage.py createsuperuser

(venv) E:\Django>python manage py

Lank to use 'minhduc'): admin1

the

IIUST create user anyway?

Các thao tác sử dụng github dé phat trién dự án theo nhóm

D6i véi mdi thanh vién sau khi clone tir github vé can phai tao | nhanh branch dé phat triên Chúng ta đề ý góc trai trong trinh soạn thảo có biều tượng github, chung ta chon

vào và chọn phân tạo branch

Remote Branches

Hinh anh giao dién tao branch

Sau khi tao xong branch chung ta can checkout ra branch mới vừa tạo đề tiễn hành code

(mặc định branch sẽ là master)

Local Branches Remote Branches

Chung ta checkout branch va tién hanh code

Sau khi hoàn thành xong từng phan chung ta tién hanh commit va tao push request Dé y thanh công cụ bên phải ta sẽ thấy mục chọn commit, nhan chon commit ta sé mé ra giao dién commit va push

Giao dién phan commit

Ở giao điện này chúng ta chọn những file cần push lên sau đó chọn phan commit and push

Một hộp thoại hiện ra chúng ta chọn push đề tiến hành push lên github

Dé đồng bộ hóa với những người phát trién khac chung ta can pull lai tir github Dé y goc phía trên màn hình ta thây biêu tượng pull, khi click vào thì code trên github sẽ được đồng bộ trở lại máy người dùng

2.2.2 Giao diện tổng quát và một số chức năng chính

Mỗi giao diện hiển thị sẽ tương ứng với l thư mục trong thư mục chính template (phần

hiển thi)

Giao diện trang chủ

Phân giao điện trang chủ được quản lý bởi file HomeView.py HomeView trong thư mục controler

object context M6t so ham co bản cần dùng cho giao điện trang chủ như

đề lây danh sách những truyện mới cập nhập

getNew View trả về danh sách truyện mới cập nhập

Tương tự ta có một số hàm như getTopView(), getNewChap(), getLoveView() để cung cập nội dung cho template hién thi

Tiếp sau ta sẽ tới phần giao diện của trang chủ

3 MYTRUYEN.VN “ = mye Bodmin >

Đây là giao diện chính thức của trang chủ

Phân giao diện được thiết kế bằng html5 + css và có sử dụng thêm bootstrap dé chia bố

cục cũng như reponsive website đề có thê sử dụng trên mọi thiết bị

Các trang hiển thị được dùng chung với l template chính nằm trong thư mục Base

File template Base được dùng đề khởi tạo html cũng như include những thư viện js

va css can dung

Ngoài code html chúng ta còn cần sử dụng một số thẻ trong django template như

1ƒ, for, đề hiên thị được dữ liệu từ server gửi về

G day ta str dung for dé lap tat ca cac item trong mang listTruyen

Đề hiền thi các thuộc tính đữ liệu ta cần phải bỏ trong cặp dấu ƒƒ}} đề hệ thống

nhận diện và mm ra đữ liệu lên màn hình

Ta sử dụng ƒƒitem.tentruyen}} đề hiển thị thuộc tính tentruyen trong object item

Dé hién thi 1 hinh anh tir hé thong ta can phai sir dung thé {% static tenbién %}

Để làm đẹp cho trang web chúng ta cần phải sử dụng một số thao tác với css File

home.css đảm nhận việc xử lý màu sắc cho trang web

co

2.3 Mô Hinh MVC:

- MVC là viết tắt của 3 từ Model-View-Controller:

- Model: Là kiến trúc dữ liệu database, là nơi cung cấp các chức năng xử lý đến đatabase

- View: Là nơi hiền thị giao điện cho người dùng

- Controller: Nhiệm vụ nhận các request của người dùng, sau đó sẽ lấy đữ liệu từ

model và đưa sang cho view

Khi có dữ liệu, controller sẽ gửi data sang view, view sẽ dựa vào data để xây dựng các hiển thị trang web và response về cho máy người dùng (Như sơ đỗ trên)

2.3.1 Django la gi ?

Dj ango là một trong những Web Framework phé bién, duoc viét bang Python, cung cap nhiéu tinh nang cho phat trién website nhu bao mat, database access, session, routing, localization

Django mặc định đã áp dụng mô hình MVC ngay từ đâu, diễn đạt như sau:

- Models: Chính là Model trong MVC, đây chính là nơi ta thiết kế ra những table cho database, từ đó Django ORM đã cung cấp những phương thức xử lý, nghiệp vụ lên đatabase

- Template: Chính là View trong MVC, là những template ta thiết kế ra cho trang web

- View: Day 1a Controller trong MVC, trong view co cac function xử lý khi có

request tl người dùng

Ở đoạn Code sau thể hiện cách hoạt dong MVC Django:

Post.DoesNotEx1st:

Http494(

render(request,

Hàm post nằm ở controller để xử lý các request người dùng

Dòng code LI: Chính là nơi tương tác controller với models

Dòng code 15: Thể hiện việc controller gửi data cho views views từ đây lo xử lý cách hiển thị cho người dùng

Một số công ty hàng đầu sử dụng Django như Instagram, Spotify, Youtube, Dropbox, trinh duyét Mozilla, Disqus

2.3.2 Lap trinh web voi Django:

Django được xây dựng giúp phát triển website nhanh chóng với đầy đủ thư viện, module cần thiết Đặc biệt, thiết kế sạch sẽ, thiết thực và gọn gàng

Kha nang dé đọc của Python, cùng với tính đơn giản, đầy đủ, cho phép lập trình viên tập trung vào các vấn đề phức tạp, logic nghiệp vụ cao mà không tốn thời gian cho những rắc rôi đã được người khác giải quyết

DỊ ango có mô hình xác thực người truy cập tuyệt vời, nhờ khả năng cầu hình user Điều này khiến nó trở thành sự lựa chọn hàng đầu khi trang web, ứng dụng cần ưu tiên về bảo mật

Ngoài ra, Diango sở hữu khả năng mở rộng tốt, đáp ứng lượng traffic lớn và không cần lo lang vé kha nang scale san pham cua minh

Hơn nữa, khi xây dựng CMS, Ecommerce Website, Social Network đều có thê kết nối linh hoạt với Django và không phụ thuộc lẫn nhau

2.3.3 Tại sao phải sw dung Django?

Django có một số ưu điểm như sau:

- Nhanh: Django được thiết kế để giúp các nhà phát triển đưa các ứng dụng từ ý tưởng đến hoàn thành càng nhanh càng tốt

- Có đầy đủ các thư viện/module cân thiết: Pango chăm sóc xác thực người

dùng, quán lí, nội dưng, bản đỗ trang web

- Dam bao vé tinh bao mật: không còn các nỗi lo về các lỗi bảo mật thông thường Django cting cung cap cá phương pháp đề lưu mật khâu an toàn

- Khả năng mở rộng tốt: Dj angO có thê đáp ứng nhu cầu trafñc lớn

- Tinh linh hoạt: Các công ty, tổ chức và chính phủ đã sử dụng Django dé xay

dựng tất cả mọi thứ - từ hệ thông quản lý nội dung đến mạng xã hội đến nền tảng

toán khoa học

-Dễ sử dụng: Django được tạo ra bởi ngôn ngữ lập trình Python và mô hình MVC nên rat dé img dụng trong các dự án Đa ngôn ngữ và được hô trợ Multi-Site

-Dé học: Có nhiều tài liệu hỗ trợ việc học Django, bao gom cả tài liệu miễn phí trên

mang va sách in Cộng đồng sử dụng Django hiện nay đang phát triên mạnh mẽ, newbie

có thé tim kiếm SỰ gIÚP, đỡ trên các trang facebook, diễn đàn, blog

2.3.4 Một số yêu cầu về cấu hình máy

Dây là một sô yêu cầu thiết yêu của máy tính đề có thê chuẩn bị tốt cho việc lập trình nói chưng và việc làm web với DJango nói riêng:

-Ô cứng SSD tối thiểu 256GB

- Bộ xử lý Intel Core 15 hoặc 17

- Độ phân giải Full HD, lý tưởng nhất là 1920x1080

- Ram 8Gb

2.3.5 MVC trong Project

Ta thừa kế các tính chất của models trong Django và tạo các cơ sở đữ liệu như đã thiết

kế, ở đây ta sử dụng đatabase Để khởi tạo cơ sở đữ liệu cho app MyTruyen ta vào thư mục Data/models.py và tạo models như sau - đây cũng chính là phần Model trong mô hình MVC

Theo mac dinh thi Django sé tao cho minh mét trang Admin co san dé quan li,tai dia chi

http://127.0.0.1:8000/admin co giao diện như sau:

€ © 12

Django administration

Trong thư mục Data, vao file formRegister.py tao class PostForm form nay được

kê thừa từ ModelForm - form mặc dinh cia Django, dung dé pass vao template cua trang forum

Trong Controler tạo file ForumView.py chứa các Views để xử lý cac request ttr người dùng và trả về các Respone tương ứng — đây chính là phần Controller trong mô hình MVC

Và bây giờ, ta chỉnh sửa đường dan để trang có thể truy cập Ta vào thư mục MyTruyen(urlspy Trước tiên ta cần import ForumView, ArticleDetailView, AddPostView vào urlspy Vì ban than template forum.html, add_post.html, article details.html duoc két thừa từ lớp ForumView khi đó cân thêm phương thức as_view() đề có truy xuất

Trong file urls.py tạo 3 path add_post, article/<mt:pk> và forum Khi ta thực hiện truy cập vào các url nay, no sé import va go1 cac View tương ứng đê xử lý

t PageView.as_vi

pans r path( AddPostView.as_view() =

path( ArticleDetailView.as_view() ALG ForunView.as_view() =

Trong thu muc templates, tao thu muc con Forum chira 3 template la forum.html,

article _details.html va add_post.html dung đê render thông tin cân hiện thị cho người dùng với đữ liệu từ các View tương ứng - đây chính là phần View trong mô hình MVC

forum.html

tn btn-primary">+Add Review</

ackground: gre

" style="color: yello SET)

D"ofiLe facebo

hor.profiLe.fac

author.profiLe.twitte t.author.profiL author.profile.ins

="btn btr

add_post.html

Vào câu lệnh terminal đề run server VỚI câu lénh python manage.py runserver Sau

đó truy cập địa chỉ 127.0.0.1:8000/forum đề xem thành qua

Hình bên dưới là giao diện Forum, những review của các user sẽ được hiện tại trang này(forum.html)

€ © © 127.00.1:2000/foru te @i

Copyright @2021 Python-Django by UTE Alll rights reserved

'envn - Website đọc truyện online được tổng hợp từ nhị trễ ternet

góc trên bên trai co nut Add Review dé user co thé thém review

khi nhan vao website sé mé dén trang add_post.html

63 MYTRUYEN.VN 8 Trang chi

Add Review

ai * ft Forun Loc truyén admin

Title thay Son rat dep trai

thay Son là một người thầy tuyệt vời !

By: Cuong Huynh

x a @

i aun Lọc truyện  admin

thãy Sơn lả một người thãy tuyệt vời rất chăm lo cho học sinh, thay day em rat dé hiéu bài ! thãy Sơn là một người thãy tuyệt với rất chăm lo cho học sinh, thay day em rat dễ hiểu bai ! thãy Sơn là một người thay tuyệt vời rất chăm lo cho học sinh, thăy dạy em rất dễ hiếu bài ! thầy Sơn là một người thãy tuyệt vời rất chăm lo cho hợc sinh, thăy dạy em rất dễ hiếu bài ! thầy Sơn là một người thầy tuyệt vai rat cham lo cho hoc

sinh, thay dạy em rất dễ hiểu bài ! thây Sơn là một người thảy tuyệt vời rất chăm lo cho học sinh, thây dạy em rất dễ hiểu bài ! thầy Sơn là một người thấy tuyệt với rất chăm lo cho học sinh, thầy dạy em rất dễ hiểu

bai!

Cuong Huynh

Profile Page | Website | Facebook | Twitter | Instagram

yêu thầy Sơn yêu thầy Sonyéu thay Sonyéu thay Sanyéu thiy Sonyéu thay Sơnyêu thiy Sonyéu thay Sơnyêu thấy Sơnyêu thầy Sơnyêu thấy Sơnyêu thấy Sơnyêu thấy Sơnyêu Sdnyéu thay Sonyéu thay Scnyéu thay Sonyéu thay Sonyéu thay Sơnyêu thay Sonyéu thay Sonyéu thay Sonyéu thay Sơnyêu thay Scnyéu thay Sơnyêu thay Sonyéu thay Sonyéu thay Sơnyêu thầy Sơnyêu thầy Sơnyêu thay Sơnyêu thấy Sơnyêu thay Sonyéu thay Sơnyêu thấy Son

2.4 User Registation and Login Authentication — Dang ky nguoi ding va xac

igo.contrib.auth.f django.contrib.auth †