fl 'tí'".> TRƯỜNG CAO ĐẲNG CƠNG NGHỆ THỦ ĐỨC KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO KẾT QUẢ THỰC TẬP TĨT NGHIỆP Tên doanh nghiệp: Cơng ty TNHH Giải Pháp Công Nghệ 3T Địa chỉ: 15A Đường CN6, Phường Sơn Kỳ, Quận Tân Phú, TP Hồ Chí Minh GVHD HSSV HSSV LỚP Phan Thanh Nhuần Võ Minh Châu Nguyễn Thị Mai Ly CD14TT2 MSSV MSSV KHÓA 1451TT0352 1451TT0401 2014 TRƯỜNG CAO ĐẲNG CÔNG NGHt THỦ ĐỨC THƯ Vlt' ĐKCB THÁNG 7/2017 PHIẾU ĐÁNH GIÁ KẾT QUẢ THỰC TẬP CỦA DOANH NGHIỆP Học sinh- sinh viên Thời gian thực tập Người đánh giá Họ tên:- J „ yo HIM-tl ỡ-ti-ÂƯ Lớp: Ngày đến ỮẲ / 05 / Ngày bắt đầu oỉ / 0$ / OỈỮH Ngày kết thúc 0?3 / 06 / 7-74 Họ tên: _ 7ve3 Chức vụ: ÓLcưn Ixị1_ ; Cơ quan: _ (m 7N-H-H foot puị ÒT _ Địa chỉ: -d5A -3UoỏC|_ 6/76 Ị J-ku'ovCj Lj , (ìưcvn T&n ịĨĨ1 ch Điện thoại: CHTb 64 T)05 DĐ: _ Emai 1: Đánh giá tổng quát Ghi chú: = chưa tốt; 2= chưa tốt; = chấp nhận được; = tốt; - tốt (Có thể bỏ qua tiêu khơng có chương trình thực tập HSSV) _ Nội dung Tiêu chí đánh giá Đánh giá (1) Quản lí Thời gian Cơng việc Bắt đầu kết thúc công việc Tuân thủ làm việc Phân bổ thời gian cho công việc Khả xếp công việc cần thực Thực yêu cầu công việc (2) (3) (4) A y t Thái độ Thái độ làm việc Chuyên cần Đam mê công việc Tinh thần học hỏi Tinh thần làm việc nhóm 10 sẵn sàng có yêu cầu trợ giúp người khác Quan hệ 11 Với người hướng dẫn/anh/chị công ty/cơ quan 12 Với thành viên khác nhóm Kỹ thực hàn i/thực tập Thực hành 13 Có kế hoạch cụ thể, rõ ràng để thực công việc (5) X X Ằ A X X A TDN 7.5.1 L-B6 PHIẾU ĐÁNH GIÁ KẾT QUẢ THỰC TẬP CỦA DOANH NGHIỆP Học sinh- sinh viển Thời gian thực tập Người đánh giá Họ tên:- _0 NfrWF-HI NtM lY Lớp: CN4TU Ngày đến OS / 05 / oft Ngàybắtđầu Oỉ / ởó Ngàykếtthúc 0? / OÊ /=/0-17 Họ tên: Nc^cón^ Chức vụ: Quc^ 1^' _ _ Cơ quan: Cờrựj ' ĨNtlTl &OJ %T _ Địa chỉ:- 45/_ -7)ùohj CNG , J/uZbnij Ity , Gjựặjn 7ajf} _?/w ,7P.iKN Điện thoại: 0055 £oi5 505 DĐ: _ Emai 1: _ Đánh giá tổng quát Ghi chú: - chưa tốt; 2= chưa tốt; = chấp nhận được; = tốt; = tốt (Có thề bỏ qua tiêu chí khơng có chương trình thực tập HSSV) Nội dung Tiêu chí đánh giá Đánh giá (1) Quản lí Thời gian Công việc Bắt đầu kết thúc công việc Tuân thủ làm việc Phân bổ thời gian cho công việc Khả xếp công việc cần thực Thực yêu cầu công việc (2) (3) (4) X X X X X Thái độ Thái độ làm việc Chuyên cần Đam mê công việc Tinh thần học hỏi Tinh thần làm việc nhóm 10 sẵn sàng có yêu cầu trợ giúp người khác Quan hệ 11 Với người hướng dẫn/anh/chị công ty/cơ quan 12 Với thành viên khác nhóm Kỹ thực hàn 1/thực tập Thực hành 13 Có kế hoạch cụ thể, rõ ràng để thực công việc (5) N X X >< TDN 7.5.1 L-B6 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Nội dung thực tập: ỵ ^ K-y .1 /ty• • • p.y.h.' .ỵ f.cy.T T ^.ĩ ỵli AỈiĩn iã ưíhíý./ ịiltí1., 7fìữí .ữfĩ í&7 ks '■■ ỵ cừ' ty.Ạiữb iâĩ Trình bày học HSSV khọá thực tập: .Ị^ị Ạịln Điểm yếu HSSV thực tập: 4- • • -C^ỉ‘ ■ ■ ■ .Ặữa ttỉM : Điểm mạnh HSSV thực tập: .J c^ỳ Kết luận: Được báo cáo □ Không báo cáo Tổng số điểm HSSV đạt là: /10 điểm Giảng viên hướng dẫn MỤC LỤC LỜI MỞ ĐẦU Chương Nội dung thực tập 1.1 Mơ tả quy trình thực tập công việc thực tế nơi thực tập 1 1.1.1 Quy trình thực tập 1.1.2 Cơng việc tìm hiểu thực tế 1.2 Nội dung báo cáo 1.2.1 Kiến trúc LESS 1.2.2 Giới thiệu W3C lỗi thường gặp W3C 1.2.3 Sử dụng Grunt để tối ưu css, JavaScript 1.2.4 Test mobile Chương Tự đánh giá nhận xét thực tập 12 15 2.1 Nhận thức HSSV sau thời gian tìm hiểu tham gia thực tập đơn vị 15 2.2 Mối quan hệ đồng nghiệp nơi thực tập 15 2.3 Học hỏi từ quy định nơi thực tập 16 2.4 Đánh giá mối liên hệ lý thuyết thực tiễn 16 KÉT LUẬN 18 TÀI LIỆU THAM KHẢO 19 LỜI MỞ ĐẦU Ngày nay, với bùng nổ mạnh mẽ cơng nghệ thơng tin Nó khơng dừng lại ở mục đích phục vụ cho khoa học kỹ thuật mà sâu vào đời sống xã hội, dần thân thiện, gần gũi, mang nhiều lợi ích cho người Công nghệ thông tin ngày khăng định tính hữu dụng sức mạnh môi phương tiện, ngành nghê sông, nhât thời đại kinh tê thị trường Đi kèm theo đó, hệ thống website phát triển không ngừng Tuy nhiên, đê tạo trang web có sức sơng bền lâu thân phải mang lại lợi ích cho nhiều người Giao diện bắt mắt yếu tố quan trọng để người xem click chuột đến website bạn Nhưng yếu tổ định giữ chân độc giả lại nội dung mà website cung cấp Trong trình thực tập, giúp đỡ thầy Phan Thanh Nhuần công ty Giải Pháp 3T, chúng em hoàn thành báo cáo tốt nghiệp với đề tài Thiết kế website học tập Tuy nhiên, với kiến thức hạn hẹp kinh nghiệm cịn nên khơng thể tránh khỏi thiếu sót Rất mong q thầy nhận xét góp ý để báo cáo chúng em hoàn chỉnh Chuơng Nội dung thực tập 1.1 Mơ tả quy trình thực tập cơng việc thực tế noi thực tập 1.1.1 Quy trình thực tập Quy định thời gian: - Thời gian thực tập: tháng - Thời gian làm việc: chủ yếu làm việc online (1 tuần lên công ty ngày) - Vắng mặt: phải thông báo trước Sơ đồ quy trình làm việc: 1.1.2 Cơng việc tìm hiểu thực tế a Tóm tắt cơng việc - Nghiên cứu xây dựng giao diện website học tập - Báo cáo công việc hàng tuần: Tuần Nội dung thực Khởi tạo project fooweb với module sẵn có Review module, tạo trang tổng hợp (có tổng cộng 21 trang) ITrang Fix bugs giao diện Fix lồi theo chuẩn W3C Tiếp tục fix lỗi W3C Tạo file var.less, thiết kế biến cho dễ tái sử dụng Nhúng file var.less, tối ưu less Thay tât biên file less tât module Check module, tối ưu less js Cấu hình để test website thiết bị mobile thật Review tất trang thay biến (less) Review tất trang sửa lỗi theo chuẩn W3C Đứt điểm tồn đọng, chỉnh lại dùng HTML5/CSS3 Dùng grunt để tối ưu css js Chuẩn bị cho báo cáo kết thúc đợt thực tập b Tổng quan nội dung báo cáo - Nội dung: + Kiến trúc LESS + Giới thiệu W3C lỗi thường gặp W3C + Sử dụng Grunt để tối ưu css, JavaScript + Test mobile 1.2 Nội dung báo cáo 1.2.1 Kiến trúc LESS a Giói thiệu LESS - CSS trở quen thuộc với lập trình viên phát triển Website, nhiều ưu điểm mà mang lại như: cú pháp đơn giản, dễ học, dễ tiếp cận Tuy nhiên thiết kế Website lớn với nhiều đoạn mã code css trở lên bị động: + Khai báo thành phần vào thành phần khác + Khó dùng lại thuộc tính giống + Khó quản lý đoạn mã css trở nên nhiều CSS Preprocessor giải pháp tối ưu khắc phục vấn đề Và CSS Preprocessor phổ biến LESS - LESS CSS preprocessor giúp ngắn gọn đơn giản hóa đoạn mã css cách thêm vào mã css thành phần : biến, mixins, toán tử hàm LESS chạy phía client-side (Chrome, Safari, Firefox) server-side, với Node.js Rhino => Chính mà việc quản lý mã css trở lên dễ dàng nhiều b Cài đặt ❖ Client - side - Trước tiên, tải file “less.js” từ địa website: http://lesscss.Org/#download-options - Sau đó, tạo file có phần mở rộng '.less' chứa mã LESS css bạn thêm vào mã code HTML: clink rel="stylesheet/less" type="text/css“ href=“styles.less”> Cscript src="less.js” type="text/javascript">C/script> Lưu ý: File “styles.less” phải thêm vào trước “less.js” 2ITrang ❖ Server - side - Để cài đặt, dùng npm lệnh: $ Ftps install less - Sau kill cài thành công, gọi thơng qua trình biên dịch npm sau: var less = require(1 less 8); less.render(1.class { width: + J'j function (e, css) { console.log(css); }); - Kết quả: »cla s s width: 6; } ❖ Cấu hình Bạn thêm tùy chọn cho trình biên dịch: var parser - new(less.Parser)({ paths: ['.'j ’./lib'Jj // chi định đường dẫn cho ịậimport filename: ’style.less8 // Chỉ định tên tệp less }); parser.parse('.class { width: + }'j function (e, tree) { tree.toCSS({ compress: true }); // rhu nhá (nên) nội dung css }); Less cho phép gọi trình biên dịch từ command-line sau: $ lessc style s.less Bạn ghi file tùy chọn sau biên dịch ghi stdout: $ lessc styles.less > styles.css c Cú pháp ❖ Biến lận ice-green: #00a685; (Slight-green: ộnice-green + #111; fheader { color: (Slight-green; }• Kết quả: #header ■{ color: #llb685; } ❖ Mixins Trong LESS, thêm nhóm thuộc tính 'ruleset' vào 'ruleset' Giả sử ta có class sau: bordered { border-top: dotted Ipx black; border-bottom: solid 2px black; Ị, J Giờ ta muon sử dụng thuộc tính class 'ruleset' khác Để làm điều này, cần thêm tên class vào bên bẩt kỳ 'ruleset' ta muốn ITrang thêm vào, sau: #menu a ■{ color: #11'1; bordered; Ị, j post a •{ color: red; bordered; T j Các thuộc tính class bordered xuất #menu a post a: ■Ễraenu a { color: #111; border-top: dotted Ipx black; border-bottom: solid 2px black; j post a -{ color: red; border-top: dotted Ipx black; border-bottom: solid 2px black; J ❖ Nested rules Less cho phép bạn sử dụng quy tắc lồng (nesting) thay phân tầng (cascading) Giả sử có đoạn mã css sau: #header { color: black; } #header navigation { font-size: 12p.x; } theader logo { width: 300px; Ị J Trong LESS, viết sau: #header { color: black; navigation { font-size: 12px; } logo { width: 30Spx; } j ❖ Hàm toán tử LESS cung cấp số lượng lớn function hồ trợ biến đổi màu sắc, xử lý chuỗi IT rang thực tính tốn Chúng viết chi tiết đầy đủ phần tham khảo function Cách sử dụng function rõ ràng Ví dụ sau sử dụng phàn trăm để chuyển đổi 0.5 thành 50%, tăng độ bão hòa màu sờ lên 5% sau tăng độ sáng màu background lên 25% xoay độ: @base: #f046'15; @width: 0.5; class { width: percentage ({Swidth); // trà '50%' color: saturate(@base, 5%); background-color : spin(lighten(@base, 25%), 8); j Các so, màu sac biến số sử dụng để tính tốn Hãy xem ví dụ sau đây: @base: 5%; @fỉller: ©base * 2; (Bother: ©base + @fỉller; color: #888 / 4; background-color: @base-color + #111; : / + ^filler; LESS hiểu khác màu sắc đơn vị Nếu đơn vị sử dụng với toán tử, giống như: @var: Ipx +5; Kết 6px width: (ậvar + 5) * 2; Dấu ngoặc sử dụng kèm với tốn tử: ❖ Import Bạn có the import file less, tất biến mixin file thêm vào file gọi Có thể khơng cần less, nên hai trường hợp hợp lệ: ©import "lib.less"; (Simport "lib’1; Nếu bạn muốn import file css, cần thêm đuôi css: ^import "lib.css”; 1.2.2 Giới thiệu W3c lỗi thường gặp W3C a Giói thiệu W3C -Tổ chức World Wide Web Consortium (W3C) cộng đồng quốc tế, nơi tổ chức thành viên, nhân viên làm việc toàn thời gian cộng đồng làm việc để ITrang phát triển tiêu chuẩn Web Được dẫn dắt nhà phát minh Web Tim Berners-Lee Giám đốc điều hành Jeffrey Jaffe , nhiệm vụ W3C để dẫn dắt World Wide Web, để tiềm cách phát triển giao thức hướng dẫn để đảm bảo phát triển lâu dài Web - Công cụ để kiểm tra lỗi W3C: https://validator.w3.Org/#validate by mput Markup Validation Service Cteettha Validate by URI iHIMí XHiMi Validate by File Upload »of antumnnts Validate by Direct Input Validate by direct input r.ntef thtt Markus to validate: ► More Options Check b - Ễ 'i Các lỗi thường gặp W3C Lỗi dừng xác nhận cho kết khơng xác Thẻ khơng đóng Thẻ khơng phải chữ thường Thẻ không thứ tự Thẻ mã hố khơng xác Check W3C validation tệp e ChkiHBini "* x«m Chén « * A m Diỉii&í Ocnhdtnợ ’»■ *«*’ CCngcự tr-ísiiíàỉtịStìayĩíốíỉỉíXỵsteỉvử ĩrpptíip » » ■* -5 * K • 1, ■ H • » , aa ■ l ê £ o ca B Sỗ T The W3C Markup Validation Service Ref: h.Up.$.;.//yai.!d.a.to.r.Av.3 o.r.g/#y.a.iid.a.t.e^.by^inp ui # Errors Descriptions End Ing for ‘head" which is not finished End tag for ’Img" omitted, but OMITTAG NO was specified End tag for ’input" omitted, but OMITTAG NO was specified End tag for "link” omitted XML Parsing Error: opening and ending tag mismatch Document type does not allow element "p” here End tag for ”p" omitted End tag for ”td” omitted End tag for "meta" omitted XML Parsing Error: Opening and ending tag mismatch End tag for "br" omitted XML Parsing Error: Opening and ending tag mismatch s End tan for element "div" which is not ooen invalid Parameter Corrected parameter _ Action - Add tag Add a terminating slash to the Add a terminating slash to the "h6" -div", "pre" "address", "fieldset", "ins", "def start-tag S’tiii Vil-riiaitei: ị Tag? :;)!>» '■ Tags Corrected parameter Action move statement after English Add in front of 'bootstrap/less/bootstrap.less’ } } }, Cssmin: Làm nên one-line, cssmin: ( dist: {files: {src: ] } }, [ 'css/styles.css ' , dest: ’css/styles.css'} Uncss : xóa bỏ css dư khơng cần thiết task xóa phần dư bootstap dùng với html ịuncss: { dĩst: { files: [ {src: ] b 'demo.html', dest: ’css/styỉes.css'} Uglify: Tối ưu Js uglify: { nenjs: { sic: 'js/script.js', dest: *js/script.min.js* } Htmlmin: ưu Html thành one-line titmlmin: { dist: { options: { removeComment3: true, collapsewhitespace: true files: Í{ expand: true, r c: " demo.ntml )] Concat: gộp file js ITrang concat: { gop33: { SIC: [ 'bootstrap/5s/affix 33 ’, ’bootstrap/33/alert.33’, ’bac 131 r ap/33/but to ri 3', 'bootstrap/Js/carcusel.J 5•, ’bootstrap/3s/callapse.33’, •bootstrap/js/dropdown.js* , ■bcotstrap/js/riiodal.js* , * bootstrap/js/popover.35 *, ’bootstrap/33/scrollspy.Js’, 'bootstrap/jis/tab.js ’, 'bootstrap/js/tooltip.33', ’bootstrap/33/transition 3S * ], ’33/script.35’ dest: ), Concat_css: gộp toàn css Nếu bạn có q nhiều flies dùng concat concat_css: { dist: { src: [•c3s/*’/*.css"J> dest: °css/styles.css” }, Imagemin: tối ưu dung lượng hình ảnh imagemin: { dist: { opti ons: { optimizatlonLevel: }, files: [{ expand: true, cwd: " ima ge s /1', arc: ("*•*/-."J, de s t: " iragmi :n / " }] } >, Và cuối phải default, registerTask làm theo thứ tự khai báo Register the default tasks, grunt loadNpÉlasks (’ grHst-ccffitrXc-caacat ’}; grunt loadỉĩpmTasks (' grunt-ccnrrib-watch.* 1; grunt.loadNpmTasks(‘grunt-aontrib-less *); grunt loadỉỉpmĩasks (’ ; grunt loadìỉpmĩasks (* gruut-coxitxxb-uglify‘; grunt loadNpmĩasks (Mgrunt“une»s!t); )Í grunt loadNpffilasks (,:,grunt grunt loadSpmTasks ("grust^sritrib-iĩ&ag^&ịn*') grunt loadNpmTasks (’ i ; grunt.registerĩask(’default', riBagetũn’, ‘less*, ‘uneẩs’, 10 I T r a n g Bước Trỏ vào thư mục cân thiêt chạy bước cmd npin install -g grunt-cli SRB C:\Wrndows\System32\cmd.exe Microsoft Windows [Verối.on 10.0.14393] (c) 2016 Microsoft Corporation All rights.reserved c:\wamp64\www\grunt>npm install -g grunt-cỉí * , c:\tlsers\ITLAB\AppData\Raaming\.npm\grupt - > C:XUsers\IĨLẨAB\AppOata\Roaffiing\npm\node_modules\grunt-cli\binXgrunt c: MJsersVHI AB\AppData\Roami.ng\npm * •— grunt 2.0 ■ ■ • ■ ' • •_ • ■ npm install 33 C:\Windows\System32\cnid.exe — □ X Microsoft Windows (Version Id.0.143931 (c) 2316 Microsoft Corporation All rights reserved c:\wamp64\www\grunt>npm install Bước Sẽ xuất thư mục node_modules This PC > Downloads » grunt Name bootstrap J C5S ■ _ images X * i* f [y less Date modified Type 3/30/2017 7:14 AM File folder 3/31/20179:41 AM File f elder 3/28/2017 9:38 AM File folder 3/31/20179:11 AM File folder 3/28/201710:13 AM File folder nbproject 3/28/20179:37 AM File folder node_modules _ 3/31/20179:21 AM JFile folder Size Ệ7 demo.html 3/31/2017 9:51 AM Chrome HTML Do KB hBi Gruntfile.js 4/21/20178:11 AM JavaScript File KB 3/28/201711:19 AM Chrome HTML Do KB 4/21/20177:57 AM JSON File KB index.html £T package.json Bước 7, Chạy lệnh Grunt chờ kết hình: ESS grunt — □ X Microsoft Windows [Version 10.0.14393] (c) 2016 Microsoft Corporation All rights reserved c: \wamp64\www\grunt>grunt Running "imagemin:dist” (imagemin) task Minified images (saved 374,54 kB) Running "less:development” (less) task File created: Running "uncss:dist" (uncss) task File < created: Running "cssmin:dist" (cssmin) task File ": ••.yie ■ created: ;? kli -* Running "htmlfflin:dist" (htmlmln) task Minified files Running "ccncat:gopjs” (concat) task File “js/script.js" created Running "uglifytnenjs” (uglify) task Running "concat-CSS:dist" (concat_css) task File “css/styles.css" created , 11 I T r a n g 1.2.4 Test mobile a cấu hình mobile truy cập trực tiếp vào máy tính Bước Dùng cmd xác định IP Windows IP Configuration Wireless LAN adapter Local Area Connection* 3: Media state Connection-specific DNS Suffix * Wireless LAN adapter Wi-Fi: : Media disconnected - Connection-specific DNS Suffix : Home Link-local IPuG Address : fe80: : 58e2: d928: MajykJ eM7.5 IPuU Address Shang (S’.) ► i&l Apache modules » I ' ot1 Powered lỹ Otomatie MB ■IB Apache errorteg- Pl Localhcst Apache access log Port * used by Apache; so > Test Port SO ► Use a port other than 80 I * H phpMyAdmin |W; Apache ■ — § It s PHP _ nr ► ► MySQL 64bit - Quick Adm tn Start All Services Stop All Services Restart All Services 13 I T r a n g "2 '3 cVirtualHost *:80> '4 ServerName 192.168.1.196 '5 DocumentRoot K:\dev\tailieuweb '6 '7 Options Hndexes +FollowSymLinks '8 AllowOverride All '9 Require all granted ;0 il +MultiViews li Bước 4, Khởi động lại wamp Powered by OtonwWB »*1 Localhost H phpMyAdmin A-.VW directory iQ Apache Õ PHP LI SQL 64bit - Qufek A Start All Services Jtop_.AH Services ^ “————— J b Test mobile Bước Dùng mobile vào ứng dụng browser Bước Nhập vào tìm kiếm tên địa ghi tệp hosts Ví dụ: 192.168.1.196 Bước Vào website kiểm thử 14 I T rang ... góp ý để báo cáo chúng em hoàn chỉnh Chuơng Nội dung thực tập 1.1 Mơ tả quy trình thực tập công việc thực tế noi thực tập 1.1.1 Quy trình thực tập Quy định thời gian: - Thời gian thực tập: tháng... MỞ ĐẦU Chương Nội dung thực tập 1.1 Mô tả quy trình thực tập cơng việc thực tế nơi thực tập 1 1.1.1 Quy trình thực tập 1.1.2 Cơng việc tìm hiểu thực tế 1.2 Nội dung báo cáo 1.2.1 Kiến trúc LESS... Trình bày học HSSV khọá thực tập: .Ị^ị Ạịln Điểm yếu HSSV thực tập: 4- • • -C^ỉ‘ ■ ■ ■ .Ặữa ttỉM : Điểm mạnh HSSV thực tập: .J c^ỳ Kết luận: Được báo cáo □ Không báo cáo Tổng số điểm HSSV