Thiết kế và lập trình website

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC BÀ RỊA - VŨNG TÀU KHOA CÔNG NGHỆ KỸ THUẬT - NÔNG NGHIỆP CÔNG NGHỆ CAO  ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI THIẾT KẾ VÀ LẬP TRÌNH WEBSITE Giảng viên hướng dẫn : ThS Nguyễn Lan Hương Sinh viên thực : Phan Tiến Đạt Trình độ đào tạo : Đại Học Chính Quy Ngành đào tạo : Cơng Nghệ Thơng Tin Chun Ngành : Máy Tính MSSV : 16031147 Lớp : DH16MT Niên khóa : 2016 - 2020 VŨNG TÀU, NĂM 2020 ĐẠI HỌC BÀ RỊA – VŨNG TÀU KHOA KỸ THUẬT CN-NNCN CAO ⎯⎯⎯⎯⎯⎯⎯⎯⎯ CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ PHIẾU GIAO ĐỀ TÀI ĐỒ ÁN/ KHÓA LUẬN TỐT NGHIỆP Họ tên sinh viên: Phan Tiến Đạt Lớp: DH16MT Mã SV: 16031147 Ngành: Công Nghệ Thông Tin Khóa: 16 Tên đề tài: Thiết kế lập trình Website Mục tiêu đề tài: Thiết kế lập trình website giới thiệu, quảng bá công ty (công ty lấy tên Viko), đưa tới người hình ảnh công ty thông tin sản phẩm, dự án cơng ty Đồng thời bên phía cơng ty cung cấp chức để quản trị website cách tốt Kết dự kiến: Sản phẩm website có giao diện đẹp mắt, bố cục đơn giản, tích hợp nhiều chức để người dùng dễ dàng tra cứu, tìm hiểu thơng tin cơng ty Qua hình ảnh cơng ty quảng bá cách tốt đến người Thời gian thực hiện: Bắt đầu từ 02/03/2020 đến 10/05/2020 Vũng Tàu, ngày… tháng… năm… TRƯỞNG KHOA CNTT GIẢNG VIÊN HƯỚNG DẪN (Ký ghi rõ họ tên) (Ký ghi rõ họ tên) NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Ngày .Tháng Năm Giáo Viên Hướng Dẫn (Ký, ghi rõ họ tên) NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Ngày .Tháng Năm Giáo Viên Phản Biện (Ký, ghi rõ họ tên) LỜI CAM ĐOAN Đồ án cơng trình nghiên cứu xây dựng cá nhân tôi, thực hướng dẫn khoa học Ths Nguyễn Lan Hương Các số liệu, kết luận nghiên cứu trình bày đồ án tơi tự tìm hiểu hồn tồn trung thực Tơi xin hồn tồn chịu trách nhiệm lời cam đoan Vũng Tàu, tháng năm 2020 Sinh Viên Thực Hiện Phan Tiến Đạt LỜI CẢM ƠN Tôi xin chân thành cảm ơn khoa Công nghệ thông tin, trường Đại học Bà Rịa – Vũng Tàu tạo điều kiện thuận lợi cho thực đề tài Tôi xin gửi lời cảm ơn chân thành đến Ths Nguyễn Lan Hương, người tận tình bảo, định hướng hướng dẫn tơi thực đề tài Bên cạnh đó, tơi xin gửi lời cảm ơn đến thầy cô, người giảng dạy, tạo điều kiện cho tơi tích lũy kiến thức quý báu năm học qua Dù cố gắng hoàn thành đề tài Website giới thiệu công ty Viko, thời gian hạn hẹp khả hạn chế nên chắn có thiếu sót khơng tránh khỏi Tơi mong nhận thơng cảm tận tình bảo thầy góp ý từ bạn Vũng Tàu, tháng năm 2020 Sinh viên thực Phan Tiến Đạt MỤC LỤC DANH MỤC CÁC BẢNG DANH MỤC CÁC HÌNH ẢNH .2 LỜI MỞ ĐẦU CHƯƠNG 1: CƠ SỞ LÝ THUYẾT VÀ KHẢO SÁT 1.1 HTML,CSS JavaScript .7 1.1.1 HTML gì? .7 1.1.2 CSS gì? 1.1.3 JavaScript gì? 1.2 Bootstrap 1.2.1 Bootstrap gì? 1.2.2 Tại nên dùng Bootstrap? 1.3 JQuery 1.3.1 JQuery gì? 1.3.2 Tại nên dùng jQuery? 1.4 Ajax 10 1.4 Ajax gì? 10 1.4.2 Tại nên dùng Ajax? 11 1.5 Lararel 11 1.5.1 Laravel gì? 11 1.5.2 Tại nên dùng Laravel? .13 1.6 PHP 15 1.6.1 PHP gì? 15 1.6.2 Tại nên dùng PHP 16 1.7 Khảo Sát Hiện Trạng 17 1.7.1 Khảo sát thực tế 17 1.7.2 Khảo sát website tương tự 18 CHƯƠNG 2: TỔNG QUAN CHỨC NĂNG WEBSITE .24 2.1 Quan Điểm Của Sản Phẩm 24 2.2 Chức Năng Sản Phẩm 24 2.3 Người Dùng 24 2.4 Các Ràng Buộc 25 CHƯƠNG 3: YÊU CẦU CHỨC NĂNG WEBSITE 26 3.1 Xem tin 26 3.2 Tìm kiếm sản phẩm 26 3.3 Lọc sản phẩm 26 3.4 Gửi yêu cầu nhận báo giá 26 3.5 Nhận xét viết sản phẩm 26 3.6 Đăng nhập/đăng xuất 26 3.7 Quản lý tin đăng website .27 3.8 Nhận thông báo yêu cầu từ khách hàng 27 3.9 Quản lý thông tin tài khoản 27 CHƯƠNG 4: MÔ HÌNH USECASE .28 4.1 Tác nhân 28 4.2 Các yêu cầu chức 28 4.3 Lược Đồ Use Case 30 4.4 Chi Tiết Các Use Case 31 CHƯƠNG 5: THIẾT KẾ WEBSITE 59 5.1 Thiết kế sở dữ liệu 59 5.1.1 Lược đồ sở liệu .59 5.1.2 Chi tiết trường 59 5.2 Mối quan hệ giữa dữ liệu .64 5.3 Thiết kế giao diện Website – Front-End 64 5.4 Lập trình Website – Back-End với Laravel 85 5.5 Một số đoạn code bật 145 KẾT LUẬN 156 TÀI LIỆU THAM KHẢO 159 DANH MỤC CÁC BẢNG TT Số hiệu Nội dung Bảng 4.1 Bảng 4.2 Bảng 4.3 Bảng chi tiết UseCase 31 - 58 Bảng 5.1 Bảng Table tai_khoans 59 - 60 Bảng 5.2 Bảng Table infoct Bảng 5.3 Bảng Table thanhpham Bảng 5.4 Bảng Table baogia 61 Bảng 5.5 Bảng Table sanpham 61 Bảng 5.6 Bảng Table loaisanpham 62 10 Bảng 5.7 Bảng Table loaisanpham_sanpham 62 11 Bảng 5.8 Bảng Table hinhsanpham 62 12 Bảng 5.9 Bảng Table nhanxet Bảng tác nhân quyền tác nhân UseCase Bảng yêu cầu chức hệ thống Trang 28 28 60 60 - 61 62 - 63 DANH MỤC CÁC HÌNH ẢNH TT Số hiệu Nội dung Hình 1.1 Hình 1.2 Hình 1.3 Hình 1.4 So sánh ASP PHP 17 Hình 1.5 Slide hình ảnh sản phẩm 19 Hình 1.6 Hình 1.7 Danh mục sản phẩm 20 Hình 1.8 Bài đăng thơng tin sản phẩm 21 Hình 1.9 Bài đăng báo giá 22 10 Hình 1.10 Bài đăng tin tức 22 11 Hình 1.11 Danh sách cơng trình khác 23 12 Hình 4.1 Lượt đồ tổng quan usecase 30 13 Hình 5.1 Lượt đồ sở liệu 59 14 Hình 5.2 15 Hình 5.3 Trang chủ website Viko 64 16 Hình 5.4 Mục giới thiệu trang chủ 65 17 Hình 5.5 Mục sản phẩm bật trang chủ 66 Các phiên laravel đến tháng năm 2020 Cách thức hoạt động MVC Laravel Những ngơn ngữ lập trình phổ biến từ năm 1965 – 2019 Mẫu gửi thông tin yêu cầu tới công ty Các liệu có mối quan hệ với Trang 12 14 16 20 64 − − $(document).ready(function(){ − $("#timkiem").keyup(function(){ − var query = $(this).val(); − if(query !=""){ − var _token = $('input[name="_token"]').val(); − $.ajax({ − url:"{{ route('timkiem') }}", − method:"POST", − data:{query:query, _token:_token}, − success:function(data){ − $('#kq').fadeIn(); − $('#kq').html(data); − } − }); − } − }); − $(document).on('click', function(){ − $('#timkiem').val(""); − $('#kq').fadeOut(); − }); − − CODE load liệu cho lọc: − $selected = $request->id; − $kproducts =DB::table('loaisanpham') ->get(); 146 − $sproducts =DB::table('sanpham') > join('loaisanpham_sanpham','sanpham.ID','=','loaisanpham_sanpham sanpham_id') > select('sanpham.ID','sanpham.TenSP','sanpham.AnhTD','loaisanpham _sanpham.loaisanpham_id') ->orderBy('sanpham.ID', 'desc')-> get() >toArray() ; − for($i = 0; $i < count($sproducts); $i++){ − $sproducts[$i]->loaisanpham_id = 'filter-'.$sproducts[$i]>loaisanpham_id; − } − for($i = 1; $i < count($sproducts); $i++){ − if($sproducts[$i]->ID == $sproducts[$i-1]->ID){ − $sproducts[$i]->loaisanpham_id = $sproducts[$i]>loaisanpham_id ' ' $sproducts[$i-1]->loaisanpham_id; − array_splice($sproducts,$i-1,1); − $i; − } − } − CODE phân trang danh sách dự án: − public function getDuAn(){ − $duans = thanhpham::where('ID','>',0)->orderBy('ID','desc') >paginate(6) ; − − return view('pages.duan.danhsachduan',['duans'=>$duans]); } 147 − CODE xác thực đăng nhập: − − if(Auth::attempt(['tendn'=>$request->tendn,'password'=>$request>matkhau])){ − − return redirect("admin/loai-san-pham/danh-sach"); }else{ − return view('admin.user.login')>with('err','Sai tên tài khoản mật khẩu'); − }; − − CODE xử lý liệu từ Ajax gọi đến chức tìm kiếm: − if($request->get('query')) − { − $query = $request->get('query'); − $data = DB::table('sanpham') − ->where('TenSP', 'LIKE', "%{$query}%") − ->get(); − $output = '

'; − foreach($data as $row) − { − $output = ' −
• '.$row>TenSP.'
− − '; } 148 − $output = '

'; − echo $output; − } − CODE thông báo số yêu cầu từ khách hàng chưa xem: − $this->middleware(function($request,$next){ − if(Auth::check()){ − $baogia = baogia::where('DaXem',0)->get(); − view()->share('baogia',$baogia); − } − return $next($request); − }); − CODE tạo multi-slide: − − $('.owl-top').owlCarousel({ − loop:true, − margin:20, − autoplay:true, − autoplayTimeout:5000, − autoplayHoverPause:true, − responsive:{ − 0:{ − items:1 − }, − 400:{ 149 − items:2 − }, − 800:{ − items:3 − }, − 1200:{ − items:4 − − } } − }); − − CODE tạo lọc với liệu load lên từ Database thông qua Controller: − − − − − $(window).on('load', function () { var portfolioIsotope = $('.portfolio-container').isotope({ itemSelector: '.portfolio-item' }); portfolioIsotope.isotope({ filter: $('#portfolioflters li.first').attr('data-filter') }); − − $('#portfolio-flters li').on( 'click', function() { if($(this).hasClass('all')){ − $("#portfolio-flters li").removeClass('filter-active'); − $(this).addClass('filter-active'); − portfolioIsotope.isotope({ filter: $(this).data('filter') }) − } 150 − else if($(this).hasClass('elem')){ − $("#portfolio-flters li.all").removeClass('filter-active'); − var selected = $("#portfolio-flters li.elem") − var inclusives = []; − if($(this).hasClass('filter-active')){ − $(this).removeClass('filter-active'); − selected.each( function() { − if ($(this).hasClass('filter-active')) { − inclusives.push( $(this).attr('data-filter') ); − } − }); − var filterValue = inclusives.join(""); − if(filterValue !=""){ − portfolioIsotope.isotope({ filter: filterValue }) − } − else{ − portfolioIsotope.isotope({ filter: '.nothing' }) − } − } − else{ − $(this).addClass('filter-active'); − selected.each( function() { − if ($(this).hasClass('filter-active')) { − inclusives.push( $(this).attr('data-filter') ); − } − }); 151 − var filterValue = inclusives.join(""); − portfolioIsotope.isotope({ filter: filterValue }) − } − } − }); − }); − CODE tạo điều hướng scroll: − $(window).scroll(function() { − if ($(this).scrollTop() > 50) { − − $('header').addClass('header-scrolled'); } else { − − $('header').removeClass('header-scrolled'); } − }); − CODE tạo hiệu hứng hoạt hình scroll đến mục tin: − function isScrolledIntoView(elem) { − var docViewTop = $(window).scrollTop(); − var docViewBottom = docViewTop + $(window).height(); − var elemTop = $(elem).offset().top- $(window).height()/2; − var elemBottom = elemTop + $(elem).height(); − return elemBottom = docViewTo p; − } − $(window).scroll(function() { 152 − $("#hlservices owl-hl").each(function() { − if (isScrolledIntoView(this) === true) { − $(this).css("opacity",1); − $(this).addClass("fadeInRight"); − } − }); − }); − $(window).scroll(function() { − $("#services wown").each(function() { − if (isScrolledIntoView(this) === true) { − $(this).css("opacity",1); − $(this).addClass("bounceInUp"); − } − }); − }); − CODE cho button Back-to-top: − $(window).scroll(function() { − if ($(this).scrollTop() > 100) { − − $('.back-to-top').fadeIn('slow'); } else { − − $('.back-to-top').fadeOut('slow'); } − }); − $('.back-to-top').click(function(){ − $('html, body').animate({scrollTop : 0},"slow"); 153 − return false; − }); − $('#header logo text-light').click(function(){ − $('html, body').animate({scrollTop : 0},"slow"); − return false; − }); − CODE biến đổi điều hướng sang dạng mục điều hướng website chạy thiết bị có hình nhỏ: − if ($('.main-nav').length) { − − var $mobile_nav = $('.main-nav').clone().prop({ class: 'mobile-nav d-lg-none' − }); − $('body').append($mobile_nav); − $('body').prepend(''); − $('body').append(''); − − $(document).on('click', '.mobile-nav-toggle', function(e) { − $('body').toggleClass('mobile-nav-active'); − $('.mobile-nav-toggle i').toggleClass('fa-times fa-bars'); − $('.mobile-nav-overly').toggle(); − }); − $(document).on('click', '.mobile-nav drop-down > a', function(e) { − e.preventDefault(); − $(this).next().slideToggle(300); 154 − $(this).parent().toggleClass('active'); − }); − − $(document).click(function(e) { − var container = $(".mobile-nav, mobile-nav-toggle"); − if (!container.is(e.target) && container.has(e.target).length === 0) { − if ($('body').hasClass('mobile-nav-active')) { − $('body').removeClass('mobile-nav-active'); − $('.mobile-nav-toggle i').toggleClass('fa-times fa-bars'); − $('.mobile-nav-overly').fadeOut(); − } − } − }); − } else if ($(".mobile-nav, mobile-nav-toggle").length) { − − $(".mobile-nav, mobile-nav-toggle").hide(); } 155 KẾT LUẬN Mức độ hồn thành − Chọn đề tài, phân tích đề tài, tìm hiểu thực tế: + Đã gặp giáo viên trao đổi, nhận đề tài + Phân tích đề tài ở chương tài liệu + Đã khảo sát thực tế trang web ở chương mục tài liệu − Thiết kế giao diện trang web: + Đã có trang chủ với chức năng: Xem đăng, Tìm kiếm sản phẩm, Gửi yêu cầu nhận báo giá + Đã có giao diện chi tiết đăng đăng chi tiết sản phẩm có chức nhận xét + Đã có giao diện mục danh sách đăng đăng danh sách sản phẩm chức lọc sản phẩm + Đã có giao diện trang thơng báo Not Found + Đã có giao diện trang Đăng nhập/Đăng xuất + Đã có giao diện trang Admin sau Đăng nhập + Đã có giao diện quản lý thông tin đăng trang Admin + Đã có giao diện trang Admin quản lý tài khoản nhận danh sách yêu cầu báo giá + Đã tương thích nhiều thiết bị khác − Tạo thiết kế sở liệu: + Đã có lược đồ sở liệu database + Đã tạo lược đồ usecase chi tiết usecase 156 − Phần code: + Hoàn thành đăng tin, xử lý hình ảnh đăng tin + Hồn thành xem đăng, hiệu ứng hoạt hình, multi-slide đăng phân trang cho mục danh sách + Hoàn thành hiển thị chi tiết đăng + Đăng nhập thành cơng với authentication + Hồn thành Chức tìm kiếm sử dụng Ajax, chức lọc liệu + Hoàn thành chức gửi yêu cầu nhận báo giá, chức nhận xét + Hồn thành quản lí đăng, quản lý tài khoản, thông báo số yêu cầu từ khách hàng chưa đọc, hiển thị danh sách yêu cầu − Cho liệu vào Database: + Đã thêm liệu vào database + Đã chạy thử phần giao diện ở trang chủ trang đăng tin − Mức độ hồn thành:100% Các khó khăn gặp phải − Sử dụng công nghệ cho ứng dụng chưa thành thạo − Phải dành nhiều thời gian tìm hiểu cơng nghệ Ưu, Nhược điểm của website − Ưu điểm: + Có tính nhận thơng báo yêu cầu từ khách hàng + Đăng tin, sữa tin cách dễ dàng dành cho Admin + Xem tin dễ dàng vừa truy cập trang web 157 + Giao diện bắt mắt, đơn giản tạo cảm giác thoải mái cho người xem + Có tính gợi ý tìm kiếm sản phẩm cho người dùng + Có khả lọc sản phẩm thuộc nhiều loại lúc + Gửi yêu cầu nhận báo giá đến công ty cách nhanh chóng + Tích hợp google map phần liên hệ với công ty − Nhược điểm: + Nội dung cho website chưa nhiều + Chưa có hộp chat trực tuyến khách hàng với công ty Ý tưởng phát triển − Xây hộp chat trực tuyến khách hàng với công ty − Phát triển thêm nhiều nội dung cho website 158 TÀI LIỆU THAM KHẢO Tài liệu tiếng việt Tài liệu từ internet Văn Giang Bootstrap gì? Vì nên sử dụng Bootstrap?, ngày tháng năm 2020, https://tech.bizflycloud.vn/bootstrap-la-gi-vi-sao-nen-su-dungbootstrap-20181123141649382 Nguyễn Thị Thu Hà Tìm hiểu HTML CSS, ngày tháng năm 2020, https://viblo.asia/p/tim-hieu-ve-html-va-css-co-ban-phan-17ymwGXV0R4p1 Nguyễn Hiền PHP gì? Tổng quan ngơn ngữ PHP, ngày tháng năm 2020, https://toidayhoc.com/lap-trinh/php-la-gi-tong-quan-ve-ngon-nguphp/ Đào Quang Huy Giới thiệu Laravel, ngày tháng năm 2020, https://viblo.asia/p/gioi-thieu-ve-laravel-924lJrnzlPM Bá Huỳnh TOP hình thức marketing online hiệu năm 2019, ngày tháng năm 2020, https://crmviet.vn/cac-hinh-thuc-marketing-online-pho-bien-nhatnam-2018/ Nguyễn Nhật JQuery gì? Vì nên sử dụng JQuery?, ngày tháng năm 2020, https://topdev.vn/blog/jquery-la-gi/ Thành Phú JavaScript gì? Vài trò JavaScript website, ngày tháng năm 2020, 159 https://quantrimang.com/javascript-la-gi-155978 Phạm Thạch CSS gì? Vai trị website, ngày tháng năm 2020, https://thachpham.com/web-development/html-css/css-la-gi-va-vaitro.html Lê Thảo Ajax gì? Cách thức hoạt động lợi ích mang lại, ngày tháng năm 2020, https://topdev.vn/blog/ajax-la-gi-cach-thuc-hoat-dong-va-loi-ichma-no-mang-lai/ 10.Nguyễn Việt Ngôn ngữ HTML gì? Vai trị HTML lập trình web?, ngày tháng năm 2020, https://blog.webico.vn/ngon-ngu-html-la-gi-vai-tro-cua-html-tronglap-trinh-web/ 11.VNETWORK Các số liệu thống kê Internet Việt Nam 2019, ngày tháng năm 2020, https://vnetwork.vn/news/cac-so-lieu-thong-ke-internet-viet-nam2019 160 ... SV: 16031147 Ngành: Cơng Nghệ Thơng Tin Khóa: 16 Tên đề tài: Thiết kế lập trình Website Mục tiêu đề tài: Thiết kế lập trình website giới thiệu, quảng bá công ty (công ty lấy tên Viko), đưa tới... ngơn ngữ lập trình có sẵn có vài ngơn ngữ phổ biến nhiều người tin dùng ngơn ngữ lập trình phổ biến PHP Đây ngôn ngữ thiết kế 16 để phục vụ cho việc phát triển web cài đặt 20 triệu website, triệu... Những ngơn ngữ lập trình phổ biến từ năm 1965 – 2019 1.6.2 Tại nên dùng PHP − Hiện nay, có hàng ngàn ngơn ngữ lập trình có sẵn có vài ngơn ngữ phổ biến nhiều người tin dùng ngôn ngữ lập trình phổ