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 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.

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,

ODBC, Oracle (OCI7 and OCI8), Ovrimos, PostgreSQL, SQLite, Solid, Sybase, Velocis,Unix dbm

Miễn phí:

PHP

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

(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:

Đầ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 ,

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

Để 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

Ở 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

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 :

Thẻ mở Thẻ đóng

<script language="php"> <script>

+ 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

<?php print "Hello"; print " World!"; ?>

§ 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

Kiểm tra kiểu dữ liệu

is_double is_object empty

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 $userprint “Hi $user”; // Hi Billprint ‘Hi’ $user; // ????

print ‘Hi’ ‘$user’; // ????

§ Một số hàm xử lý chuỗi

printf("The computer can operate between %+d and %+d degrees Celsius.", $min, $max);

?>

<?

echo “<pre>”

// Print a heading

echo str_pad(“Dramatis Personae", 50, " ", STR_PAD_BOTH) “\n";

// Print an index line

echo str_pad(“DUNCAN, king of Scotland”, 30, ".")

str_pad(“Larry”, 20, ".", STR_PAD_LEFT) “\n";

§ Một số hàm xử lý trên mảng

$dinner = array( 'Sweet Corn and Asparagus',

'Lemon Chicken','Braised Bamboo Fungus');

$x isn’t less than 4

Điều khiển switch:

statements

}

Ví dụ:

$meal = array('breakfast' => 'Walnut Bun',

'lunch' => 'Cashew Nuts and White Mushrooms', 'dinner' => 'Eggplant with Chili Sauce');

print "<table border=‘1’>\n";

foreach ($meal as $key => $value) {

print "<tr><td>$key</td><td>$value</td></tr>\n";}

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ưutrong 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,

– 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

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ườidù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

Sự kiện Application và Session

void Application_Start(object sender, EventArgs e) {

' Record application start.

' Display session count.

Response.Write("Number of applications: " + Application("AppCount") +"<br>"); ' Display session count.

Response.Write("Number of sessions: " + Application("SessCount") + "<br>"); }

void Session_End(object sender, EventArgs e) {

' Decrement sessions.

Application("SessCount") = Application("SessCount") – 1;

}

void Application_Start(object sender, EventArgs e) {

' Record application start.

' Display session count.

Response.Write("Number of applications: " + Session("AppCount") +"<br>"); ' Display session count.

Response.Write("Number of sessions: " + Session("SessCount") + "<br>");

void Application_Start(object sender, EventArgs e) {

' Record application start.

' Display session count.

Response.Write("Number of applications: " + Session("AppCount") +"<br>"); ' Display session count.

Response.Write("Number of sessions: " + Session("SessCount") + "<br>"); }

void Session_End(object sender, EventArgs e) {

– 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

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êntrang 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 đốitượ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 contrỏ 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");

}

<input type = "button" value = "Click Here" onClick = "myFunction()">

– 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

– onUnload : Xảy ra khi người dùng điều hướng khỏi trang (bằng cách nhấp vào liên kết,gửi biểu mẫu, đóng cửa sổ trình duyệt, vv)

Sự kiện form

Chúng ta cùng đi tìm hiểu : onChange, onFocus, onSubmit, onSelect, onBlur, onReset

Các sự kiện onFocus, onBlur và onChange thường được sử dụng để kiểm tra dữliệu nhập của các điều khiển trên form

– onChange : Xảy ra khi giá trị của thành phần được chọn thay đổi

sự kiện onChange cũng được kích hoạt

Ví dụ: Ta thay đổi màu nền bằng cách focus đến ô text nó sẽ chuyển thành màu vàng, dichuyển ra khỏi ô text sẽ chuyển thành đỏ

<form>

Click: <input type="text" id="Input" onfocus="document.bgColor='yellow'"

onblur="document.bgColor='red'">

</form>

– onSubmit : Được sử dụng để kiểm tra tất cả các điều khiển trong form trước khi gửi đi.

<form action="submit" method="post" onsubmit="myFunction()">

Tên: <input type="text" name="name">

<input type="submit" value="Submit">

</form>

<script>

resource mysql_connect(string host, string LoginName, string password)

int mysql_select_db(string dbName, resource connection)

Ngắt kết nối dữ liệu

bool mysql_close(resource connection) ;

Tự động thực thi khi kết thúc mã lệnh nhờ cơ chế tự động thu rác (garbage collector) –PHP4,5

Tổng hợp các bước thao tác CSDL MySQL

<?php

// 1 Ket noi CSDL

$connection = mysql_connect(“hostname",“username",“password");

mysql_select_db(“database_name", $connection);

// 2 Chuan bi cau truy van & 3 Thuc thi cau truy van

$strSQL = "SELECT * FROM TableName”;

$result = mysql_query($strSQL);

// 4.Xu ly du lieu tra ve

while ($row = mysql_fetch_array($result))

3.2 Các xử lý dữ liệu cơ bản: hiển thị, thêm, sửa, xóa, tìm kiếm, thống kê…

Thêm mẫu tin

Để thêm mẫu tin, sử dung hàm mysql_query(chuoi Insert) Chẳng hạn, chúng ta khai báotrang insert.php để thêm mẫu tin vào bảng tblships có hai cột dữ liêu là ShipID và

ShipName như ví du trong trang insert.php

Trong đó, sử dụng hàm mysql_query với 2 tham số là $sql va $link Kết qủa trả về là

số mẫu tin thực thi Ngoai ra, có thể sử dụng đoạn kết nối cơ sở dữ liệu trong tập tin dbcon.php như ví du sau:

<?php

$link = mysql_connect ("localhost", "root", "")

or die ("Could not connect to MySQL Database"); mysql_select_db("Test", $link);

?>

Kết quả như sau:

Cập nhật mẫu tin:

Đối với trường hợp cập nhật mẫu tin, sử dụng hàm mysql_query với Update thay vì Insertnhư trên, ví du ta khái báo trang update.php để cập nhật mẫu tin trong bảng tblShips vớitên là Update Testing khi mà có giá trị là A01

Xóa mẫu tin

Tương tự như vậy khi xóa mẩu tin, chỉ thay đổi phát biểu SQL đang Delete như ví dutrong tập tin delete.php

4 Framework hỗ trợ phát riển ứng dụng web

- NET Framework là nền tảng cho Microsoft.NET Platform

- NET Framework là môi trường cho việc xây dựng, triển khai và vận hành các ứng dụngWeb cũng như Web Service

- NET Framework chứa Common Language Runtime (CLR) và các lớp thư viện cung cấpcác dịchvụ cơ sở để xây dựng các ứng dụng

- NET Framework giúp đơn giản hóa quá trình phát triển cũng như tích hợp sản phẩm

- NET Framework không phụ thuộc vào ngôn ngữ Cácngônngữđang đượchỗ trợ : C++,

C#, VB.NET, Jscript

Bài tập thực hành của học sinh, sinh viên:

Bài 1: Sử dụng dấu * để vẽ tam giác trong PHP, đây là một trong những bài cơ bản nhất

Code mẫu: sử dụng vòng lặp for

// sử dụng vòng lặp for - vẽ tam giác trong PHP,

// mỗi dấu * là một đơn vị

if (isset ( $_POST ['heso_a'] )) {

$heso_a = $_POST ['heso_a'];

}

if (isset ( $_POST ['heso_b'] )) {

$heso_b = $_POST ['heso_b'];

}

if (isset ( $_POST ['heso_c'] )) {

$heso_c = $_POST ['heso_c'];