PHÂN TÍCH THIẾT KẾ WEBSITE GIỚI THIỆU và hỗ trợ bán hàng cho cửa hàng hoa tươi

báo cáo phân tích thiết kế website bán hoa tươi. Cùng với sự phát triển của công nghệ thông tin, nhu cầu xây dựng website hiện tại ở bất cứ đâu đều cần. trong đó cửa hàng hoa cũng không ngoại lệ. Tôi tải lên bản phân tích này giúp mọi người có thể có thêm tài liệu

MỞ ĐẦU

Ngày nay, với sự phát triển mạnh mẽ của Công nghệ thông tin đã ảnh hưởngsâu rộng tới mọi mặt trong đời sống Nó là nền tảng của nền kinh tế tri thức và làthước đo trình độ phát triển của một quốc gia Và nó cũng là yếu tố hàng đầu quyếtđịnh đến sự phát triển của công ty hay tổ chức đó

Xã hội và kinh tế phát triển đòi hỏi công nghệ cũng phải phát triển Côngnghệ phát triển con người càng phát minh ra nhiều thiết bị công nghệ số để phục vụ

về nhiều mặt trong cuộc sống Nhất là trong thời đại hiện nay khi Việt Nam đã hộinhập vào WTO cùng với sự phát triển mạnh mẽ của công nghệ thông tin được ápdụng mạnh mẽ trong mọi lĩnh vực cuộc sống

Việc xây dựng website để phục vụ nhu cầu riêng của cá nhân, tổ chức đãkhông lấy gì làm xa lạ Với một vài thao tác đơn giản bạn đã có thể làm chủ mộtwebsite mà bạn yêu thích: website xe hơi, website giới thiệu về gia đình, bạnbè, Đối với một hoạt động của một công ty kinh doanh có quy mô lớn sẽ được tăngcường, mở rộng hơn nữa nếu xây dựng một website tốt quảng bá hình ảnh công tycùng các dịch vụ, các sản phẩm đến với khách hàng có nhu cầu Xuất phát từ ýtưởng đó cùng với sở thích kinh doanh nhóm em đã quyết định chọn đề tài :”Xâydựng website giới thiệu và hỗ trợ bán hàng cho cửa hàng hoa tươi ngọc anh”

Bài báo cáo gồm:

Chương 1: Tổng quan về ngôn ngữ HTML, CSS, mã nguồn mở Wordpress Chương 2: Phân tích thiết kế website giới thiệu và hỗ trợ bán hàng cho cửa

hàng hoa tươi ngọc anh

Chương 3: Xây dựng website mô phỏng.

Kết luận: Tổng kết những việc đã làm được và hướng phát triển.

CHƯƠNG 1: TỔNG QUAN VỀ NGÔN NGỮ HTML VÀ CSS,

Tên gọi ngôn ngữ đáng dấu siêu văn bản có ý nghĩa như sau:

Đánh dấu(Markup): HTML là ngôn ngữ của các thẻ đánh dấu(tag) Các thẻnày xác định cách thức trình bày đoạn văn bản tương ứng trên màn hình

Ngôn ngữ(Language): HTML là một ngôn ngữ tương tự như các ngôn ngữlập trình, tuy nhiên đơn giản hơn Nó có cú pháp chặt chẽ để viết các lệnh thực hiệnviệc trình diễn văn bản Các từ khóa có ý nghĩa xác định được cộng đồng Internetthừa nhận và sử dụng lại Ví dụ b= bold, ul= unordered list,…

Siêu văn bản(HyperText): HTML cho phép liên kết nhiều trang văn bản rảirác ở khắp mọi nơi trên Internet Nó có tác dụng che dấu sự phức tạp của Internetđối với người sử dụng Người dùng Internet có thể đọc văn bản mà không cần biếtđến văn bản đó nằm ở đâu, hệ thống được xây dựng phức tạp như thế nào, HTMLthực sự đã vượt ra ngoài khuân khổ khái niệm văn bản cổ điền

1.1.2 Các phiên bản của HTML.

HTML được Tim Berners-Lee phát triển vào năm 1989 ở viện thí nghiệmCERN- Thụy Sĩ Điều này đã đánh dấu một bước phát triển mới cho xã hội thôngtin Ban đầu, ông làm việc cho viện thí nghiệm CERN mà việc thí nghiệm phải hợptác nghiên cứu với nhiều viện khác trên thế giới Tim đã nảy ra ý tưởng là cho phépcác nhà nghiên cứu có thể tham khảo dữ liệu từ một nơi mà dữ liệu được tập hợp và

tổ chức lại sao cho khi đang đọc tài liệu này, nhà nghiên cứu có thể xem tài liệu liênquan bằng cách nhấn vào một liên kết được hiển thị trên màn hình.

HTML được phát triển dựa trên ngôn ngữ Standard Generalized MarkupLanguage(SGML) SGML là một hệ thống tổ chức và găn thẻ cơ bản của một tàiliệu Ngôn ngữ này không quy định những định dạng, nguyên tắc mà nó chỉ quyđịnh cụ thể các quy tắc cho các thẻ

Tuy nhiên, đến năm 1990, phiên bản HTML đầu tiên mới được tung ra vàgần như sau một năm, ngôn ngữ HTML đầu tiên mới được ứng dụng Tháng 4 năm

1993, trình duyệt đầu tiên Mosaic xuất hiện và nhóm Mosaic đã mở rộng thêm một

số thẻ mới như images,…

HTML đã trải qua 4 phiên bản gồm: HTML phiên bản đầu tiên(1990),HTML2(1994), HTML3(1995),HTML4(1997)

Vào năm 1994, tập đoàn tài chính World Wide Web(W3c) được thành lập vớingười đứng đầu là Tim Bernes-Lee đã đứng ra hỗ trợ cho sự phát triển của HTML.Qua các phiên bản phát triển, HTML ngày càng có nhiều thẻ mới, tính năng mớicũng như tính đơn giản hóa ngày càng cao

HTML4 đươc phát triển vào năm 1997 và là phiên bản thành công nhất được

sử dụng phổ biến cho đến hiện nay Với rất nhiều thẻ mới như Button, FieldSet,Frame, Iframe,Span, Ngoài ra, HTML4 còn hỗ trợ hiển thị hầu hết ngôn ngữ trênthế giới dựa theo chuẩn Universal Character Set Thay vì các phiên bản trước chỉhiện thị theo chuẩn ISO-8859-1 HTML4 còn hỗ trợ một số tính năng quan trọngnhư sau:

- Đã hỗ trợ ngôn ngữ lập trình của client-script và có thể nhúng thêm các tập tinscript bên ngoài vào Hỗ trợ các sự kiện client-script như onclick, onchange,… cho cácthẻ

- Đặc biệt là HTML4 hỗ trợ CSS với các thuộc tính ID,Class và Style Bathuộc tính này giúp các thẻ liên kết với các style được khai báo trong CSS

Ví dụ: ta có 1 CSS là :

font-size: small;

}

- Việc tích hợp với CSS này có ý nghĩa rất quan trọng cho các nhàthiết kế web

Họ có thể sử dụng CSS chung cho các kiểu hiện thị như nhau và có thể thoải máisáng tạo giao diện mà không cần tốn công sức như trước đây(khai báo các thuộc tínhkiểu cho từng thẻ)

- HTML4 còn hỗ trợ nhiều hơn cho thẻ table nhất là các thẻ table mới nhứ

<THead>, <TFood>, <TBody>

1.1.3 Các thẻ HTML.

Để biểu diễn thông tin trên trang web, nhà thiết kế sử dụng ngôn ngữ HTML

để trình bày thông tin Mỗi thông tin chi tiết sẽ đươc trình bày và định dạng dựa vàomột cặp thẻ(tag) HTML tương ứng

- Mỗi cặp thẻ bao gồm: thẻ mở và thẻ đóng Tên thẻ mở và thẻ đóng giốngnhau và được đặt trong cặp dấu <tên thẻ>

- Trong thẻ mở có thể thêm các tham số phía sau tên thẻ

- Trong thẻ đóng có thêm dấu / phía trước tên thẻ

- Dữ liệu cần trình bày đặt trong cặp thẻ mở và đóng

- Có một số thẻ không nhất thiết phải viết cả thẻ đóng

- Có thể đặt trong các cặp thẻ HTML lồng nhau

- Cấu trúc chung của một thẻ HTML như sau:

< Ten_The thamso1= giatri1 thamso2= giatri2 …>Thông tin cần trìnhbày</Ten_the>

1.1.4 Cấu trúc của một trang HTML.

link Chỉ định màu của văn bản liên kết

alink Chỉ định màu của văn bản siêu liên kết đang chọn

Vlink Chỉ định màu của văn bản siêu liên kết đã mở

Background Chỉ định địa chỉ ảnh dùng làm nền

Bgcolor Chỉ định màu nền

Text Chỉ định màu của văn bản trong tài liệu

Scroll Có hay không có thanh cuộn

- <br>

- <b>, <i>, <u>, <s>

- ^{chỉ số trên}, _{chỉ số dưới}

Căn lề văn bản trên trang web: tham số align, thẻ<center>.

Định dạng font chữ:

Thẻ<font></font>:

<font size=”2” face=”Verdana”>This is a paragraph</font>

Khi muốn thay đổi cỡ font thì dùng:

<font size=X>…</font>

Trong đó X là cỡ font có giá trị 1(nhỏ nhất) đến 7(lớn nhất)

Để làm cho trang web thêm sinh động, nhiều khi bạn muốn trình bày nó bằng nhiều kiểu font khác nhau, bạn hãy sử dụng thuộc tính face của tag<font> để thực hiện việc đổi font chữ

<font face=”fontname”>…</font>

Trong đó fontname là tên của font chữ có trên máy tính của người đọc trang web.Muốn thêm màu sắc cho chữ, ta thêm thuộc tính color vào tag font

Ví dụ:

<font face=”Arial” color=”#ffffff”>…</font>

<font face=”.vn3dh” color=”#EEBBBB”>…</font>

Sáu mức tiêu đề:

Khi trình bày một trang web, đôi khi bạn phải cần đến các tiêu đề theo các kích cỡ, phông chữ khác nhau HTML có các tag để thực hiện việc này Để tạo một tiêu đề chúng ta dùng:

<hx> Tên tiêu đề <hx>

Trong đó x là các giá trị từ 1 đến 6 chỉ kích cỡ tiêu đề Sau đây là một số ví dụ:

Tiêu đề cỡ 1

Tiêu đề cỡ 2

Tiêu đề cỡ 3

Tiêu đề cỡ 4

Tiêu đề cỡ 5

Tiêu đề cỡ 6

1.1.7Th t o link.ẻ tạo link ạo link.

<a href = url name = name tabindex = n title= title target =_blank |_self | tên frame> dòng văn bản</a>

Trong đó:

- Href: địa chỉ của vùng trang web được liên kết, là một url nào đó

- Name: đặt tên cho vị trí đặt thẻ

- Tabindex: thứ tự di chuyển khi ấn phím Tab

- Title: văn bản hiển thị khi di chuyển chuột trên siêu liên kết

- Target: mở trang web được hiện trong một cửa sổ mới(_blank) hoặc trongcửa sổ hiện tại(_self) trong một frame(tên frame)

Ghi chú:

- Nếu đặt trong thuộc tính hreft= thẻ <a> giá trị mail to: address@domain thì khi kích hoạt kết nối sẽ kích hoạt chức năng thư điện tử của trình duyệt

Ví dụ:

<address>

Liên hệ: Đại học Công Nghệ Thông Tin và Truyền Thông Thái Nguyên

<a href= “mail to: contact@ictu.edu.vn”>

Email: contact@ictu.edu.vn

</a>

Điện thoại: 02803456789

</address>

Khi nhấn vào dòng chữ Email: contact@ictu.edu.vn(dòng chữ này sẽ xuất hiện giống như các siêu liên kết khác) chức năng thư tín của trình duyệt sẽ được kíchhoạt và địa chỉ thư điện tử contact@ictu.edu.vn đã được chèn vào địa chỉ nhận thư của chương trình gửi thư.

1.1.8 Thẻ chèn ảnh.

Tag <img/ > dùng để nhúng một image vào văn bản HTML

Tag <img/ > có 2 thuộc tính cần thiết là src và alt, trong đó src: đường truyền tham chiếu đến image, alt: được sử dụng như một văn bản thay thế khi di chuyển chuột lên image, muốn văn bản hiển thị khi di chuyển chuột lên image thì dùng thuộc tính title thay thế

Ví dụ: để chèn một hình ảnh có tên là doiche.jpg ta làm như sau:

<img src=”doiche.jpg” alt=”Chè Phú Thọ”

Hình 1.1 Hiển thị hình ảnh trong trang HTML với thẻ img.

Tag <img > còn có thể có thêm các thuộc tính để hiện thị văn bản so vớihình ảnh Thuộc tính align với các giá trị khác nhau sẽ cho ta hiệu ứng như sau:

1 align = top

2 align= middle

3 align= bottom

Ví dụ:

<img src=”a.jpg” alt=”Chè Phú Thọ” align=”top” />

Tag img với thuộc tính là align = top <br/><br/>

<img src=”a.jpg” alt=”Chè Phú Thọ” align=”middle” />

Tag img với thuộc tính là align = middle <br/><br/>

<img src=”a.jpg” alt=”Chè Phú Thọ” align=”bottom” />

Tag img với thuộc tính là align = bottom <br/><br/>

Hình 1.2 Thuộc tính align trong thẻ img với các giá trị khác nhau.

1.1.9 Thẻ tạo danh sách.

Danh sách được dùng để trình bày thông tin thành một dạng dễ đọc hơn Chẳng hạn để tạo ra các bảng chỉ mục, nội dung của một dãy các tài liệu hay các chương trình HTML có hai kiểu danh sách, danh sách có thứ tự(ordered) và danh sách không có thứ tự(unorder)

Danh sách không có thứ tự có các mục bắt đầu bằng các “butllet” hoặc các kí hiệu đánh dấu ở trước Để tạo ra danh sách không có thứ tự ta dùng các tag sau:

Các bộ môn khoa Công nghệ thông tin<br/>

Trường Đại học Công Nghệ Thông Tin và Truyền Thông Thái Nguyên

</h3>

<ul>

<li>Bộ môn Công nghệ phần mềm</li>

<li>Bộ môn Hệ thống thông tin</li>

<li>Bộ môn Mạng và Truyền Thông</li>

<li>Bộ môn Khoa học máy tính</li>

</ul>

Hình 1.3 Danh sách không có thứ tự thẻ ul li.

Danh sách có thứ tự là danh sách mà mỗi mục của danh sách được đánh số từ “1” Để tạo

ra danh sách ta sử dụng các tag sau:

<li>Chương trình soạn thảo văn bản trơn(như Notepad của Window) </li>

<li>Trình duyệt Web(như Internet Explorer hoặc Firefox)</li>

<li>Bộ sách về HTML của tạp chí Internet Today</li>

CGI Script, form cho phép lựa chọn thông tin từ người dùng và lưu trữ nó cho lần

sau sử dụng Khi tạo form, ta cần lưu ý hai phần đó là tên nhận dạng (identifier) và

giá trị (value) của form đó

Tag : <form METHOD=”” ACTION=””><…các tag khác …></font>nằmgiữa hai tag BODY

Trong đó thuộc tính METHOD có hai giá trị POST và GET Nếu giá trị làPOST, nó cho phép gửi dữ liệu từ máy Client đến Sever(thường được sử dụng trongform nhập liệu) Còn với GET thì chỉ được sử dụng trong form vấn tin Còn Actionthì chỉ ra vị trí CGI Script trên Sever sẽ được thực hiện

Các tag trong Form thường dùng chủ yếu là <input>, <select>, <option>.Chúng ta sẽ lần lượt xét một số form đơn giản như sau:

 Text Blocks: Tạo ra vùng văn bản, có thể nhập nhiều dòng

 Text Boxes: để nhập vào một dòng đơn

 Password Boxes: form này giống Text Boxes nhưng không hiển thị các kí tự

 Radio Buttons: Các nút lựa chọn một

 Check Boxes: Hộp Check Boxes

 Menus: Tạo ra hộp menu đẩy xuống

 Submit, Reset Buttoms : Các Buttom để nhận thông tin và khởi tạo lại thôngtin

 Hidden Elements: Các yếu tố

 Active Images: tạo bức ảnh kích hoạt

 CGI Script: Common Gateway Interface Script

Tác dụng:

- Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quyđịnh kiểu dáng(chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu,…) khiến mãnguồn của trang web được gọn gàng hơn, tách nội dung của trang web và định dạnghiển thị, dễ dàng cho việc cập nhật nội dung

- Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh lặp lạiviệc định dạng cho các trang Web giống nhau

1.2.2 Các phiên bản của CSS.

Khi HTML phiên bản đầu tiên được phát hành, CSS đã không được tích hợpvào HTML Đến năm 1996, phiên bản CSS đầu tiên đã được chính thức phát hành

Phiên bản này bao gồm các chức năng cơ bản như font, color, background images,

…Hầu hết các trình duyệt trong giai đoạn này đều hỗ trợ CSS1

Năm 1998, CSS2 ra đời và đã thêm vào rất nhiều tính năng mới cho CSS.CSS2 cho phép canh chỉnh vị trí cho các thẻ của HTML, cho phép thay đổi fontchữ trong trang web và cho phép định dạng kiểu in Hầu hết các trình duyệtngày nay đều hỗ trợ CSS2

1.2.3 Các thuộc tính cơ bản trong CSS.

1.2.3.1 Các vấn đề về văn bản và cách định dạng văn bản.

Thuộc tính CSS text cho phép bạn hoàn toàn có thể quản lí được các thuộctính của văn bản, bạn có thể quản lí được sự ẩn hiện của nó, thay đổi màu sắc, tănghoặc giảm khoảng cách giữa các kí tự trong một đoạn, căn chỉnh dóng hàng

1.2.3.2 Các thuộc tính của text mà CSS hỗ trợ.

Đặt màu cho một đoạn văn bản Để đặt màu cho văn bản chúng ta dùng thuộctính: color:#mã màu;

h1{letter- spacing:-3em;}

Căn chỉnh khoảng cách giữa các dòng Thuộc tính line-height: khoảng cách,

sẽ giúp bạn căn chỉnh khoảng cách giữa các dòng trong một đoạn văn bản

p{line-height:150%; // lineheight:15px;}

Thêm đoạn văn bản Một đường gạch chân hoặc đường gạch ngang dòng vănbản sẽ làm cho đoạn văn bản của bạn thêm sinh động Để tô điểm thêm cho đoạnvăn bản chúng ta sẽ dùng thuộc tính text-decoration: thuộc tính;

h3{text-decoration: underline; /* gạch chân */}

h2{text-decoration: line-through;/* gạch ngang */}

h1{text-decoration: overline; /* kẻ trên */}

Chỉnh vị trí của đoạn văn bản(indent) Thuộc tính text-indent: vị trí, sẽ cănchỉnh vị trí của dòng văn bản theo chiều ngang

h1{text-indent:-200px;/*text-indent:30px; */}

Điều khiển các kí tự trong một đoạn văn bản Bạn có thể điều khiển toàn bộđoạn văn bản là chữ hoa hay chữ thường bởi thuộc tính text-transform: kiểu chữ;p.uppercase {text-tranform: uppercase; }

p.lowercase {text-tranform: lowercase; }

p.capitalize {text-tranform: capitalize; }

Các thuộc tính của font chữ Các thuộc tính về font chữ cho phép bạn thayđổi họ font(font family), độ đậm(boldness), kích thước(size)và kiểu font(style)

Đặt font cho đoạn văn bản Để đặt font chữ nào đó cho văn bản thì ta sử dụngthuộc tính font-family; lưu ý bạn phải khai báo họ của font ở cuối vì trong trườnghợp máy của người duyệt Web không có các font thì nó sẽ lấy font mặc định của họfont trên,…

p{font- family:Arial, Tohoma, Verdana, sans-serif; }

Đặt đoạn văn bản sử dụng font nhãn caption

p.caption {font:caption }

Đặt kích thước font cho đoạn văn bản Khi chúng ta muốn những đoạn vănbản hoặc tiêu đề có kích thước cỡ chữ khác nhau, chúng ta có thể sử dụng thuộc tínhfont-size:

h1{font-size: 20px; }

h3{font-size: 12px; }

Đường viền và các thuộc tính đường viền Các thuộc tính đường viền sẽ chophép đặt các giá trị đặc biệt cho đường viền như kiểu đường viền, kích thước, màusắc Thuộc tính này sẽ được áp dụng cho các thẻ HTML như <div>, <li>, <table>,…Trong thuộc tính đường viền chúng ta có 3 giá trị cơ bản: border-color, border-width, border-style,…

Thuộc tính màu của đường viền Để đặt màu cho đường viền chúng ta sẽ đặtthông số màu cho thuộc tính bordercolor:

div.color {border-color: #CC0000; }

Đặt chiều rộng cho đường viền Nếu muốn đặt chiều rộng cho đường viềnchúng ta sẽ đặt các giá trị cho thuộc tính border-width:

div.borderwidth {border- width:2px; }

Chọn kiểu đường viền Bạn có thể sử dụng thuộc tính border-style để đặt kiểucho đường viền chúng ta có thể gán cho thuộc tính này 9 giá trị khác nhau tươngứng với 9 kiểu đường viền khác nhau

div.borderstyle {border- style: solid; }

Về 4 phía của đối tượng có 4 thuộc tính border tương ứng: border-top, border-right,border-bottom, border-left Ứng với đường viền của mỗi phía đều có 3 giá trị: color,width, style

1.3 Giới thiệu về Wordpress

1.3.1 Khái niệm về Wordpress

WordPress là một dạng phần mềm mã nguồn mở được Christine Selleck đềxuất Mọi người biết đến WordPress đơn giản là để viết Blog, để đăng tải thông tincủa mình lên mạng nhưng không đơn giản như vậy, WordPress còn có chức năngnhư mọi Website khác Nó có thể làm site tin tức, đánh giá, bán hàng… thậm chílà… mạng xã hội Các bạn có thể ứng dụng wordpress để tạo cho mình 1 websitetrên nền wordpress, 1 website được tạo ra nhanh chóng đơn giản mà lại tiện cho việcquảng bá sản phẩm , thông tin , kiến thức ….WordPress được viết bằng ngôn ngữlập trình PHP và sử dụng MySQL database WordPress là “con” của B2 / Cafelog,được xây dựng trên sự tiện dụng, cùng các định dạng chuẩn của web Phiên bản mớinhất của WordPress tính đến tháng 1/2014 là 3.8 Rất nhiều Website nổi tiếng đang

sử dụng WordPress làm nền tảng để phát triển như CNN, ebay, bata,…

Những đặc điểm nổi bật của WordPress:

 Cài đặt đơn giản và cực kì nhanh chóng, với trình cài đặt 5 phút nổi tiếng

 Hệ thống Plugin phong phú và cập nhật liên tục, bạn cũng có thể tự viếtplugin cho mình.

 Hỗ trợ nhiều ngôn ngữ ( bao gồm cả tiếng Việt )

 Được cập nhật, vá lỗi và hỗ trợ liên tục

 Có rất nhiều Theme miễn phí, chuyên nghiệp và SEO rất tốt

 Dễ dàng quản lý và thao tác, việc quản lý blog, bài viết giống như các phầnmềm thiết kế web chuyên nghiệp

 Tích hợp sẵn Latex – công cụ soạn thảo công thức toán học, bạn có thể viếtcông thức toán học ngay trong bài viết

 Upload và quản lý hình ảnh một cách dễ dàng, đặc biệt là chức năng tạothumbnail rất hay

 Có một hệ thống Widget đa dạng ( ứng dụng tạo thêm ) như Thống kê sốngười truy cập, Danh sách các bài viết mới, các bài viết nổi bật, được xem nhiều,được comment nhiều, Liệt kê các chuyên mục, Liệt kê các trang, Bài viết theo ngàytháng, … có đến trên 23 Widget để bạn tha hồ lựa chọn

 Thống kê số truy cập từng ngày đối với mỗi bài viết của blog Trên cơ sở đóbạn sẽ có định hướng nên viết gì tiếp theo

 Hệ thống quản lý và duyệt Comment rất hay, có thể chặn spam theo IP

 Hệ thống phân quyền với nhiều cấp độ khác nhau như: Administrator,Author, Editor, Contributer, Subcriber Mỗi phân quyền sẽ có các quyền hạn khácnhau như được phép đăng bài viết, sửa bài viết, xóa bài viết, duyệt comment …

 Sao lưu dữ liệu một cách dễ dàng để backup hoặc chuyển nhà sang một nơikhác

 Hỗ trợ import đa năng từ các blog khác như Blogspot, Tumblr, Blogger,LiveJournal …

 WordPress hỗ trợ 3 GB để lưu trữ hình ảnh và văn bản

 Hàng ngày WordPress sẽ thống kê 100 bài viết trên các blog tiếng Việtđược nhiều người đọc nhất Nhờ đó bạn biết được các thông tin quan trọng nhấtđang diễn ra.

 Và đặc biệt mới đây nhất WordPress hỗ trợ việc quản lý blog qua mobile rấtthuận tiện và dễ dàng

1.3.2 Cài đặt webserver chạy Wordpress

Để chạy được Wordpress ta cần phải có một WebServer với Apache,MySQL, PHP and Perl, việc cấu hình và cài đặt WebServer gặp nhiều khó khăn vàtốn kém thời gian Hiện nay có nhiều phần mềm cấu hình sẳn và ứng dụng như mộtWebServer như Xamp, Wamp,…Trong phần này tôi sử dụng WebServer Xampp đểchạy Joomla

Cài đặt Web Server - Cài đặt XAMPP

Nếu muốn một trang web viết bằng ngôn ngữ PHP có thể chạy được trên máytính cục bộ và trên máy chủ thì cần phải có một web server là Apache, bộ thông dịchngôn ngữ PHP, ngôn ngữ truy vấn cơ sở dữ liệu là mySQL

Đây là ba thành phần độc lập với nhau nhưng là bộ tam không thể thiếu nhau.Với người bình thường nếu muốn 3 thành này chạy với nhau một cách tốt đẹp thìbạn phải có nhiều kiến thức sâu rộng về chúng vì thế sẽ gây khó khăn cho người mớihọc

Từ nhu cầu đó mà một gói phần mềm tích hợp 3 thành phần trên đã ra đời

Có nhiều phần mềm tích hợp 3 thành phần này Nhưng hiện nay, gói phần mềmchạy ổn định nhất đó là XAMPP

XAMPP tích hợp các gói phần mềm: Apache (web server), PHP (Ngôn ngữ lập trìnhweb), mySQL (hệ quản trị cơ sở dữ liệu dành cho PHP)…

2 Chương trình sẽ yêu cầu bạn chọn 1 ngôn ngữ cài đặt, bạn hãy để ngôn ngữ mặcđịnh và nhấn OK.

Hình 1.5 Chọn ngôn ngữ cài đặt

3 Cửa sổ mới mở ra, bạn nhấn Next để tiếp tục

4 Cửa sổ mới mở ra yêu cầu bạn chọn một đường dẫn để lưu cài đặt Bạn có thể đặtchương trình ở phân vùng khác trên ổ cứng của bạn như là D, E , … Nếu không có

gì thay đổi, bạn nhấn Next để chuyển sang cửa sổ mới

Hình 1.6 Chọn thư mục cài đặt

5 Cửa sổ mới mở ra, bạn chọn tất cả các dịch vụ của chương trình

Hình 1.7 Tùy chọn cài đặt

6 Chương trình sẽ bắt đầu công việc cài đặt XAMPP lên ổ cứng

Hình 1.8 Tiến trình cài đặt Xampp

7 Cửa sổ cuối cùng sẽ thông báo cho chúng ta biết quá trình cài đặt đã thành công.Bạn nhấn Finish để kết thúc cài đặt

Hình 1.9 Cài đặt hoàn tất

8 Tiếp theo, chương trình sẽ gọi tất cả các dịch vụ của web server ra chạy Sau khihoàn thành, chương trình sẽ mở hộp thoại thông báo Bạn nhấn OK để tiếp tục

Hình 1.10 Thông báo cài đặt thành công

9 Sau đó, một hộp thoại mới mở ra, bạn chọn Yes để tiếp tục Trong hộp hội thoạimới kế tiếp, bạn chọn mở hết các dịch vụ Apache, MySQL bằng cách check vào ôvuông dịch vụ và chọn Start như hình sau:

Hình 1.11 Control Panel của Xampp

Đến đây quá trình cài đặt một web server chạy dạng trên máy tính cá nhân đãhoàn thành

Tất cả mọi máy tính cá nhân cài web server đều có chung một tên miền đểtruy cập là: http://localhost hoặc địa chỉ IP là http://127.0.0.1

Sau khi cài đặt, web server sẽ tự động mở cổng 80 để phục vụ việc trình bàytrang web trên các trình duyệt web

Việc cài đặt web server không yêu cầu máy tính của bạn phải có một cardmạng gắn sẵn Nếu máy tính không có card mạng, bạn vẫn có thể tạo đượcwebserver để phục vụ lập trình web

10 Sau khi cài đặt, bạn cần kiểm tra lại xem web server có đang chạy hay không

Mở một trình duyệt web và gõ vào địa chỉ htt://localhost

Hình 1.12 Chọn ngôn ngữ để vào phpmyadmin

11 Nếu trình duyệt của bạn mở ra như hình sau thì bạn đã thành công Tiếp theo,bạn chọn English để vào trang chủ của XAMPP

Hình 1.13 Trang chủ Xampp sau khi cài đặt

1.3.4 Cài đặt Wordpress trên localhost

Về phần localhost bạn phải có XAMPP, WAMP5 hay Appserv bất cứ phần nềm nào cho phép giả lập locahost

Database:

1 Bạn hãy gõ vào address bar: localhost/phpmyadmin

1 Tạo mới 1 database

Thay thế những giá trị đó thành như sau

Lưu lại file này thành file mới là wp-config.php cũng ở trong thư mục đó luôn 3- Tiếp theo là bước cài đặt, bạn hãy gõ vào address bar: localhost/web-wp

Điền các thông số về Site title, tên user và mật khẩu, email quản trị của bạn.

Click vào Install WordPress - Ok, xong

4- Tiến hành login để vào trang quản trị để điền thông tin như hình.

Sau này, khi muốn truy cập trang quản trị, các bạn chỉ cần sử dụng đường dẫn

có dạng http://yourdomain.com/wp-admin.php:

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ WEBSITE GIỚI THIỆU và hỗ trợ bán hàng cho cửa hàng hoa

tươi.

Hiện nay việc kinh doanh càng ngày càng phát triển.Các siêu thị mọc lên càngngày càng nhiều, sự cạnh tranh càng ngày càng trở nên khốc liệt nên việc quản lýhay giới thiệu sản phẩm đến với khách hàng ngày càng trở nên khó khăn và phứctạp Do đó, tin học hóa việc giới thiệu sản phẩm đến khách hàng là điều tất yếu