%*,ẩ2'&9ơ ơ272 ,+&ơ11* -X W - +ẽ$/81771*+, 1*ơ1+&1+ặ1&é1*1*+7 7ơ, 0Ҥ1*;+Ӝ,&+,$6Ҿ ѬӞ&0Ѫ 3+È775,ӆ17+¬1+3+ӔĈ¬ Sinh Viên : 3+Ҥ048Ӕ&+8< CBHD : PGS.TS /ầ9161 /S : 10CNTT3 (2010-2014) ơ11* THNG 5/2014 -1- LI CҦ0Ѫ1 7{L[LQFKkQWKjQKFҧPѫQ.KRD7LQ KӑF 7UѭӡQJĈҥLKӑF6ѭ ÿmWҥRÿLӅXNLӋQFKR7{LWKӵFKLӋQNKyD Tôi FKkQWKjQKFҧPѫQ7Kҫ\/r9ăQ6ѫQ WURQJVXӕWWKӡLJLDQOjPNKyDOXұQ 7{LFNJQJ[LQFҧPѫQTXê7Kҫ\&{WURQ KJLҧQJGҥ\Y EӏFKR HPQKӳQJNLӃQWKӭFFҫQWKLӃWWURQJV 7{L[LQJӣL OzQJELӃWѫQVkXVҳFÿӃQJLDÿu FiFEҥQEqÿmӫQ ÿӝQJYLrQ7{LWURQJVXӕWTXiWUuQKKӑF NKăQWKӱWKiFK 0һFGÿmUҩWFӕJҳQJKRjQWKjQKNK QKѭQJFKҳFFKҳQNKyDOXұQNK{QJWUiQK VӵWK{QJFҧPFKӍEҧRFӫDTXê7Kҫ\&{Y 0ӝWOҫQQӳDW{L[LQFKkQWKjQKFҧPѫQ Sinh viên 3KҥP4XӕF Huy -2- LӠ,&$0Ĉ2$1 Tôi [LQFDPÿRDQ - 1KӳQJ QӝLOXұQ GXQJYăQ WURQJ Qj\ Oj GR W{L KRjQ KLӋQ - 0ӑLWKDPNKҧRGQJWURQJOXұQYăQÿӅX F{QJWUuQKWKӡLJLDQÿӏDÿLӇPF{QJEӕ - 0ӑLVDRFKpSNK{QJKӧSOӋYL SKҥPTX\FKӃÿjRWҥRKD FKӏX KRjQWRjQWUiFKQKLӋP Sinh viên 3KҥP4XӕF Huy -3- 0Ө&/Ө& /Ӡ,&Ҧ0Ѫ1 /Ӡ,&$0Ĉ2$1 '$1+6È&++Ỵ1+Ҧ NH '$1+6È&+%Ҧ1*%,ӆ8 0ӢĈҪ8 &+ѬѪ1*7Ә1*48$19ӄ0Ҥ1*;+Ӝ, 12 0ҥQJ[mKӝL 12 *LӟLWKLӋXPҥQJ[mKӝL 12 /ӏFKVӱPҥQJ[mKӝL 13 &ҩXWKjQKPҥQJ[mKӝL 14 0ҥQJ[mKӝLWUrQWKӃJLӟL 14 0ҥQJ[mKӝLYӟLQJѭӡLGkQWUrQWK 14 0ҥQJ[mKӝLYӟLWXәLWHHQ 16 0ҥQJ[mKӝLҧQKKѭӟQJÿӃQWuQKKu 20 0ҥQJ[mKӝLWҥL9LӋW1DP 22 *LӟLWKLӋXPҥQJ[mKӝLWҥL9LӋW1 22 &iFZHEVLWHPҥQJ[mKӝLWKXҫQ9LӋ 22 ѬXÿLӇPPҥQJ[mKӝLWҥL9LӋW1DP 28 1.4 3KѭѫQJWKӭFWKXK~WQJѭӡLGkQWKDPJLD mKӝL 30 &+ѬѪ1*1ӄ17Ҧ1*&Ð1*1*+ӊ 31 2.1 HTML5 31 *LӟLWKLӋXYӅ+70/ 31 .KҧQăQJWѭѫQJWKtFKFӫD+70/ 36 &ҩXWU~FFѫEҧQFӫDILOH+70/ 37 2.2 CSS3 38 *LӟLWKLӋX&66 38 &ҩXWU~F&66 39 6ѫOѭӧF&66 39 2.3 JavaScript 42 /ӏFKVӱSKiWWULӇQ 42 *LӟLWKLӋX-DYD6FULSW 43 -4- 2.3.3 Cách nhúng JavaScript vào trang web 44 2.4 jQuery 46 *LӟLWKLӋ XYӅM4XHU\ 46 2.4.2 jQuery 46 2.5 PHP 49 2.6 MYSQL 49 &+ѬѪ1* 0Ҥ1*;+Ӝ,&+,$6ҾѬӞ&0Ѫ 3+È775,ӆ17+¬1+3+ӔĈ¬1Ҹ1* 50 &ѫVӣGӳOLӋX 50 3.1.1 M{KuQKWKӵFWKӇOLrQNӃWTXDQKӋ 50 0{KuQKFKLWLӃWFiFWKӵFWKӇ 50 ;k\GӵQJELӇXÿӗ8VH&DVH 58 %LӇXÿӗXVHFDVHWәQJTXiW 58 3KkQUmELӇXÿӗ8VH&DVH 59 *LDRGLӋQYjWtQKQăQJ 60 7UDQJFKӫ 60 3.3.2 Trang êWѭӣQJFKLDVҿ 61 7UDQJGRDQKQJKLӋSKӛWUӧ 61 7UDQJҧQKWKjQKSKӕ 62 7UDQJWҥRVӵNLӋQ 63 7UDQJÿăQJNtWKjQKYLrQ 64 7UDQJQӝLGXQJVӵNLӋQ 65 7UDQJFKӫTXҧQWUӏ 66 7UDQJTXҧQWUӏêWѭӣQJ 67 7UDQJTXҧQWUӏKuQKҧQK 68 7UDQJTXҧQWUӏVӵNLӋQ 69 1KӳQJWtQKQăQJNKiF 69 ӂ7/8Ұ1 71 7¬,/,ӊ87+$0.+Ҧ2 72 é.,ӂ1&Ӫ$ &È1%Ӝ+ѬӞ1*'Ү1 73 1+Ұ1;e7&Ӫ$+Ӝ,ĈӖ1*3+Ҧ1%,ӊ1 74 -5- DANH SÁCH HÌNH Ҧ1+ 6ӕKLӋXKuQKҧQK 7rQKuQKҧQK Trang Hình ĈӗthӏbiӇ u diӉ n cҩ XWU~FÿѫQJL ҧ n mҥ ng xã hӝ i Hình &ҩXWU~FFѫEҧQKWPO 36 Hình &ҩXWU~FFӫD&66 38 Hình Border-radius 39 Hình Gradient 40 Hình Box-shawdow 41 Hình 0{KuQKWKӵFWKӇOLrQNӃWTXD 49 Hình %LӇXÿӗXVHFDVHWәQJTXiW 57 Hình 3KkQUmXVHFDVH0өFÿăQJêW 58 Hình 10 3KkQUmXVHFDVH&KӭFQăQJWK 58 Hình 11 3KkQUmXVHFDVH&KӭFQăQJEu 58 Hình 12 7UDQJFKӫ Hình 13 7UDQJêWѭӣQJFKLDVҿ 60 Hình 14 7UDQJQKjÿҫXWѭ 60 Hình 15 7UDQJҧQKWKjQKSKӕ 61 Hình 16 7UDQJÿăQJêWѭӣQJ 61 Hình 17 7UDQJWҥRVӵNLӋQ 62 11 59 -6- Hình 18 7UDQJÿăQJNtWKjQKYLrQ 62 Hình 19 7UDQJQӝLGXQJVӵNLӋQ64 Hình 20 Trang FKӫ$GPLQ Hình 21 7UDQJTXҧQWUӏêWѭӣQJ66 Hình 22 7UDQJTXҧQWUӏ%uQKOXұQ 66 Hình 23 7UDQJTXҧQWUӏKuQKҧQK 67 Hình 24 7UDQJTXҧQWUӏ VӵNLӋQ 68 Hình 25 1ӝLGXQJEuQKOXұQ 68 Hình 26 1ӝLGXQJSKiWWULӇQ 69 65 -7- D$1+6È&+%Ҧ1*%,ӆ8 6ӕKLӋX EҧQJ 7rQEҧQJ Trang %ҧQJ 0{KuQKWKӵFWKӇêWѭӣQJ 51 %ҧQJ 0{KuQKWKӵFWKӇQJѭӡLGQJ 52 %ҧQJ 0{KuQKWKӵFWKӇEuQKOXұQ 53 %ҧQJ 0{KuQKWKӵFWKӇF{QJW\KӛW 53 %ҧQJ 0{KuQKWKӵFWKӇKuQKҧQKWKj 54 %ҧQJ 0{KuQKWKӵFWKӇSKiW WULӇQ 54 %ҧQJ 0{KuQKWKӵFWKӇWKӇORҥLêW 55 %ҧQJ 0{KuQKWKӵFWKӇ9RWHVEuQKO 55 %ҧQJ 0{KuQKWKӵFWKӇ9RWHVSKiWW 55 %ҧQJ0{KuQKWKӵFWKӇ9RWHVWӕFiR 56 %ҧQJ0{KuQKWKӵFWKӇ9RWHVWӕFiR 56 %ҧQJ0{KuQKWKӵFWKӇ9RWHVWӕFiR 57 %ҧQJ0{KuQKWKӵFWKӇ9RWHVêWѭӣQ 57 -8- 0ӢĈҪ8 /êGRFKӑQÿӅWjL 9jR QKӳQJ QăP ÿҫX WKұS QLrQ WҥL OzQJYӅYLӋFTXҧQOêWKjQKSKӕWKHRWL iLJuFyWLӅQOӋPӟ TX\ӅQPXӕQOjPÿLӅXJuÿyFKѭDWӯQJFy WKDP JLD [k\ Ӄ KRҥFK GӵQJ OұS SKiW N WULӇQ *LIX ³ UD ÿӡL 9ұ\ FKtQK TX\ӅQ [k\ GӵQJ NKRҧQJ ÿy YjR ÿӏD GӏSÿ WXҫQQJѭӡLGkQFyWKӇWKӓDPiLPDQJU PӝWWtYjEjQYӅQKӳQJѭӟFPѫJL~SFKR EҧQѭӟFPѫVDXÿyQJѭӡLGkQEӓSKLӃX ÿѭ ӧF5ӗLEҧQÿӗѭӟFPѫÿѭӧFYӁOrQQJ QKӳQJѭӟFPѫÿѭӧFFKӑQ*LIXEҳWÿҫXWU QKӳQJ ѭӟF Pѫ WѭӣQJ QKѭ YLӉQ YRQJ ÿm WU WK{QJ WUrQ 1KұW WRjQ Oj QѭӟF JLӕQJ QJѭӡLQKDX GkQ *LIX EҧR WӍ QJKLӋSWҥLVDRNK{QJOjPFӝWÿqQEҵQJJ QyQJLPOuPWURQJQ~LÿѭӧFNKDLWKiFW PѫYӅPi\WtQKYjF{QJQJKӋWK{ QJWLQÿmÿѭӧFYӁOrQYj [k\GӵQJNKXF{QJQJKӋSKҫQPӅP&ӭQKѭ EҳWÿҫXWKӡLNǤPӟL ĈyOjFkXFKX\ӋQYӅ*LIXӣQKӳQJQăP F{QJQJKӋWK{QJWLQFKѭDSKiWWULӇ QӢWKӡLÿLӇPKLӋQWҥL WK{QJ WLQ QKӳQJ WKLӃW Eӏ WK{QJ PLQK ÿ VPDUWSKRQHVPDUW79VPDUWWDEOHFQJ WѭѫQJWiFNӃWQӕLJLӳDFRQQJѭӡLYӟLFR UӣQrQFӵFNǤÿѫQJ 4XDÿy PXӕQSKiWWULӇQGӵiQ´Ĉj1ҹQJ ±WKjQKSKӕѭӟFPѫ P{KuQKPҥQJ[mKӝL[k\GӵQJPӝWQѫLÿӇ FyWKӇFKLDVҿQKӳQJѭӟFPѫYӅWKjQKSK EjQEҥFYӅQKӳQ ÿѭ ӧFFKLD Vҿ EuQK FKӑQ UD QKӳQJ ѭӟF Pѫ -9- WKjQKSKӕQJj\FjQJWӕWÿҽSKѫQ 0өFÿtFKQJKLrQFӭX 0өF ÿtFK QJKLrQ FӭX FӫD ÿӅ WjL Oj W QJѭӡLGkQFyWKӇÿѭӧFWKӇKLӋQêWѭӣQJ ӝLWLӃS[~FYӟL Wѭ 7ҥRFѫKӝLÿӇPӑLQJѭӡLWULӇQNKDLG OjQѫLÿӇPӑLQJѭӡLFyWKӇWKӓDVӭFWK KLӋQUDQKӳQJêWѭӣQJÿӝFÿiRFyWtQK WKӵFKyDPDQ JLiWUӏFKRFӝQJÿӗQJ 3KѭѫQJSKiS YjSKҥPYL QJKLrQFӭX 1JKLrQ FӭX QKX FҫX Vӱ GөQJ PҥQJ dân [m WKjQKSKӕĈj1ҹQJ 1JKLrQFӭXFiF SKѭѫQJ WKӭFWKXK~WQJѭӡLGkQWKD 1JKLrQFӭX[k\ [mKӝLYjSKiWWULӇQQK GӵQJ PҥQJ KӧSQӝLGXQJÿӅWjL 1JKLrQFͱX[k\GQJP̩QJ[mK͡L 9LӋF [k\ GӵQJ PҥQJ [m KӝL SK KӧS Y ÿѭӧFÿ{QJÿҧRQJѭӡLGkQWKDPJLDSKҧL - 0ҥQJ[mKӝLSKҧLFyFKӭ FQăQJÿăQJQKұSWӯWjLNKR OӟQNKiFQKѭ)DFHERRN7ZLWWHU*RRJOH VӱGөQJPҥQJ[mKӝLWKDPJLD - *LDRGLӋQÿѭӧFWKLӃWNӃGӉVӱGөQJ KӑFVLQKWLӇXKӑFK RһFPӝWFөJLjWXәLFyWKӇF - ĈҧPEҧRÿѭӧFVӕOѭӧQJWUX\FұSOӟQ YăQEҧQZHE K!Ĉk\OjKHDGLQJ WLrXÿ Ӆ S!Ĉk\OjSDUDJUDSK YăQE ҧ n /ҩ\YtGөOjQKӳQJWDJ+70/WUrQFK EҧQ PjNK{QJFyEҩW NǤ WtQKQăQJQjRF QKѭWKrPPjXVҳFWKD\ÿәLIRQWFKӳFӥ Ӣ+70/WDJVFyNKҧQăQJÿӏQK GҥQJQKѭIRQW!ÿmÿѭ QKLrQQyYүQFKѭDÿӫPҥQKÿӇJLҧLTX\Ӄ WUu FiF ZHEVLWH OӟQ WUӣ QrQ QӛL iF PӝQ ZHESDJHKӑOҥLSKҧLDGGWDJIRQWYjWK ӃQFKRWKӡLJLDQ IRUPDWWUDQJZHEUҩWOkXYjWӕQNpP -39- &KtQKYuWKӃ:RUOG:LGH:HE&RQVRUW YҩQÿӅQj\ 2.2&̭XWU~F&66 &66FySKҫQFKtQKOjVHOHFWRUYjGHFO +uQK &̭XWU~FFͯD&66 0ӝWÿӏQK QJKƭDWURQJ&66FyWKӇFyQKLӅXVHO Ɣ 0ӛLGHFODUDWLRQEDRJӗPSURSHUW\YjY 9tGөFRORUEOXH Ɣ 6HOHFWRUFiFKQKDXEӣLGҩXSKҭ\ SKҭ\ 9tGө h1, h2, h3 {color:blue;text-align:left;} Ɣ 6HOHFWRU SKkQ ELӋW YӟL GHFODWLRQ EӣL here } 9tGө p { color: blue; } 2.2.36˯O˱ͫF&66 2.2.3.KiLQLӋP &66FXQJFҩSUҩWQKLӅXFiFKWKӭFPӟL cho WKLӃWNӃFӫD QJѭӡLGQJ , vӟLPӝWYjLWKD\ÿәLTXDQWUӑ -40- 2.2.30ӝWVӕWtQKQăQJPӟLFӫD&66 Ɣ Border-radius Ky YұQ GөQJ ÿӇ OjP &66 ÿѭӧF ER JyF Ĉm Fy Q SKҧL Oj WӕW QKҩW 5ҩW GӉ NKL OjP ng choYLӋF WӯQJJyFYjGӉGjQJWKD\ÿәLWK{QJVӕ 9tGө&66 border_rounded { background-color: #ddccb5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #897048; padding: 10px; width: 310px; } Hình Border-radius Ɣ Gradient -41- *UDGLHQWERUGHUFy WKӇWҥRUDQKӳQJ WKұQĈRҥQPmGѭӟLÿk\JL~S QJѭӡLGQJ FKӑQPjXVҳFFKRJUDGL Ví du CSS: border_gradient { border: 8px solid #000; -moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2; -moz-border-top-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2; -moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2; -moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2; padding: 5px 5px 5px 15px; width: 300px; } Hình Gradient -42- Ɣ Box-shadow 7KrPEyQJFKRQKӳQJWKjQKSKҫQOjUҩ VӵNKiFELӋWFKRQKӳQJYQJFKtQKWU rQZHEVLWHWX\ QKLrQJ ӭQJNKiFQySKҧLÿѭӧFVӱGөQJYӟLVӵF 9tGө border_shadow { -webkit-box-shadow: 10px 10px 5px #888; padding: 5px 5px 5px 15px; width: 300px; } Hình Box-shawdow 2.3 JavaScript 2.3.1 /͓FKV͵SKiWWUL͋Q &QJ WKӡL ÿLӇP 1HWVFDSH EҳW ÿҫX Vӱ 1HWVFDSH/LYH6FULSWÿmÿѭӧFÿәLWrQW QJӳOұSWUuQK-DYDO~FÿyÿDQJÿѭӧFFRL YjRWUuQKGX\ӋW1HWV FDSHEҳWÿҫXWӯSKLrQEҧQE -43- QăP7UrQWKӵFWӃKDLQJ{QQJ TXDQJuÿӃQQKDXQJRҥLWUӯYLӋFF~SK GӵDWUrQF~SKiSFӫD&-DYD 6FULSWJӗPPҧQJOjFOLHQW -VHUYHUWKӵFKLӋ Pi\FӫDHQG -user web-server 2.3.2 *LͣLWKL͏X JavaScript -DYD6FULSW LV Oj QJ{Q QJӳ GҥQJ VF WUuQKZHEӣSKtDFOLHQW1yWXkQWKHRF Nó QJ{QQJӳOLQKÿӝQJF~SKiSGӉV GӉGjQJOұSWUuQK-DYD6FULSWNK{QJKӅ KҫX KӃW FiF WUuQK GX\ӋW QJj\ QD\ QJѭӡL Kӛ WU dùng VӁWUӣQrQY{FQJVLQKÿӝQJP DQJWtQKWUӵFTXDQYjWѭ -DYD6FULSWWKHRSKLrQEҧQKLӋQKjQK WUrQÿӕLWѭӧQJÿѭӧFSKiWWULӇQWӯFiFê UӝQJUmLFKRFiF WUDQJ ZHEQKѭQJFNJQJ ăQJYLӃWVFU GөQJ FiF ÿӕL WѭӧQJ QҵP VҹQ WURQJ FiF %UHQGDQ(LFKWҥL+mQJWUX\ӅQWK{QJ1HWV ÿәLWrQWKjQK/LYH6FULSWYjFXӕLFQJ có F~SKiSWѭѫQJWӵ&QKѭQJQyJҫQYӟL6 ÿѭӧFGQJFKRWұSWLQPmQJXӗQ-DYD6FUL 3KLrQEҧQPӟLQKҩWFӫD-DYD6FULSWOj - EҧQ(&0$6FULSWOjSKLrQEҧQFKXҭ 7UuQKGX\ӋW0 SKLrQ EҧQ EHWD Fy±Kӛ SKҫQ WUӧ Pӣ NK{QJ UӝQJ -DYD6FULSWKӛWUӧOjPYLӋFYӟL;0/ÿѭӧ -357 -44- -DYD6FULSWOjPӝWQJ{QQJӳOұSWUuQK WULӇQWӯ&*LӕQJQKѭ& -DYD6FULSWFyNKiLQLӋPWӯ NK{QJ WKӇ ÿѭӧF Pӣ UӝQJ &NJQJ JLӕQJ QK [XҩWQKұS LQSXWRXWSXW ULrQJ 7URQJ -DYD6FULSWGӵDYjRSKҫQPӅPQJ{QQJӳÿѭ YjRÿӇWKӵFKLӋQ[ 7UrQ WUuQK GX\ӋW UҩW QKLӅX WUDQJ Z ZHEÿӝQJYjPӝWVӕKLӋXӭQJKuQKҧQKW WKӵF KLӋQ PӝW Vӕ WiF Yө NK{QJ WKӇ WKӵ th{QJWLQQKұSYjRWӵÿӝQJWKD\ÿәLKuQ ӭQJ GөQJ ÿӇ OjP Eӝ J} WLӃQJ 9LӋW JLӕQJ :LNLSHGLDWLӃQJ9LӋW7X\QKLrQPӛLW không tuân theo chuҭQ:&'20GRÿyWURQJUҩWQK SKҧL YLӃW QKLӅX SKLrQ EҧQ FӫD FQJ PӝW QKLӅXWUuQKGX\ӋW0ӝWVӕF{QJQJKӋQәL EDRJӗP'+70/$MD[Yj63$ Bên WUuQKGX\ӋW-DYD6FULSWFyWKӇ $GREH$FUREDWYj$GREH5HDGHUĈLӅXNKL ;SKLrQEҧQFNJQJFyVӱGөQJ-DYD6F VFULSWLQJ FӫD WUӧ 0LFURVRIW QJ{Q QJӳ Fy -VFULSW Kӛ OjP GQJ FKR KӋ ÿLӅX KjQK -VFULSW 1(7 Oj JLӕQJ-VFULSWQKѭQJFyWKrPQKLӅXWtQK 0ӛLӭQJGөQJQj\ÿӅXFXQJFҩSP{KuQ SWѭѫQJW YӟL P{L WUѭӡQJ FKӫ YӟL SKҫQ O}L Oj QJ 2.3.3 Cách nhúng JavaScript vào trang web 2.36ӱGөQJFһSWKҿVFULSW! -45- 6FULSW ÿѭӧF ÿѭD YjR ILOH +70/ EҵQJ &iFWKҿVFULSW!FyWKӇ[XҩWKLӋQ +70/1ӃXÿһWWURQJSKҫQKHDG!QyVӁ OҥL FӫD YăQ EҧQ ÿѭӧF WҧL 7KXӝF WtQK G VFULSW! Oj QJ ³ODQJXDJH ÿӇ [iF´ ÿӏQK G QJ{Q QJӳ V FKѭѫQJWUuQKYLӃWEҵQJ-DYD6FULSW QJѭӡLGQJ VӱGөQJF~SKiSVDX VFULSWODQJXDJH ´-DYD6FULSW´! // Chèn nӝi dung script ӣÿk\ 2.36͵ GͭQJFiFILOHQJX͛Q-DYD6FULSW 7KXӝF WtQK VUF cho FӫD phép QJѭӡL WKҿFKӍ VFULSW! GQJ U} ILOH -DYD6FULSWÿѭӧFVӱGөQJGQJSKѭѫQJSK OӋQK-DYD6FULSWYjRWUDQJ+70/ Cú pháp: VFULSWODQJXDJH ´-DYD6FULSW´VUF ´ 9ӟLILOHBQDPHMVOjILOHFKӭDQӝLGX script, ý là: file js NK{QJFKӭDFһSVFULSW!YjVFULSW!Y ILOHBQDPHMVVӁFyQӝLGXQJQKѭVDX -46- JavaScript