Báo cáo thực tập ứng dụng ASP.NET MVC xây dựng website thương mại điện tử

Báo cáo thực tập Ứng dụng mô hình ASP.NET MVC, C, SQLServer , html, css. javascript, ajax trong dự án xây dựng Website bán hàng thương mại điện tử với những tính năng cụ thể: tìm kiếm sản phẩm, xem chi tiết sản phẩm, đăng ký, đăng nhập, giỏ hàng đặt hàng......

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA KỸ THUẬT MÁY TÍNH

ỨNG DỤNG MÔ HÌNH MVC TRONG DỰ ÁN XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ

BÁO CÁO THỰC TẬP DOANH NGHIỆP

Sinh viên thực hiện : Đinh Thanh Tùng – 11520464

Võ Trương Anh Tuấn - 11520455

Lớp : KTMT2011

Khoa : Kỹ Thuật Máy Tính

Người hướng dẫn : Th.S Phan Đình Duy

Thành phố Hồ Chí Minh – Năm 2016

LỜI CẢM ƠN

Lời đầu tiên, nhóm em xin chân thành cảm ơn các quý thầy cô trường ĐH Công Nghệ Thông Tin cũng như các quý thầy cô ở các phòng ban khác của trường, nhóm em xin

cảm ơn các thầy cô khoa Kỹ thuật máy tính, các thầy cô đã rèn luyện không chỉ kiến thức

mà cả đạo đức làm người cho chúng em trong suốt bốn năm trên ghế nhà trường Để chúng

em tự tin bước vào môi trường làm việc với các dự án thực tế trong kì thực tập này

Nhóm em xin chân thành cảm ơn Ban lãnh đạo và các anh chị ở Khu Công NghệPhần Mềm – ĐHQG Hồ Chí Minh, đặc biệt là anh Đỗ Tuấn Anh Co-founder & ProjectManager của APOUP, đã tạo điều kiện thuận lợi cho nhóm em được thực tập tại Công ty,được tiếp xúc với các dự án thực tế, giải đáp thắc mắc trong suốt quá trình thực tập tại Công

ty, giúp nhóm em hiểu biết rộng hơn trong lĩnh vực lập trình NET

Với vốn kiến thức hạn hẹp và thời gian thực tập tại Công ty có hạn nên nhóm emkhông tránh khỏi những thiếu sót Nhóm em rất mong nhận được những ý kiến đóng góp,phê bình của quý thầy cô và anh chị trong Công ty Đó sẽ là hành trang quý giá giúp emhoàn thiện kiến thức cũng như món quà tinh thần giúp nhóm em được tự tin hơn trên conđường sau này

Nhóm em xin chân thành cảm ơn !

NHẬN XÉT

( Của khoa Kỹ Thuật Máy Tính)

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

Mục lục

I GIỚI THIỆU SƠ LƯỢC VỀ CÔNG TY TNHH MTV APO

PROFESSIONAL NETWORK 1

Tóm tắt về công ty TNHH MTV Apo Professional Network 1

II NHIỆM VỤ CHÍNH ĐƯỢC GIAO 3

III NỘI DUNG CÁC CÔNG VIỆC VÀ KẾT QUẢ THU ĐƯỢC 4

1 Tìm hiểu về ngôn ngữ C#, Mô hình MVC, Entity Framework 4

2 Tìm hiểu ngôn ngữ Javascript 8

3 Tìm hiểu ngôn ngữ Html, Css 9

4 Project: Xây dựng website thương mại điện tử theo mô hình MVC 15

IV KẾT QUẢ ĐẠT ĐƯỢC QUA ĐỢT THỰC TẬP 28

1 Kiến thức lý thuyết được cũng cố 28

2 Kỹ năng thực hành được trao dồi 29

3 Kinh nghiệm thực tiễn và cách làm việc nhóm được tích lũy 29

4 Ba bài học có ý nghĩa nhất trong đợt thực tập 29

V TỔNG KẾT 30

LỊCH LÀM VIỆC TẠI CƠ QUAN THỰC TẬP

- Công ty thực tập : Công Ty TNHH MTV Apo Professional Network.

- Người hướng dẫn: Co-founder & Project Manager Đỗ Tuấn Anh.

- Thời gian thực tập: Từ ngày 01/03/2016 đến ngày 01/6/2016.

- Lịch làm việc tại nơi thực tập :

 Làm việc tại văn phòng công ty vào các ngày thứ : 2, 3, 4, 5, 6

 Báo cáo nội dung công việc hằng ngày, báo cáo qua Email

 Hỏi đáp thắc mắc thông qua Skype

 Báo cáo Slide vào các ngày thứ 6 tại Công ty

I GIỚI THIỆU SƠ LƯỢC VỀ CÔNG TY TNHH MTV APO PROFESSIONAL

NETWORK.

Tóm tắt về công ty TNHH MTV Apo Professional Network.

a Tổng quan:

- Năm 2007, Dự án “3G45” được triển khai với www.motketnoi.net, là mạng xã

hội kết nối cộng đồng dành cho người Việt, với đối tượng mục tiêu là sinh viêncác trường đại học Chúng tôi đã thành lập team hoạt động tại Hà Nội và Hồ ChíMinh, đã liên hệ với các trường Đại học ở Hà Nội, Tp Hồ Chí Minh, Đà Nẵng,Huế Với ước mong thay thế mạng xã hội Yahoo!360 Blog tại Việt Nam màYahoo cho đóng cửa Motketnoi thất bại và đóng cửa sau khoảng 6 tháng thànhlập

- Năm 2015, Apoup.com được công bố phiên bản thử nghiệm đầu tiên với hạng

mục triển khai ban đầu là nền tảng tuyển dụng, việc làm, giúp doanh nghiệp vừa

và nhỏ đăng tin tuyển dụng và kết nối với các ứng viên tiềm năng cho kế hoạchtuyển dụng nhân sự lâu dài

- Apoup là “Nền tảng kinh doanh online như một dịch vụ” (OBP-a-a-S: Online

Business Platform-as-a-Service), được gọi là “Nền tảng chợ xã hội” (Social

quảng cáo, bán hàng, kết nối và tuyển dụng dành cho khách hàng online, gồm CÁNHÂN và DOANH NGHIỆP.

- Nhóm thành viên sáng lập:

o Nguyễn Việt Hùng: Founder & Manager

o Đỗ Tuấn Anh: Co-founder & Project Manager

o Lê Hữu Trung: Co-founder & Business Development Manager

- Mang lại lợi ích thực tế cho người mua sắm online

- Giúp cá nhân xây dựng và phát triển công việc bán hàng online

- Giúp công ty vừa và nhỏ xây dựng hình ảnh thương hiệu và phát triển kinh tếdoanh nghiệp

II NHIỆM VỤ CHÍNH ĐƯỢC GIAO

Thời gian Nội dung

Tuần 1-Tuần 3

(1/3-15/3/2016)

- Tìm hiểu và thực hiện các project căn bản bằng ngôn ngữC#

- Tìm hiểu về mô hình ASP.NET MVC

- Tìm hiểu Entity Framework 5.0

- Tìm hiểu về ngôn ngữ Jquery, Javascript

- Củng cố lại kiến thức cần thiết để tiến hành thực hiệnproject

III NỘI DUNG CÁC CÔNG VIỆC VÀ KẾT QUẢ THU ĐƯỢC

1 Tìm hiểu về ngôn ngữ C#, Mô hình MVC, Entity Framework.

a Ngôn ngữ C#.

 Tổng quan:

- C# là một ngôn ngữ lập trình đơn giản, hiện đại, mục đích tổng quát, hướng đốitượng được phát triển bởi Microsoft và được phê chuẩn bởi European ComputerManufacturers Association (ECMA) và International Standards Organization(ISO)

- C# được thiết kế cho Common Language Infrastructure (CLI), mà gồmExecutable Code và Runtime Environment, cho phép chúng ta sử dụng các ngônngữ high-level đa dạng trên các nền tảng và cấu trúc máy tính khác nhau

- Dưới đây là các lý do làm C# là ngôn ngữ lập trình chuyên nghiệp được sử dụngrộng rãi:

o Nó là một ngôn ngữ lập trình hiện đại, mục đích tổng quát

o Nó là hướng đối tượng

o Nó dễ dàng để học

o Nó là một ngôn ngữ được cấu trúc

o Nó tạo các chương trình hiệu quả

o Nó có thể được biên dịch trên nhiều nền tảng máy tính khác nhau

o Nó là một phần của Net Framework

- Cấu trúc C# khá gần với các ngôn ngữ high-level truyền thống, C và C++, và làmột ngôn ngữ lập trình hướng đối tượng Nó có sự giống nhau mạnh mẽ vớiJava, nó có nhiều đặc điểm lập trình mạnh mẽ mà làm cho nó trở nên ưa thích vớicác lập trình viên trên toàn thế giới Dưới đây là các đặc điểm quan trọng của C#:

o Điều kiện Boolean

o Tự động dọn rác bởi Garbage-Collector (GC)

o Thư viện chuẩn (Standard Library)

o Assembly

o Property và sự kiện (Event)

o Delegate Quản lý sự kiện

o Dễ dàng để sử dụng Generic

o Indexer

o Biên dịch có điều kiện (Conditional Compilation)

o Đa luồng dễ dàng (Multithreading)

o LINQ và Lambda Expression

hỗ trợ bởi không gian tên System.Web

Hình 1: Cấu trúc MVC.

- Bộ framework MVC bao gồm các thành phần sau:

o Models Các đối tượng Model là các phần của ứng dụng sẽ thực hiện phần logiccho vùng dữ liệu chính của ứng dụng Thông thường, các đối tượng model nhận

và lưu trữ trong một cơ sở dữ liệu

Ví dụ, một đối tượng Product có thể nhận thông tin từ một CSDL, thực hiệncác thao tác xử lý dữ liệu trên đối tượng đó, và sau đó update thông tin đã thayđổi ngượi trở lại cho một bảng Product trong SQL Server

o Views Các View là các thành phần hiển thị giao diện khách hàng của ứng dụng

Và giao diện khách hàng được tạo ra từ dữ liệu trong các đối tượng Model Ví

dụ, có thể chỉnh sửa phần hiển thị của một bảng Products để hiển thị trên cácText box, các drop-down lists, và các Check box trên trạng thái hiện tại của mộtđối tượng Products

o Controllers Các Controllers là các thành phần sẽ điều khiển sự tương tác củakhách hàng, sau đó làm việc với các đối tượng model tương ứng, và cuối cùng sẽchọn một đối tượng View phù hợp để trả lại và hiển thị giao diện khách hàng

- Trong một ứng dụng MVC, đối tượng View chỉ hiển thị thông tin, Controller điểukhiển và trả lại dữ liệu tương ứng với các tương tác và dữ liệu khách hàng nhậpvào

Ví dụ, Controller điều khiển các giá trị Query-string, và truyền các giá trị đócho đối tượng Model, và lần lượt truy vấn CSDL bằng cách sử dụng các giá trị đó

 Lợi ích của mô hình MVC.

- Hỗ trợ kết hợp rất tốt giữa người lập trình và người thiết kế giao diện.

- Sử dụng các tính năng tốt nhất đã có của ASP.NET

 Nhược điểm của ASP.NET MVC.

- Không hướng đến sự kiện làm cho các nhà phát triển ASP.NET webform khó khăn

- Yêu cầu hiểu biết về HTTP, HTML, CSS và JavaScript

- Thư viện của nhà phân phối thứ ba không mạnh bằng

c Entity Framework.

 Tổng quan:

- Microsoft ADO.NET Entity Framework là một khuôn khổ đối tượng Object/ Bảng

đồ quan hệ Relational Mapping (ORM) cho phép các nhà phát triển dể dàng làm

việc với dữ liệu quan hệ như là các đối tượng domain-specific, loại bỏ đi sự khókhăn trong việc truy cập dữ liệu trước đây Bằng cách sử dụng Entity Framework,truy vấn LINQ, thì việc lấy và thao tác dữ liệu như các đối tượng trở nên mạnh mẽhơn Entity Framework ORM cung cấp các dịch vụ như change tracking, idenityresolution, lazay loading, và truy vấn dữ liệu tập trung vào business logic của ứngdụng

- Entity Framework là một bộ ánh xạ đối tượng – quan hệ cho phép người lậptrình NET làm việc với dữ liệu quan hệ qua các đối tượng (object) nó giúp lậptrình viên không cần viết mã cho (hầu hết) những gì liên quan đến truy cập dữliệu

- Các thành phần trong Entity Framework:

o Code là mã lệnh tạo thành các lớp đối tượng dữ liệu cho phép thao

tác với dữ liệu

o Model là sơ đồ gồm các hộp mô tả các thực thể và các đường nối kết

mô tả các quan hệ

o Database là cơ sở dữ liệu (có thể là SQL Server, Compact SQL

Server, Local database, MySQL, Oracle,…)

- Có 3 cách sử dụng Entity Framework: Code First, Models First, Database First

Hình 2: 3 cách sử dụng EF.

- Database first: là phương pháp chỉ nên dùng khi ta đã có sẵn CSDL (không

phải tạo), EF Wizard sẽ tạo Model và Code cho ta

- Models first: nên dùng khi ta bắt đầu thiết kế CSDL từ đầu (từ chưa có gì).

Ta sẽ thiết kế mô hình CSDL (Model) EF sẽ tự tạo code cho ta, sau đó nhờ

- JavaScript là một ngôn ngữ lập trình của HTML và WEB Nó là nhẹ và được sử

dụng phổ biến nhất như là một phần của các trang web, mà sự thi hành của chúngcho phép Client-Side script tương tác với người sử dụng và tạo các trang web động

Nó là một ngôn ngữ chương trình thông dịch với các khả năng hướng đối tượng

- Thẻ <script> báo cho chương trình trình duyệt bắt đầu phiên dịch tất cả văn bản ở

giữa các thẻ này như là một script Một cú pháp đơn giản của JavaScript sẽ xuất hiệnnhư sau:

<script >

JavaScript code

</script>

Bảng 2: Cú pháp Javascript

- Thẻ script nhận hai thuộc tính quan trọng sau:

- Language − Thuộc tính này xác định ngôn ngữ scripting nào bạn đang sử

dụng Giá trị của nó sẽ là javascript Mặc dù các phiên bản gần đây củaHTML (và XHTML) đã thôi dần không sử dụng thuộc tính này nữa

- Type − Thuộc tính này là những gì bây giờ được đề nghị sử dụng và giá trị

của nó nên được thiết lập là “text/javascript”

3 Tìm hiểu ngôn ngữ Html, Css.

3.1 Ngôn ngữ HTML

a Tổng quan HTML.

- HTML viết tắt của từ HyperText Markup Language là là ngôn ngữ đánh dấu siêu vănbản Được dùng để trình bày nội dung cho một trang web Phiên bản hiện tại làHTML5

- Phân loại thẻ HTML:

o None: Khối những thẻ này không hiển thị nội dung bên trong

o Block Level: Khối những thẻ này hiển thị nội dung bên trong vàchiều ngang tràn hết trình duyệt

o Inline: Khối những thẻ này hiển thị nội dung bên trong và chiềungang tùy thuộc vào kích thước của các đối tượng bên trong khối

- Kết quả của ví dụ trên:

- Như các bạn thấy: Ở ví dụ trên: "<font>" là một thẻ html có các thành phần:

o Tên thẻ: font.

o Thuộc tính color( thể hiện màu chữ) Giá trị của thuộc tính là red.

o Thuộc tính size( thể hiện màu chữ) Giá trị của thuộc tính là 12.

c Nguyên tắc khai báo một thẻ HTML.

- Thẻ html có hai loại: Thẻ đơn và thẻ kép

- Đối với một thẻ đơn thì kết thúc mỗi thẻ đơn ta phải có dấu đóng thẻ: Ví dụ: <br/>,

<hr/>, <meta/>

- Đối với một thẻ kép: Đối với một thẻ html kép( cặp thẻ) luôn bắt đầu bằng một thẻ

mở và kết thúc bằng một thẻ đóng Ví dụ: <p></p>, <font></font>, <div></div>

- Đối với bất kỳ thẻ html nào đều có thuộc tính và giá trịVậy cho dù có những thẻ html

mà bạn chưa bao giờ sử dụng thì việc tuân thủ theo những nguyên tắc trên bạn hoàntoàn có thể sử dụng và điều khiển được nó

d Các thẻ HTML căn bản.

<html>Nội dung</html> Là thẻ mở đầu của bất kỳ một trang web

<head>Nội dung</head> Là thẻ chứa các thẻ trong phần đầu của trang

web

<title>Nội dung</title> Là thẻ thể hiện tiêu đề của trang web

Luôn nằm trong cặp thẻ HEAD

<meta name="" content="" /><meta> Là thẻ chứa thông tin mô tả của một trang Web

Thẻ meta luôn nằm trong cặp thẻ HEAD

<body>Nội dung</body> Là thẻ chưa toàn bộ nội dung của trang web

Bên trong thẻ body chứa rất nhiều thẻ html khác

<br/> Là thẻ đặc biệt, nên đóng thẻ trên chính nó Được

<a href="link" target="value"

title="nội dung">Nội dung</a>

Thuộc tính href: Liên kết tới đâu ( bắt buộc )

Thuộc tính targer quy định về việc mở cửa sổtrình duyệt như thế nào

Thuộc tính title là nội dung hiển thị lên khi horverchuột vào

<p>Nội dung</p> Thể hiện nội dung theo từng đoạn.

<center>Nội dung</center> Dùng để canh giữa nội dung nằm bên trong thẻ

center

<hr/> Là thẻ đặc biệt được dùng để tạo đường kẻ ngang

<pre>Nội dung</pre> Dùng để định dạng nội dung bên trong Khi

ngườidùng gõ code thế nào thì hiện thị lên trình duyệttheo định dạng thế đó

<img src="path" width=""

height="" alt="" />

Được dùng để nhúng file ảnh vào trang web

src: là đường dẫn đến file ảnh cần nhúng widthqui định độ rộng của ảnh height qui định chiềucao của ảnh

alt chứa nội dung mô tả thông tin cho ảnh

<div>Nội dung</div>

<span>Nội dung</span>

Thẻ Div là thẻ HTML thuộc kiểu Block Có nghĩa

là chiều rộng của thẻ bằng toàn màn hình Chiềucao bằng nội dung mà nó chứa

Thẻ Span là thẻ HTML có kiểu Inline Có nghĩa

là chiệu rộng bằng nội dung nó chứa Chiều caocũng bằng nội dung nó chứa

<input type="" name="" value=""

size="" />

Thuộc tính type qui định kiểu Input

Thuộc tính name qui định tên của Input ( Tên tựđịnh nghĩa )

Thuộc tính Value qui định giá trị của Input đó( Thường để trống )

Thuộc tính size qui định độ rộng của thẻ Input

Bảng 3: Thẻ html căn bản

3.2 Ngôn ngữ CSS.

a CSS là gì.

- CSS là ngôn ngữ cơ bản để thiết kế website

- Hiểu đơn giản: chúng ta học CSS để tô màu cho website Về định nghĩa:

o CSS là viết tắt của từ Cascading Style Sheets

o Được tổ chức World Wide Web (W3C) giới thiệu vào năm 1996

o Là ngôn ngữ định nghĩa cách hiển thị các thẻ html trên website ( nó sẽ làmcho các thẻ html có màu sắc, font chữ to nhỏ như Word)

o color là property (thuộc tính)

o red là value (giá trị)

o Thuộc tính và giá trị được ngăn cách bởi dấu “:”

o color là property (thuộc tính)

o red là value (giá trị)

o Thuộc tính và giá trị được ngăn cách bởi dấu “:” và được bao quanh dấungoặc nhọn “{}”

e Tạo file riêng để viết CSS.

Trong đó:

- Test là selector (bộ chọn).

- color là property (thuộc tính).

- red là value (giá trị).

- Thuộc tính và giá trị được ngăn cách bởi dấu “:” và được bao quanh dấu

ngoặc nhọn “{}”

f Thứ tự ưu tiên trong CSS.

- Chèn css trực tiếp > Viết file css riêng > Chèn css trong cặp thẻ style.

4 Project: Xây dựng website thương mại điện tử theo mô hình MVC.

Nội dung: Xây dựng và phát triển dự án Website bán hàng điện tử

trực tuyến áp dụng mô hình MVC, bao gồm các chứ năng: Đăngnhập, đăng ký, tìm kiếm sản phẩm, giỏ hàng-đặt hàng, quản lý sảnphẩm

Nội dung công việc và kết quả đạt được:

 Nội dung 1: Thiết kế giao diện Website sử dụng Photoshop – Cắt PSD sang Html/Css.

- Sử dụng Photoshop để thiết kế các Layout của các trang sau:

+ Form Đăng nhập tài khoản :