1. Trang Chủ
  2. Kỹ thuật lập trình
  3. Giáo trình Thiết kế và lập trình web (Nghề: Công nghệ thông tin - Cao đẳng): Phần 2 - Trường CĐ nghề Kỹ thuật Công nghệ

Giáo trình Thiết kế và lập trình web (Nghề: Công nghệ thông tin - Cao đẳng): Phần 2 - Trường CĐ nghề Kỹ thuật Công nghệ

(NB) Giáo trình Thiết kế và lập trình web với mục tiêu giúp các bạn có thể trình bày được quy trình xây dựng website cách cấu hình ứng dụng Web và triển khai một website; Trình bày được cấu trúc cơ bản của một trong các ngôn ngữ lập trình web (PHP, ASP.NET, JSP); Trình bày được các nội dung, các chức năng cơ bản cần xây dựng cho các ứng dụng web;...Mời các bạn cùng tham khảo nội dung phần 2 của giáo trình. BÀI 4: NGÔN NGỮ LẬP TRÌNH WEB Mã bài: MĐCNTT26-04 Mục tiêu: - Trình bày được cú pháp, cấu

Thể loại Tài liệu miễn phí Kỹ thuật lập trình

Số trang 63

Ngày tạo 4/5/2023 4:02:04 PM +00:00

Loại tệp PDF

Kích thước 2.53 M

Tên tệp

Tải Giáo trình Thiết kế và lập trình web (Nghề: Công n... (.pdf)

Xem mẫu

  1. BÀI 4: NGÔN NGỮ LẬP TRÌNH WEB Mã bài: MĐCNTT26-04 Mục tiêu: - Trình bày được cú pháp, cấu trúc cơ bản một ngôn ngữ lập trình web: PHP, JSP, ASP.NET - Thiết lập được môi trường làm việc để phát triển ứng dụng web theo ngôn ngữ lựa chọn - Sử dụng được ngôn ngữ lập trình Web để lập trình kết nối và xử lý dữ liệu phía Server (hiển thị, thêm, sửa, xóa dữ liệu…). - Sử dụng được Framework phát triển ứng dụng web phổ biến phù hợp với ngôn ngữ lập trình lựa chọn để xây dựng website theo yêu cầu. Nội dung chính: 1. Giới thiệu 1.1. Giới thiệu ngôn ngữ lập trình web + Ngôn ngữ lập trình PHP: - PHP viết tắt của PHP Hypertext Preprocessor : là ngôn ngữ server-side script, tương tự như ASP, JSP, … thực thi ở phía WebServer, tập tin PHP có phần mở rộng là .php, cú pháp ngôn ngữ giống ngôn ngữ C & Perl - PHP : Rasmus Lerdorf in 1994 (được phát triển để phát sinh các form đăng nhập sử dụng giao thức HTTP của Unix) - PHP 2 (1995) : Chuyển sang ngôn ngữ script xử lý trên server. Hỗ trợ CSDL, Upload File, khai báo biến, mảng, hàm đệ quy, câu điều kiện, biểu thức, … - PHP 3 (1998) : Hỗ trợ ODBC, đa hệ điều hành, giao thức email (SNMP, IMAP), bộ phân tích mã PHP (parser) của Zeev Suraski và Andi Gutmans - PHP 4 (2000) : Trợ thành một thành phần độc lập cho các webserver. Parse đổi tên thành Zend Engine. Bổ sung các tính năng bảo mật cho PHP - PHP 5 (2005) : Bổ sung Zend Engine II hỗ trợ lập trình HĐT, XML, SOAP cho Web Services, SQLite - Phiên bản mới nhất của PHP là version PHP 7.4 là phiên bản PHP mới nhất được phát hành ngày 28 tháng 11, 2019. Nó giờ đã sẵn sàng để dùng trên toàn bộ Hostinger serve (www.php.net) + Ưu điểm của PHP: PHP được sử dụng làm: - Server Side Scripting - CommandLine Scripting (cron – Linux, Task Scheduler – Windows, Text Processing) - Xây dựng ứng Desktop – PHP GTK Đa môi trường (Multi-Platform): - Web Servers: Apache, Microsoft IIS, Caudium, Netscape Enterprise Server - Hệ điều hành: UNIX (HP-UX, OpenBSD, Solaris, Linux), Mac OSX, Windows NT/98/2000/XP/2003/vista - Hệ QTCSDL: Adabas D, dBase,Empress, FilePro (read-only), Hyperwave, IBM DB2, Informix, Ingres, InterBase, FrontBase, mSQL, Direct MS-SQL, MySQL, 115
  2. ODBC, Oracle (OCI7 and OCI8), Ovrimos, PostgreSQL, SQLite, Solid, Sybase, Velocis,Unix dbm Miễn phí: PHP Software Free Platform Free (Linux) Development Tools Free (PHP Coder, jEdit, …) Được sử dụng rộng rãi trong môi trường phát triển web - 20,917,850 domains (chiếm hơn 32% tên miền website) - 1,224,183 IP addresses (04/2007 Netcraft Survey – http://www.php.net/usage.php) + Ngôn ngữ lập trình JSP: Là một ngôn ngữ lập trình Script giúp cho người lập trình có thể viết các đoạn mã Java nhúng trực tiếp trong trang HTML. JSP là sự lựa chọn thông minh cho các ứng dụng chạy trên cả Window và Unix Hình 4.1. Mô hình ứng dụng web với ngôn ngữ JPS Mô tả: Người sử dụng(Client) gửi một yêu cầu HTTP Request(bằng cách truy nhập vào một trang Web) lên Webserver. WebServer sẽ kiểm tra phần mở rộng của file và nếu là có phần mở rộng là .JSP, Webserver chuyển yêu cầu đến cho JSP container để dịch và chạy, sau đó gửi kết quả đến cho người sử dụng. Trong quá trình xử lý, JSP container có thể phải tương tác với các thành phần khác như Cơ sở dữ liệu 116
  3. (thông qua JDBC), các đối tượng Java(JavaBean). Để dịch và chạy được một trang JSP, Webserver cần được cấu hình hợp lý để nhận ra thư viện các lớp Java. Cấu trúc của một trang JSP có dạng như sau: Hello! The time is now Kết quả hiển thị: Hello! The time is now 04/05/2021 + Ngôn ngữ lập trình ASP.NET: Như chúng ta đã biết, ASP vẫn còn tồn đọng một số khó khăn như Code ASP và HTML lẫn lộn, điều này làm cho quá trình viết code khó khăn, thể hiện và trình bày code không trong sáng, hạn chế khả năng sử dụng lại code. Bên cạnh đó, khi triển khai cài đặt, do không được biên dịch trước nên dễ bị mất source code. Thêm vào đó, ASP không có hỗ trợ cache, không được biên dịch trước nên phần nào hạn chế về mặt tốc độ thực hiện. Quá trình xử lý Postback khó khăn, . Đầu năm 2002, Microsoft giới thiệu một kỹ thuật lập trình Web khá mới mẻ với tên gọi ban đầu là ASP+, tên chính thức sau này là ASP.Net. Với ASP.Net, không những không cần đòi hỏi bạn phải biết các tag HTML, thiết kế web, mà nó còn hỗ trợ mạnh lập trình hướng đối tượng trong quá trình xây dựng và phát triển ứng dụng Web. ASP.Net là kỹ thuật lập trình và phát triển ứng dụng web ở phía Server (Server- side) dựa trên nền tảng của Microsoft .Net Framework. Hầu hết, những người mới đến với lập trình web đều bắt đầu tìm hiểu những kỹ thuật ở phía Client (Client-side) như: HTML, Java Script, CSS (Cascading Style Sheets). Khi Web browser yêu cầu một trang web (trang web sử dụng kỹ thuật client-side), Web server tìm trang web mà Client yêu cầu, sau đó gởi về cho Client. Client nhận kết quả trả về từ Server và hiển thị lên màn hình. ASP.Net sử dụng kỹ thuật lập trình ở phía server thì hoàn toàn khác, mã lệnh ở phía server (ví dụ: mã lệnh trong trang ASP) sẽ được biên dịch và thi hành tại Web Server. Sau khi được Server đọc, biên dịch và thi hành, kết quả tự động được chuyển sang HTML/JavaScript/CSS và trả về cho Client. Tất cả các xử lý lệnh ASP.Net đều được thực hiện tại Server và do đó, gọi là kỹ thuật lập trình ở phía server. ASP.Net được Microsoft phát triển qua nhiều phiên bản từ ASP.Net 1.0 , 1.1, 2.0 và gần đây nhất là phiên bản ASP.Net 3.5 chạy trên .Net Framework 3.5 sử dụng môi trường phát triển tích hợp (IDE) Visual Studio.Net 2008 + Các ưu điểm của ASP.Net - ASP chỉ sử dụng VBScript và JavaScript mà không sử dụng được các ngôn ngữ mạnh khác : Visual Basic, C++... Trong khi đó ASP.NET cho phép viết nhiều ngôn ngữ : VBScriptJavaScript, C#, Visual Basic.Net,... - ASP.Net sử dụng phong cách lập trình mới: Code behide. Tách code riêng, giao diện riêng . Dễ đọc, dễ quản lý và bảo trì. - Trong các trang ASP chúng ta phải viết mã để kiểm tra dữ liệu nhập từ người dùng , 117
  4. ASP.NET hỗ trợ các validation controls để kiểm tra chúng ta không cần viết mã,... - Hỗ trợ phát triển Web được truy cập trên các thiết bị di động: PocketPC, Smartphone... - Hỗ trợ nhiều web server control . - Hỗ trợ thiết kế và xây dựng MasterPage lồng nhau. - Hỗ trợ bẫy lỗi (debug) JavaScript…… - Trang ASP.Net được biên dịch trước. Thay vì phải đọc và thông dịch mỗi khi trang web được yêu cầu, ASP.Net biên dịch những trang web động thành những tập tin DLL mà Server có thể thi hành nhanh chóng và hiệu quả. Yếu tố này làm gia tăng tốc độ thực thi so với kỹ thuật thông dịch của ASP. Hình 4.2. Mô phỏng thông dịch ASP 1.2. Cài đặt và thiết lập môi trường làm việc phát triển ứng dụng web Cơ chế hoạt động của WebServer 118
  5. Để chạy PHP chúng ta cần tải cài đặt các phần mềm sau: + Download PHP - Download PHP for free here: http://www.php.net/downloads.php + Download MySQL Database - Download MySQL for free here: http://www.mysql.com/downloads/index.html + Download Apache Server - Download Apache for free here: http://httpd.apache.org/download.cgi à Download WAMP,XAMPP Cài đặt xampp: Hiện nay XAMPP đã ra bản mới hơn hỗ trợ MariaDB nhưng bị lỗi rất nhiều, chúng ta nên dùng phiên bản XAMPP 1.8.3 Ở phần chọn đường dẫn, hãy chọn đường dẫn cần lưu cài đặt của XAMPP. Lưu ý rằng đường dẫn này phải nhớ vì khi cài đặt web lên localhost, phải truy cập vào thư mục này, nên để mặc định là c:\xampp. Tiếp tục ấn Next. 119
  6. Ở trang kế tiếp, bạn bỏ chọn phần “Learn more about Bitnami for XAMPP“. Và ấn Next 2 lần nữa để bắt đầu quá trình cài đặt XAMPP. Sau khi cài xong, ấn nút Finish để kết thúc cài đặt và mở bảng điều khiển của XAMPP. Tuy nhiên, hãy khởi động lại máy sau khi cài đặt xong để tránh tình trạng không khởi động được localhost. Khởi động Localhost Bây giờ hãy vào thư mục c:\xampp và mở file xampp-panel.exe lên để bật bảng điều khiển của XAMPP, để ý sẽ thấy hai ứng dụng Apache và MySQL có nút Start, đó là dấu hiệu bảo 2 ứng dụng này chưa được khởi động, hãy ấn vào nút Start của từng ứng dụng để khởi động Webserver Apache và MySQL Server lên thì mới chạy được localhost. Nếu cả hai ứng dụng chuyển sang màu xanh như hình dưới là đã khởi động thành công. 120
  7. Sau khi khởi động xong, bạn hãy truy cập vào website với địa chỉ là http://localhost sẽ thấy nó hiển thị ra trang giới thiệu XAMPP như hình dưới. Bạn có thể ấn vào nút English phía bên dưới để truy cập vào trang quản lý localhost. 2. Cấu trúc cú pháp và ngôn ngữ lập trình web 2.1. Các cấu trúc lệnh cơ bản Quy ước mã lệnh: Mã lệnh PHP được đặt trong các cặp thẻ sau : 121
  8. Thẻ mở Thẻ đóng + Tất cả các câu lệnh php đều cách nhau bởi dấu “;” + Không phân biệt khoảng trắng, Tab, xuống dòng trong câu lệnh + Ghi chú : Theo cú pháp ghi chú của C++ & Perl // Đây là ghi chú # Đây là ghi chú /* Đây là ghi chú nhiều dòng*/ Cú pháp các lện cơ bản: Khai báo biến: $ten_bien = value; 122
  9. § Không khai báo kiểu dữ liệu § Biến tự động được khởi tạo ở lần đầu tiên gán giá trị cho biến § Tên biến : – Có thể bao gồm các Ký tự (A..Z, a..z), Ký số (0..9), _, $ – Không được bắt dầu bằng ký số (0..9) – Phân biệt chữ hoa – chữ thường Ví dụ : $size $my_drink_size $_drinks $drink4you $$2hot4u $drink-size x § Variable variables – Cho phép thay đổi tên biến – Ví dụ: $varname = “my_variable”; $$varname = “xyz”; // $my_variable = “xyz” § Hằng số - Constants – Ví dụ: define(“MY_CONST”, 10); echo MY_CONST; Kiểu dữ liệu: § boolean (bool) § integer (int) § double (float, real) § string § array § object § Chuyển kiểu dữ liệu – Cách 1 (automatic) $var = "100" + 15; $var = "100" + 15.0; $var = 39 . " Steps"; – Cách 2: (datatype) $var – Cách 3: settype($var, “datatype”) $var (int)$var (bool)$var (string)$var null 0 false “” true 1 “1” false 0 “” “6 feet” 6 true “foo” 0 true Kiểm tra kiểu dữ liệu gettype is_string isset is_integer is_array unset 123
  10. is_double is_object empty Ví dụ: $var = "test"; if (isset($var)) echo "Variable is Set"; if (empty($var)) echo "Variable is Empty"; Một số hàm xử lý số abs pow decbin srand(seed) ceil sqrt bindec rand Floor log dechex rand(min, max) round log10 hexdec … Ví dụ // Generate a seed $seed = (float) microtime( ) * 100000000; // Seed the pseudo-random number generator srand($seed); // Generate some random numbers print rand(); // between 0 and getmaxrand( ) print rand(1, 6); // between 1 and 6 (inclusive) Kiểu chuỗi – string § Toán tử nối chuỗi : dấu chấm . $s = “Hello” . “ World”; // $s = “Hello World” § Phân biệt dấu nháy đơn và nháy kép $user = “Bill”; print ‘Hi $user’; // Hi $user print “Hi $user”; // Hi Bill print ‘Hi’ . $user; // ???? print ‘Hi’ . ‘$user’; // ???? § Một số hàm xử lý chuỗi – printf trim strtolower – str_pad str_replace strtoupper – strlen substr strcasecmp
  11. printf("The computer can operate between %+d and %+d degrees Celsius.", $min, $max); ?>
  12. § Một số hàm xử lý trên mảng – count is_array sort asort ksort usort – min array_reverse rsort arsort krsprt uasort – max uksort § Ví dụ: $dinner = array( 'Sweet Corn and Asparagus', 'Lemon Chicken', 'Braised Bamboo Fungus'); sort($dinner); print "I want $dinner[0] and $dinner[1]."; $dishes = count($dinner); print $dishes; § Một số hàm liên quan đến mảng – reset(array) – array_push(array, elements) : Thêm elements vào cuối mảng – array_pop(array) : Lấy phần tử cuối ra khỏi mảng – array_unshift(array, elements) : Thêm elements vào đầu mảng – array_shift(array) : Lấy phần tử đầu ra khỏi mảng – array_merge(array, array) : kết 2 mảng lại và trả ra mảng mới – shuffle(array) : Sort random mảng – sort(array, flag) : flag = {sort_regular, sort_numeric, sort_string, sort_locale_string} Cấu trúc điều khiển § Điều kiện if § Điều khiển switch § Vòng lặp for § Vòng lặp while § Vòng lặp do.. While 126
  13. § Vòng lặp foreach § Từ khóa break, continue § if (condition) { statement[s] if true } else (condition) { statement[s] if false } § Ví dụ: § $x = 5; § if ($x < 4) § echo “$x is less than 4”; § else § print ‘$x isn’t less than 4’; $x isn’t less than 4 Điều khiển switch: switch (expression) { case label : statementlist break; case label : statementlist break; ... default : statementlist } Ví dụ: $menu = 3; switch ($menu){ case 1: echo "You picked one"; break; case 2: echo "You picked two"; break; case 3: echo "You picked three"; case 4: echo "You picked four"; break; default: echo "You picked another option"; 127
  14. } Vòng lặp for: for ([initial expression]; [condition]; [update expression]) { statement[s] inside loop } § Ví dụ: print “”; for ($i = 1; $i
  15. { statements } Ví dụ: $meal = array('breakfast' => 'Walnut Bun', 'lunch' => 'Cashew Nuts and White Mushrooms', 'dinner' => 'Eggplant with Chili Sauce'); print "\n"; foreach ($meal as $key => $value) { print "$key$value\n"; } print ''; Hàm – function: function functionName ([parameter1]...[,parameterN]) { statement[s] ; } function functionName ([parameter1]...[,parameterN]) { statement[s] ; return ….. ; } Phạm vi biến: Tham trị vs Tham biến:
  16. echo "\$variable is: $variable"; ?> 2.2. Các sự kiện và xử lý sự kiện Sự kiện và xử lý sự kiện trong ASP.NET + Các Event trong chu trình sống của một Ứng dụng Web Các Tập tin trong một Ứng dụng Web Khi xây dựng một Ứng dụng Web: – Visual Studio .NET biên dịch tấtcả mã nguồn vào một file .DLL lưu trong thư mục/bin – Phần giao diện của ứng dụng nằm ở các file .aspx và .html Chu trình sống của một ứng dụng web – Bắt đầukhimột trình duyệtyêucầu 1 trang web từứng dụng, gọilàSession – Ứng dụng web vẫnchạynếunhư nó vẫn còn Session đang hoạt động – Chu trình sống của1 Web Form chỉ tồntại trong 1 khoảng thời gian ngắn – Người dùng tương tác vớigiaodiện web (gõ vào text box, đánh dấuchọn các check box…) cho đến khi kích hoạtmột sự kiện post-back (nhấn button …) – Dữ liệucủa trang (view state) đượcgửivề cho server – Khi server nhận được view state + Nó tạo ra thể hiệnmớicủaWeb Form + Điềndữ liệu vào view state + Xử lý các sự kiệnxảyra + Trả kết quả HTML về cho trình duyệt và hủy thể hiện củaWeb Form 130
  17. Chu trình sống kết thúc – Khi người dùng tắttrìnhduyệt, hoặcsaumộtkhoảng thời gian không refesh lại trang web thì Session củangười dùng kếtthúc – Nếu không còn Session nào từ người dùng thì ứng dụng web sẽ kết thúc + Lưu trữ dữ liệu trênmột Web Form Vì Web Form có chu trình sống rấtngắn nên ASP.NET có cơ chế đặcbiệt để lưutrữ dữ liệunhập vào trong các control của web form – Dữ liệunhập vào trong các control đượckhởitạo trong sự kiện Page_Init – Càc dữ liệu này sau đó được nạp lại vào control trong sự kiện Page_Load Application & Session Các biến trạng thái Application – Chia sẽ dự liệuchotấtcả người dùng củamột ứng dụng (dữ liệu toàn cụccho đangười dùng) Các biến trạng thái Session – Chia sẽ dữ liệu cho nhiều Web Form trong cùng một Session – Chỉ có session hiện hành có khả năng truy cập đếnbiếntrạng thái Session của chính nó protected void btnShow_Click(object sender, EventArgs e) { // Save the number of clicks in Session state. Session("Clicks") = Session("Clicks") + 1; // Display the number of clicks. Response.Write("Number of clicks: " + Session("Clicks")); } Sự kiện Application và Session 131
  18. Sự kiện Application và Session void Application_Start(object sender, EventArgs e) { ' Record application start. Application("AppCount") = Application("AppCount") + 1; } void Session_Start(object sender, EventArgs e) { ' Count sessions. Application("SessCount") = Application("SessCount") + 1; ' Display session count. Response.Write("Number of applications: " + Application("AppCount") +""); ' Display session count. Response.Write("Number of sessions: " + Application("SessCount") + ""); } void Session_End(object sender, EventArgs e) { ' Decrement sessions. Application("SessCount") = Application("SessCount") – 1; } void Application_Start(object sender, EventArgs e) { ' Record application start. Application("AppCount") = Application("AppCount") + 1; } void Session_Start(object sender, EventArgs e) { ' Count sessions. Session("SessCount") = Session("SessCount") + 1; ' Display session count. Response.Write("Number of applications: " + Session("AppCount") +""); ' Display session count. Response.Write("Number of sessions: " + Session("SessCount") + ""); } void Session_End(object sender, EventArgs e) { ' Decrement sessions. Application("SessCount") = Application("SessCount") – 1; } void Application_Start(object sender, EventArgs e) { ' Record application start. 132
  19. Session("AppCount") = Session("AppCount") + 1; } void Session_Start(object sender, EventArgs e) { ' Count sessions. Session("SessCount") = Session("SessCount") + 1; ' Display session count. Response.Write("Number of applications: " + Session("AppCount") +""); ' Display session count. Response.Write("Number of sessions: " + Session("SessCount") + ""); } void Session_End(object sender, EventArgs e) { ' Decrement sessions. Session("SessCount") = Session("SessCount") – 1; } Page Event Server Control Event Post-back event – Bắt Web page gửivề lại cho server để xử lý ngay lập tức. Validation event – Xử lý trên trang mà không cầnsự kiện post-back Server Control Event Post-back event Button, Link Button, Image Button TextBox, DropDownList, ListBox, - RadioButton, CheckBox - Có thể thiếtlậpsự kiện Post-back 133
  20. cho các control này bằng cách gán thuộc tính AutoPostBack=True Validation event Validation server controls Sự kiện và xử lý sự kiện trong JavaScript Các chương trình JavaScript thường là hướng sự kiện. Các hành động xảy ra trên trang web tác động đến các phần tử HTML. Một sự kiện có thể do người dùng tạo ra hoặc do hệ thống tạo ra. Hầu hết các trình duyệt đều hỗ trợ một đối tượng Event. Mỗi sự kiện có một đối tượng Event tương ứng. Đối tượng Event cung cấp thông tin, loại sự kiện và vị trí của con trỏ tại thời điểm xảy ra . Ví dụ : Khi click chuột vào buttton. Khi load lại một trang web. Nhập thông tin vào trường Input. Thao tác với form HTML. Thao tác với con trỏ chuột tới phần tử hay vị trị nào đó. Các sự kiện trong JavaScript Các sự kiện thông thường mà JavaScript hỗ trợ. – onClick : Được tạo ra bất cứ khi nào người dùng nhấp chuột vào button hoặc các phần tử form hoặc lên các liên kết. function myFunction(){ alert("Xin chào các bạn"); } – onLoad : Được phát sinh khi đã tải xong tài liệu. Nó cũng được phát sinh khi một ảnh đã tải xong. function LoadImage(){ alert("Load Thành Công!!!"); } 134
nguon tai.lieu . vn
Tin học văn phòng Đồ họa - Thiết kế - Flash Quản trị Web Cơ sở dữ liệu Quản trị mạng Kỹ thuật lập trình Hệ điều hành Phần cứng An ninh - Bảo mật Chứng chỉ quốc tế Thủ thuật máy tính Điện - Điện tử Kinh tế học Hoá học Xã hội học Môi trường