Và cho đến thời điểm viết bài này là 2015, WordPress đã được xem như là một hệ quản trị nội dung CMS – Content Management System vượt trội để hỗ trợ người dùng tạo ra nhiều thể loại webs
Trang 2Giáo viên hướng dẫn:
inh viên th hiện: Ths Lê Quố Anh Vương Đứ Kiên
M số sinh viên: 1251075392
Nghệ An, tháng 05 năm 2017
Trang 3LỜI CẢM ƠN
Để hoàn thành đồ án tốt nghiệp này, em xin chân thành gửi lời cảm ơn chân thành
tới các thầy cô giáo trong trường Đại học Vinh nói chung và các thầy cô trong khoa
Công nghệ Thông tin nói riêng đã tận tình giảng dạy, truyền đạt cho em những kiến thức
và kinh nghiệm quý báu trong suốt thời gian qua
Đặc biệt, em xin được gửi lời cảm ơn sâu sắc đến thầy giáo ThS Lê Quốc Anh,
thầy đã luôn giúp đỡ tận tình, tạo mọi điều kiện tốt nhất cho em trong quá trình hướng dẫn đồ án Sự chỉ dẫn tận tình và những ý kiến đóng góp của thầy đã giúp em rất nhiều trong quá trình hoàn thiện đồ án này
Em cũng xin được gửi lời cảm ơn tới Công ty CP Phát triển công nghệ Redsand
đã tạo điều kiện cho em học tập và làm việc hơn 1 năm qua, quá trình đó đã cho em học hỏi được nhiều kiến thức và cách thức làm việc của công ty, qua đó cũng giúp em hoàn thành đồ án này
Em cũng xin được gửi lời cảm ơn tới gia đình, bạn bè, các anh chị đã luôn quan
tâm, động viên và tạo mọi điều kiện tốt nhất để em có thể hoàn thành đồ án này
Mặc dù em đã có sự cố gắng nhất định nhưng do thời gian và kiến thức còn hạn hẹp nên đồ án này còn nhiều thiếu sót và hạn chế Kính mong nhận được sự đóng góp ý kiến của thầy cô và các bạn để đồ án này được hoàn thiện hơn
Em xin chân thành cảm ơn!
Nghệ An, tháng 04 năm 2017
Sinh viên
Vương Đức Kiên
Trang 4MỤC LỤC
LỜI CẢM ƠN 1
MỤC LỤC 3
Chương 1 GIỚI THIỆU CÁC NỀN TẢNG HỖ TRỢ 4
1.1 HTML 4
1.1.1 Cấu trúc chung của một trang HTML 4
1.1.2 Các thẻ HTML cơ bản 4
1.2 WORDPRESS 5
1.2.1 Các ưu điểm của Wordpress 7
1.2.2 Các nhược điểm: 7
1.2.3 Công cụ hỗ trợ sever ảo trên máy cá nhân 7
1.3 PHP 8
1.3.1 Tại sao nên dùng PHP 9
1.3.2 Các lệnh PHP chủ yếu dùng trong web 10
1.3.2.1 Điều kiện If(){ } else{ } 10
1.3.2.2 Vòng lặp for() 10
1.4 PHOTOSHOP 11
Chương 2 TỔNG QUAN VỀ ĐỀ TÀI, PHÂN TÍCH VÀ THỰC THI 12
2.1 TỔNG QUAN ĐỀ TÀI 12
2.2 PHÂN TÍCH VÀ THỰC THI TRANG WEB 15
2.2.1 Xây dựng giao diện bằng HTML 15
2.2.1.1 Xây dựng giao diện trang chủ 15
2.2.2 Xây dựng trang web trên Wordpress 22
2.2.2.1 Cấu trúc các mục trong folder 22
2.2.2.2 Demo 1 số phần code quan trọng 26
Chương 3 DEMO WEB KC HÀ TĨNH 36
3.1 Trang chủ 36
3.2 1 Số trang con 37
3.3 Trang quản lý 39
3.4 Quản lý bài post 40
3.5 Mobile 41
Trang 5Chương 1 GIỚI THIỆU CÁC NỀN TẢNG HỖ TRỢ 1.1 HTML
Trang Web là sự kết hợp giữa văn bản và các thẻ HTML HTML là chữ viết tắt của HyperText Markup Language được hội đồng World Wide Web Consortium (W3C) quy định Một tập tin HTML chẳng qua là một tập tin bình thường, có đuôi html hoặc htm
HTML giúp định dạng văn bản trong trang Web nhờ các thẻ Hơn nữa, các thẻ html có thể liên kết từ hoặc một cụm từ với các tài liệu khác trên Internet Đa số các thẻ HTML có dạng thẻ đóng mở Thẻ đóng dùng chung từ lệnh giống như thẻ mở, nhưng thêm dấu xiên phải (/) Ngôn ngữ HTML qui định cú pháp không phân biệt chữ hoa chữ
thường Ví dụ, có thể khai báo <html> hoặc <HTML> Không có khoảng trắng trong
1 Thẻ <head> </head>: Chứa tiêu đề web, link liên kết các gói hỗ trợ cho chức
năng của web, chứa các link seo web, hỗ trợ tiếng việt…
2 Thẻ <title> </title>: Hiện tiêu đề web
3 Thẻ <body> </body>: Tất cả các thông tin khai báo trong thẻ <body> đều có
thể xuất hiện trên trang Web Những thông tin này có thể nhìn thấy trên trang Web
4 Thẻ <p>…</p>:Tạo một đoạn văn bản mới
Trang 65 Thẻ định dạng bảng <table>…</table>: Đây là thẻ định dạng bảng trên trang
Web Sau khi khai báo thẻ này, bạn phải khai báo các thẻ hàng <tr> và thẻ cột <td> cùng
với các thuộc tính của nó
6 Thẻ hình ảnh <img>: Cho phép bạn chèn hình ảnh vào trang Web Thẻ này
thuộc loại thẻ không có thẻ đóng
7 Link liên kết <a> </a>: Là loại thẻ dùng để liên kết giữa các trang Web hoặc
liên kết đến địa chỉ Internet, Mail hay Intranet(URL), địa chỉ trong tập tin trong mạng cục bộ (UNC) và các bài post trong web
8 Các thẻ Input: Thẻ Input cho phép người dùng nhập dữ liệu hay chỉ thị thực thi
một hành động nào đó, thẻ Input bao gồm các loại thẻ như: text, password, submit, button, reset, checkbox, radio, image
9 Thẻ Textarea: < Textarea> < \Textarea>: Thẻ Textarea cho phép người
dùng nhập liệu với rất nhiều dòng Với thẻ này bạn không thể giới hạn chiều dài lớn nhất trên trang Web
10 Thẻ Select: Thẻ Select cho phép người dùng chọn phần tử trong tập phương
thức đã được định nghĩa trước Nếu thẻ Select cho phép người dùng chọn một phần tử trong danh sách phần tử thì thẻ Select sẽ giống như combobox Nếu thẻ Select cho phép người dùng chọn nhiều phần tử cùng một lần trong danh sách phần tử, thẻ Select đó là dạng listbox
11 Thẻ Form: Khi bạn muốn submit dữ liệu người dùng nhập từ trang Web phía
Client lên phía Server, bạn có hai cách để làm điều nàu ứng với hai phương thức POST
và GET trong thẻ form Trong một trang Web có thể có nhiều thẻ Form khác nhau, nhưng các thẻ Form này không được lồng nhau, mỗi thẻ form sẽ được khai báo hành động (action) chỉ đến một trang khác
1.2 WORDPRESS
WordPresslà một phần mềm nguồn mở (Open Source Software) được viết bằng ngôn ngữ lập trình website PHP (Hypertext Preprocessor) và sử dụng hệ quản trị cơ sở dữ liệu MySQL WordPress được ra mắt lần đầu tiên vào ngày27/5/2003bởi tác giảMatt
Trang 7MullenwegvàMike Little Hiện nay WordPress được sở hữu và phát triển bởi công ty Automattic có trụ sở tại San Francisco, California thuộc hợp chủng quốc Hoa Kỳ
WordPress là một mã nguồn mở bằng ngôn ngữ PHP để hỗ trợ tạo blog cá nhân,
và nó được rất nhiều người sử dụng ủng hộ về tính dễ sử dụng, nhiều tính năng hữu ích Qua thời gian, số lượng người sử dụng tăng lên, các cộng tác viên là những lập trình viên cũng tham gia đông đảo để phát triển mã nguồn WordPress có thêm những tính năng tuyệt vời Và cho đến thời điểm viết bài này là 2015, WordPress đã được xem như là một
hệ quản trị nội dung (CMS – Content Management System) vượt trội để hỗ trợ người dùng tạo ra nhiều thể loại website khác nhau như blog, website tin tức/tạp chí, giới thiệu doanh nghiệp, bán hàng – thương mại điện tử, thậm chí với các loại website có độ phức tạp cao như đặt phòng khách sạn, thuê xe, đăng dự án bất động sản,…vâng…vâng…Hầu như mọi hình thức website với quy mô nhỏ và vừa đều có thể triển khai trên nền tảng WordPress
Nhưng như thế không có nghĩa là WordPress chỉ thích hợp với các dự án nhỏ, mà hiện nay có tới khoảng 25% website trong danh sách 100 website lớn nhất thế giới sử dụng mã nguồn WordPress Ví dụ như trang tạp chíTechCrunch, Mashable, CNN, BBC America, Variety, Sony Music, MTV News, Bata, Quartz,…rất nhiều không thể kể hết được
• Trên thế giới, có khoảng 25 bài viết được đăng lên các website sử dụng WordPress mỗi giây
• Số lượng website làm bằng WordPress chiếm 23% tổng số lượng website trên thế giới
• Trong số 100% các website sử dụng mã nguồn CMS, WordPress chiếm 60%
• Phiên bản WordPress 4.0 đạt hơn 16 triệu lượt tải chỉ sau khoảng hai tháng
• WordPress đã được dịch sang 52 ngôn ngữ khác nhau Tuy nhiên lại chưa có phiên bản tiếng Việt chính thức, nhưng bạn có thể Việt hóa dễ dàng bằng cách tìm bài trên blog với từ khóa “Việt hóa WordPress“
• Có hơn 80 chương trình họp mặt về WordPress được tổ chức vào năm 2014
Trang 8• Mã nguồn WordPress hiện đang có khoảng 785 lập trình viên cùng hợp tác phát
• Nhiều khái niệm khó hiểu nếu mới bắt đầu
• Muốn tùy biến WordPress, chúng ta phải có kiến thức lập trình web căn bản
• Các plugin và theme đẹp đa phần phải trả phí
1.2.3 Công cụ hỗ trợ sever ảo trên máy cá nhân
Xampp là chương trình tạo máy chủ Web (Web Server) trên máy tính cá nhân
(Localhost) được tích hợp sẵn Apache, PHP, MySQL, FTP Server
Xampp là viết tắt của X + Apache + Mysql + PHP + Perl Chữ X là cross
(platform) ám chỉ dùng được cho cả 4 hệ điều hành khác nhau : Windows, Linux, Solaris
và MAC
Trang 9Hình 1.1: Giao diện ứng dụng Xampp
Database KC Hà Tĩnh trên Xampp
Hình 1.2: Database của KC Hà Tĩnh trên phpmyadmin
1.3 PHP
PHP là chữ viết tắt của “Personal Home Page” do Rasmus Lerdorf tạo ra năm
1994 Vì tính hữu dụng của nó và khả năng phát triển, PHP bắt đầu được sử dụng trong môi trường chuyên nghiệp và nó trở thành “PHP: Hypertext Preprocessor”
Trang 10Thực chất PHP là ngôn ngữ kịch bản nhúng trong HTML, nói một cách đơn giản
đó là một trang HTML có nhúng mã PHP, PHP có thể được đặt rải rác trong HTML
PHP là một ngôn ngữ lập trình được kết nối chặt chẽ với máy chủ, là một công nghệ phía máy chủ (Server-Side) và không phụ thuộc vào môi trường (cross-platform) Đây là hai yếu tố rất quan trọng, thứ nhất khi nói công nghệ phía máy chủ tức là nói đến mọi thứ trong PHP đều xảy ra trên máy chủ, thứ hai, chính vì tính chất không phụ thuộc môi trường cho phép PHP chạy trên hầu hết trên các hệ điều hành như Windows, Unix và nhiều biến thể của nó Đặc biệt các mã kịch bản PHP viết trên máy chủ này sẽ làm việc bình thường trên máy chủ khác mà không cần phải chỉnh sửa hoặc chỉnh sửa rất ít
Khi một trang Web muốn được dùng ngôn ngữ PHP thì phải đáp ứng được tất cả các quá trình xử lý thông tin trong trang Web đó, sau đó đưa ra kết quả ngôn ngữ HTML
Khác với ngôn ngữ lập trình, PHP được thiết kế để chỉ thực hiện điều gì đó sau khi một sự kiện xảy ra (ví dụ, khi người dùng gửi một biểu mẫu hoặc chuyển tới một URL)
1.3.1 Tại sao nên dùng PHP
Để thiết kế Web động có rất nhiều ngôn ngữ lập trình khác nhau để lựa chọn, mặc
dù cấu hình và tính năng khác nhau nhưng chúng vẵn đưa ra những kết quả giống nhau Chúng ta có thể lựa chọn cho mình một ngôn ngữ: ASP, PHP, Java, Perl và một số loại khác nữa Vậy tại sao chúng ta lại nên chọn PHP Rất đơn giản, có những lí do sau mà khi lập trình Web chúng ta không nên bỏ qua sự lựa chọn tuyệt vời này PHP được sử dụng làm Web động vì nó nhanh, dễ dàng, tốt hơn so với các giải pháp khác
PHP có khả năng thực hiện và tích hợp chặt chẽ với hầu hết các cơ sở dữ liệu có sẵn, tính linh động, bền vững và khả năng phát triển không giới hạn
Đặc biệt PHP là mã nguồn mở do đó tất cả các đặc tính trên đều miễn phí, và chính vì mã nguồn mở sẵn có nên cộng đồng các nhà phát triển Web luôn có ý thức cải tiến nó, nâng cao để khắc phục các lỗi trong các chương trình này
PHP vừa dễ với người mới sử dụng vừa có thể đáp ứng mọi yêu cầu của các lập trình viên chuyên nghiệp, mọi ý tuởng của các bạn PHP có thể đáp ứng một cách xuất sắc
Trang 11Cách đây không lâu ASP vốn đƣợc xem là ngôn ngữ kịch bản phổ biến nhất, vậy
mà bây giờ PHP đã bắt kịp ASP, bằng chứng là nó đã có mặt trên 12 triệu Website
1.3.2 Các lệnh PHP chủ yếu dùng trong web
1.3.2.1 Điều kiện If(){ } else{ }
Mỗi câu lệnh điều kiện bao gồm một mệnh đề if:
If(điều kiện){
//thực hiện một điều gì đó }
Điều kiện này có thể đƣợc mở rộng thành:
If(điều kiện){
//thực hiện một điều gì đó } else {
//thực hiện một điều khác }
Và:
If(điều kiện 1){
//thực hiện một điều gì đó } elseif(điều kiện 2) { //thực hiện một điều khác }else {
//thực hiện một điều khác nữa }
Trang 12Ngoài ra Photoshop còn hỗ trợ copy đoạn văn bản để tiết kiệm thời gian code web
Hình 1.3 : Vùng làm việc với Photoshop
Trang 13Chương 2 TỔNG QUAN VỀ ĐỀ TÀI, PHÂN TÍCH VÀ THỰC THI 2.1 TỔNG QUAN ĐỀ TÀI
Hiện nay để quảng bá tốt thương hiệu của công ty thì xây dựng 1 website là 1 ý tưởng tuyệt vời và có hiệu quả nhất Bởi thế, KC Hà Tĩnh đã đề xuất việc xây dựng website cho riêng họ để quảng bá thương hiệu của họ khắp cả nước với các loại sản phẩm nông nghiệp chất lượng, các loại máy móc, phân bón và cả sự tư vấn hữu ích đối với nhà nông
KC Hà Tĩnh với thiết kế đẹp mắt, mang đầy đủ chức năng của 1 website tin tức giúp người dùng dễ sử dụng, cũng như nắm bắt được mọi thông tin của nhà cung cấp,
Khách hàng có thể xem trước tất cả các sản phẩm nông nghiệp mới của nhà cung cấp qua internet, được giải đáp thắc mắc 24/24, được nắm bắt các công ty liên kết với KC
Được xây dựng trên nền tảng Wordpress nên trang web thân thiện với người quản
lý Admin có thể cập nhật thêm thông tin mới nhanh chóng, các thao tác quản lý đơn giản phù hợp cho người không có kiến thức chuyên ngành về lập trình
Website KC Hà Tĩnh được xây dựng bằng ngôn ngữ HTML, CSS, Javascript chứa đầy đủ yêu cầu của khách hàng cùng với sự hỗ trợ của Bootstraps càng làm cho web thêm
sự tương thích với các loại màn hình Được phát triển trên nền tảng Wordpress và ngôn
Trang 14ngữ PHP nên KC Hà Tĩnh là 1 website năng động, phù hợp với xu hướng web của thế giới, đáp ứng được nhu cầu của khách hàng và thân thiện với người dùng
Vì những lý do trên, cùng với sự định hướng của thầy giáo ThS Lê Quốc Anh, em đã
chọn đề tài “ Xây dựng trang web cho công ty KC Hà Tĩnh dựa trên yêu cầu file thiết kế”
bằng ngôn ngữ HTML, CSS, Javascript, PHP trên nền tảng Wordpress
2.1.3 Đối tượng và phạm vi nghiên cứu
- Đối tượng nghiên cứu: Website trên nền tảng Wordpress
- Phạm vi nghiên cứu: Tìm hiểu tài liệu và xây dựng website dựa trên file thiết kế,
sử dụng thành thạo HTML, CSS, Javascript, PHP…
2.1.4 Mục tiêu của đề tài
- Nắm bắt rõ quy trình xây dựng 1 website dựa trên file thiết kế có sẵn, đáp ứng mọi yêu cầu của khách hàng…
- Tìm hiểu được kiến thức Frontend xây dựng 1 website đẹp mắt với các hiệu ứng bằng CSS, Javascript
- Xây dựng trang web tương thích với mỗi loại màn hình
- Nắm vững yêu cầu của website khi phát triển trên nền tảng Wordpress
2.1.5 Nội dung yêu cầu
- Phân tích được chức năng website dựa trên file thiết kế, nắm bắt rõ được kiến thức Frontend
- Code giao diện website sau khi đã phân tích, đảm bảo chuẩn pixel, sạch code, và code seo friendly
- Đổ website trên nền tảng wordpress bằng ngôn ngữ PHP( Thân thiện với quản lý)
2.1.6 Phương pháp nghiên cứu
- Khảo sát thực tế cách xây dựng website qua các trang web có sẵn trên mạng
internet
- Phân tích và tổng hợp tài liệu trên các diễn đàn học tập như Jquery, W3Schools,
Bootstraps để tìm các định dạng phù hợp với yêu cầu của website của khách hàng
- Phân tích cụ thể và chi tiết các file thiết kế, nắm bắt rõ chức năng mà file thiết kế yêu cầu, từ đó code Frontend chíh xác và hợp lý đảm bảo các yêu cầu về
Frontend
Trang 15- Sau khi xong giao diện chúng ta sẽ đổ Wordpress sao cho dễ quản lý cơ sở dữ
liệu
2.1.7 Ý nghĩa khoa học và thực tiễn của đề tài
Đối với các công ty hiện nay, website của riêng mình chính là 1 hình thức quảng bá tối ưu nhất về công ty của họ Với việc tạo ra 1 file thiết kế bằng Photoshop thì công ty sẽ không sợ bị giống hay đánh cắp thương hiệu với các công ty khác, họ sẽ có 1 website đúng yêu cầu, chất lượng Và chúng ta người code sẽ tiến hàng thực thi web của họ dựa trên file thiết kế đó Coder sẽ đảm bảo mọi yêu cầu về chức năng, hiệu ứng, tương thích màn hình và sự thân thiện với người quản lý để cho web vừa mang tính chuyên nghiệp vửa dễ dàng cho việc quản lý web của khách hàng
2.1.8 Tính năng kỹ thuật
- Website được thiết kế theo hướng mở, có thể nâng cấp và cập nhật thêm các tính năng mới khi có nhu cầu
- Hỗ trợ sử dụng tiếng việt theo đúng chuẩn Unicode
- Tương thích với các loại trình duyệt Internet như Google Chome,Mozilla Firefox,
và Internet Explorer…
- Hiện thị trên mọi giao diện như mobile,Ipad,…
- Ứng dụng các công nghệ phát triển web mới nhất , đồng thời sử dụng các công cụ phổ biến như Photoshop,… và phát triển trên Boostraps để mang đến cho website một dáng vẻ sống động và hiện đại Sử dụng các hiệu ứng làm nổi bật , lôi cuốn cho giao diện website
Trang 162.2 PHÂN TÍCH VÀ THỰC THI TRANG WEB
2.2.1 Xây dựng giao diện bằng HTML
2.2.1.1 Xây dựng giao diện trang chủ
Trang chủ luôn là trang đƣợc thiết kế kỹ lƣợng nhất bởi vì đây bộ mặt cho cả trang web
Với KC Hà Tĩnh cững không ngoại lệ Với file PSD home ta sẽ phân tích nhƣ sau
Hình 2.1: Giao diện của KC Hà Tĩnh
Trang 17Nhìn vào file thiết kế KC Hà Tĩnh ta phân tích đƣợc bố cục thành 4 phần: Header,
Banner( Slider), Content, Footer Cụ thể nhƣ sau
Header:
Hình 2.2: Ảnh phân tích Header Banner
Hình 2.3: Ảnh phân tích Banner Footer
Hình 2.4: Ảnh phân tích Footer
Trang 18Còn phần nội dung chính còn lại là Content nó đƣợc phân chia bố cục thành 6 phần nhƣ
Trang 19Hình 2.7: Ảnh phân tích Product
- Customer
Hình 2.8: Ảnh phân tích Customer
- News
Trang 20Hình 2.9: Ảnh phân tích News
- Partners
Hình 2.10: Ảnh phân tích Partners
Để code giao diện thì không thể không kể đến các thƣ viện hỗ trợ cho hiệu ứng của web,
các thƣ viện Bootstrap, font chữ… tất cả đều nằm trong phần <head></head> và cuối
<! Meta tag for responsive >
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
<! Meta tags for SEO >
<meta name="description" content="#">
<meta name="keywords" content="#">
<meta name="author" content="#">
Trang 22<![endif] >
<! Modernizr js >
<script
src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></sc ript>
Trang 23Các page con cũng sẽ phân tích như index, cũng giữa vào file thiết kế phân tích số hàng
sỗ cột Bootstrap, những phần nào giống nhau có thể sử dụng lại như Header và Footer, Các page con chỉ khác Index cái nội dung của Content nên chúng ta sẽ thực hiện các bước phân tích Content của các page đó và tiến hành code…
2.2.2 Xây dựng trang web trên Wordpress
2.2.2.1 Cấu trúc các mục trong folder
Hỉnh 2.11: Cấu trúc file của các trang Đây là mục chứa code phần nội dung chính của Content tất cả các trang bao gồm
cả Index Mỗi trang được gọi là 1 template
Trang 24Hình 2.12: Ảnh các file chứa nội dung con Đây là phần chứa các nội dung con trong mỗi page, chúng có thể được gọi nhiều lần trong khi code các page nhằm tiết kiệm thời gian…Nó cũng tương tự Class trong Java…