Tìm hiểu và ứng dụng một vài ngôn ngữ lập trình để thiết kế trang web

4 T×m hiÓu vµ øng dông mét vµi ng«n ng÷ lËp tr×nh ®Ó thiÕt kÕ trang web Luận văn tốt nghiệp ñại học 5 Mở đầu Mở đầuMở đầu Mở đầu 1. Lý do chọn đề tài Với sự ra đời và phát triển của Word wide web (www) trong những năm vừa qua đã dẫn tới sự phát triển đáng kinh ngạc của Internet và web. Đã xuất hiện các công ty mới chuyên xây dựng các ứng dụng trên web. Cho tới nay trên thế giới đã có hơn 4 tỉ website. Ngày nay web ngày càng thâm nhập vào cuộc sống hàng ngày, web xuất hiện ở mọi lĩnh vực nh kinh tế, văn hoá, chính trị.Để thiết kế một trang web đơn giản không có sự tơng tác với ngời sử dụng rất dễ. Tuy nhiên việc thiết kế các trang web có sự tơng tác với ngời sử dụng đòi hỏi ngời thiết kế phải sử dụng các ngôn ngữ lập trình trên đó. Với việc thiết kế các website bằng cách sử dụng các ngôn ngữ lập trình web sẽ tạo ra sự tơng tác 2 chiều giữa ngời sử dụng và ngời thiết kế, nó giúp ngời thiết kế có thể thu đợc các thông tin từ phía ngời sử dụng và có thể lu các thông tin đó để sử dụng lâu dài, hơn thể nữa nó làm tăng tính bảo mật của các website khi sử dụng cơ sở dữ liệu. Các ngôn ngữ lập trình web ngày càng phát triển cùng với sự phát triển của Internet. Với các u điểm trong việc sử dụng ngôn ngữ lập trình web nên hầu nh các website ngày nay đều sử dụng các ngôn ngữ lập trình này. Tuy nhiên việc tìm hiểu các ngôn ngữ lập trình web này trong chơng trình học của hệ đào tạo s phạm tin là rất hạn chế. Với các lý do trên và với sự hớng dẫn tận tình của thầy giáo Trịnh Thanh Hải chúng tôi đã quyết định chọn đề tài: Tìm hiểu và ứng dụng một vài ngôn ngữ lập trình để thiết kế trang web. 2. Mục đích nghiên cứu Nghiên cứu một số ngôn ngữ lập trình web từ đó ứng dụng vào việc thiết kế website hỗ trợ việc học tập. 6 3. Các nhiệm vụ chính - Nghiên cứu các ngôn ngữ lập trình mạng HTML, Java applet, JavaScript, PHP, cơ sở dữ liệu MySQL. Xây dựng website sử dụng các ngôn ngữ trên. - Nghiên cứu cách sử dụng các phần mềm Maple, Cabri. Tích hợp các sản phẩm của các phần mềm đó lên website. - Xây dựng diễn đàn dành cho giáo viên và học sinh trên mạng. Từ đó thúc đẩy sự giao lu, học hỏi, và quảng bá rộng rãi tới đông đảo giáo viên và học sinh. 4. Phơng pháp nghiên cứu: - Nghiên cứu các tài liệu về ngôn ngữ lập trình mạng, phần mềm flash, dreamwave, cabri - Lấy ý kiến đóng góp của các thầy cô giáo. 5. Giới hạn của đề tài Các ngôn ngữ lập trình web ngày này rất nhiều tuy nhiên trong đề tài này chúng tôi chỉ nghiên cứu 2 ngôn ngữ đó là Javascript và PHP. 7 Chơng Chơng Chơng Chơng 1 11 1 Các kiến thức cơ bản Các kiến thức cơ bảnCác kiến thức cơ bản Các kiến thức cơ bản Để thiết kế web động, ngời thiết kế cần phải có một số kiến thức, kỹ năng cơ bản về các ngôn ngữ sau: 1.1 JavaScript [3] JavaScrip là ngôn ngữ lập trình hớng đối tợng, chạy đợc trên nhiều hệ điều hành, có cấu trúc câu lệnh giống nh C, nó đợc thiết kế để lập trình các script tơng tác cho các trang web động và các ứng dụng trên sever. 1.1.1 Các nguyên tắc trong JavaScript Mỗi câu lệnh trong JavaScript đều kết thúc bằng dấu ;. Các điều kiện đợc khai báo trong dấu bao đơn ( ). Mỗi hàm hay mỗi phơng thức do ngời dùng định nghĩa đợc bắt đầu với từ khoá function, tham số truyền vào phơng thức không cần khai báo kiểu dữ liệu. Khi khai báo biến trong JavaScript, bạn cần phải sử dụng từ khoá var trớc tên biến. Biến có thể khởi tạo giá trị hoặc không đều đợc chấp nhận. Trong câu lệnh điều khiển, nếu có hơn một câu lệnh, phải sử dụng cặp dấu ngoặc nhọn { }. 1.1.2 Tham chiếu đến thẻ HTML Để tham chiếu đến thẻ HTML bằng JavaScript, phải xác định đợc loại thẻ và thuộc tính của thẻ. Để thẻ HTML đợc tham chiếu, chúng phải có tên (Name) hay ID nhận dạng. Đối với một số thẻ không có thuộc tính value khi tham chiếu đến giá trị của chúng, bạn phải tham chiếu đến thuộc tính value nh một phần lấy giá trị của chúng. Ví dụ nh thẻ textarea. Tham chiếu đến thuộc tính value của một số thẻ HTML cho phép nhập liệu thuộc một form trình bày nh trong bảng 1-1 bao gồm: 8 Bảng 1-1 Tham chiếu đến giá trị của thẻ HTML Thẻ Ví dụ Text` document.form.txtUser.value hidden document.form.txtForm.value password document.form.txtPWD.value textarea document.form.txtDsc.value select document.form.cblop.value select document.form.cblop[i].value checkbox document.form.Cau1.value checkbox document.form.Cau1[i].value radio document.form.Cau1.value radio document.form.Cau1[i].value Tuy nhiên đôi khi ta muốn tham chiếu đến các thuộc tính khác nh chiều dài của các thẻ trên ta cũng có thể sử dụng các thuộc tính nh ở bảng 1-2. Bảng 1-2 Tham chiếu đến chiều dài của thẻ HTML Thẻ Ví dụ text document.form.txtUser.length hidden document.form.txtForm.length password document.form.txtPWD.length textarea document.form.txtDsc.value.length select document.form.cblop.length Ngoài các tham chiếu đến các thẻ HTML trong thẻ Form nh trên, JavaScript còn có thể tham chiếu đến các thẻ HTML khác không thuộc thẻ Form. 9 1.1.3 Một số biến cố thờng dùng trong Javascript Khi ngời dùng thực hiện một hành động nào đó trên một số thẻ HTML, bạn có thể sử dụng một số phơng thức do ngời dùng định nghĩa thông qua biến cố phát sinh. Danh sách các biến cố xảy ra trên thẻ HTML khi sử dụng JavaScript để thực hiện một công việc nào đó đợc trình bày trong bảng 1-3. Bảng 1-3 Một số biến cố trên thẻ HTML Biến cố Ví dụ Onclick Khi ngời dùng nhấn chuột trên thẻ. OnSubmit Khi ngời dùng submit một form. OnReset Khi ngời dùng reset một form. OnActive Khi form hoạt động. OnLoad Khi form nạp trên trình duyệt. Onunload Khi form đóng lại. Onmousemove Khi mouse di chuyển vào thẻ. Onmouseout Khi mouse di chuyển ra khỏi thẻ. Onmouseover Khi mouse di chuyển trên thẻ. Onblur Khi con trỏ di chuyển ra khỏi thẻ. Onkeypress Khi phím di chuyển trên thẻ. 1.1.4 Một số phơng thức thờng dùng trong Javascript Ngoài một số phơng thức JavaScript do ngời dùng định nghĩa, bản thân JavaScript cung cấp một số phơng thức, cho phép ngời dùng thực hiện một số hành động thay vì sử dụng thông qua các biến cố. Các phơng thức thông thờng của JavaScript để thực hiện một số công việc nào đó đợc trình bày trong bảng 1-4. 10 Bảng 1-4 Một số phơng thức của JavaScript Phơng thức Diễn giải alert(str) Xuất hiện hộp thoại thông báo với nội dung là chuỗi str. comfirm(str) Xuất hiện hộp thoại chứa nội dung cần xác nhận với nút OK và Cance. Prompt(str,default) Xuất hiện hộp thoại với nội dung là chuỗi str, mệnh đề default cho phép ngời dùng nhập vào giá trị. f.submit() Submit một form có tên là f. f.reset() Reset một form có tên là f. t.focus() Trỏ con trỏ nháy vào thẻ có tên là t. s.toString() Chuyển giá trị của đối tợng sang dạng chuỗi. s.IndexOf(i) Trả về vị trí đầu tiên của chuỗi i tìm thấy trong chuỗi s. s.LastIndexOf(i) Trả về vị trí cuối cùng của chuỗi i tìm thấy trong chuỗi s. s.substr(i,j) Trả về chuỗi con trong chuỗi từ vị trí i dài j kí tự. s.charAt(i) Trả về ký tự tại vị trí thứ i trong chuỗi s. Ngoài ra JavaScript còn có các phơng thức thờng dùng để điều khiển cửa sổ hay trình duyệt nh trong bảng 1-5. Bảng 1-5 Một số phơng thức điều khiển khác Phơng thức Diễn giải Window.close() Đóng cửa sổ hiện tại. Window.open(URL) Mở một cửa sổ trình duyệt với địa chỉ URL. Window.opener(URL) Mở một cửa sổ trình duyệt với địa chỉ URL trên cửa sổ popup. Window.history.back(i) Trở về trang web trình duyệt trớc đó i lần. Window.history.go(-i) Trở về cửa sổ trang web trình duyệt trớc đó i lần. Window.print() Mở hộp thoại print để in trang web. document.write(str) In chuỗi str ra tại vị trí hiện tại của trang web 11 1.1.5 Khai báo và sử dụng biến trong JavaScript. Khai báo và sử dụng biến. Để khai báo biến trong JavaScript, ta cần phải sử dụng từ khoá var trớc tên biến, biến có thể khởi tạo giá trị trong khi khai báo hay có thể gán khi dùng. Để sử dụng biến, cũng tơng tự nh các ngôn ngữ khác, ta sử dụng phép gán nh phép gán trong C hoặc Java. Các phép toán trong JavaScript. Các phép toán trong JavaScript đợc thể hiện trong bảng 1-6 nh sau: Bảng 1-6 Một số phép toán trong JavaScript Phép toán Diễn giải == Phép toán so sánh bằng. != Phép toán so sánh khác nhau. || Phép or. && Phép and. ! Phép not ? : Phép thay thế cho câu lệnh if và else đơn giản 1.1.6 Các câu lệnh điều khiển của JavaScript Câu lệnh if Cú pháp: If (biểu thức logic) { các câu lệnh} Thực hiện: Nếu thoả mãn biểu thức logic sẽ thực hiện dãy các câu lệnh nếu không sẽ thoát khỏi câu lệnh rẽ nhánh. 12 câu lệnh if.else Cú pháp: If (biểu thức logic) { dy câu lệnh 1} Else { dy câu lệnh 2} Thực hiện: Nếu thoả mãn biểu thức logic sẽ thực hiện dãy câu lệnh 1, nếu không sẽ thực hiện dãy các lệnh 2. Câu lệnh Switchcase Cú pháp: Switch (biểu thức) { case giá trị 1: lệnh 1; break; case giá trị 2: lệnh 2; break; . case giá trị n: lệnh n; break; default: lệnh n+1; } Câu lệnh While Cú pháp : While (biểu thức logic) { dy các lệnh} Thực hiện: Trong khi biểu thức logic còn thoả mãn thì tiếp tục thực hiện dãy các lệnh sau While. Câu lệnh For Cú pháp: For(biểu thức 1; biểu thức điều kiện; biểu thức 2) { dy các lệnh} 13 Thực hiện: Lặp đi lặp lại một số lần nhất định các công việc giống nhau cho đến khi vẫn còn thoả mãn biểu thức điều kiện. 1.1.7 Chèn tập tin JavaScript Khi xây dựng một web site, có khá nhiều mục sử dụng lại nhiều lần, một trong những loại đợc sử dụng lại nhiều lần là thẻ style. Đối với các phơng thức JavaScript do ngời dùng tạo ra cũng vậy, trong trờng hợp nhiều lần cần sử dụng lại có thể tạo ra một trang js với các phơng thức chung, sau đó khai báo sử dụng chúng khi có nhu cầu. Để khai báo sử dụng trang JavaScript có sẵn ta khai báo nh sau: <script language="javascript" dẫn đến file js > </script> 1.2 Ngôn ngữ lập trình máy chủ php PHP (Pesonal Home Page) là kịch bản trên server (Sever Script), đợc thiết kế cho phép ta xây dựng ứng dụng web trên cơ sở dữ liệu. Mã PHP có thể thực thi trên Web Server để tạo ra trang html và xuất ra trình duyệt web theo yêu cầu của ngời dùng. PHP ra đời vào khoảng năm 1994, do một ngời phát minh tên Rasmus Lerdorf, dần dần nó đợc tiếp tục phát triển bởi nhiều ngời khác cho đến ngày nay. Một số nhà phát triển ứng dụng web, thờng sử dụng PHP để xây dựng các ứng dụng thơng mại điện tử. Cho đến thời điểm tháng 1 năm 2005 đã có khoảng 7 triệu tên miền trên thế giới sử dụng PHP. PHP là Open Source (mã nguồn mở), điều này có nghĩa là ta có thể làm việc trên mã nguồn, thêm, sửa, sử dụng và phân phối chúng. 1.2.1 Nhúng mã PHP trong HTML Để nhúng mã PHP trong html, ta bắt đầu với <? và đóng lại bằng ?>. Có 4 loại thẻ PHP Kiểu short: Đây là thẻ mặc định mà các nhà lập trình PHP thờng sử dụng. Dạng của thẻ này nh sau: <? Dy các lệnh ?> [...]... giới thiệu - Với các chức năng đã tìm hiểu đợc các công cụ này hỗ trợ cho việc biên tập website 29 Chơng 2 Cài đặt một vài ứng dụng đơn giản trên website 2.1 Xác định b i toán Sử dụng các ngôn ngữ lập trình web để thiết kế một website hoàn chỉnh phụ vụ việc dạy và học, qua tìm hiểu nhu cầu thực tế chúng tôi đã xây dựng 1 website có các chức năng sau: Xem hớng dẫn sử dụng một số phần mềm toán học Xem hệ... ng buôc Để có thể chạy ứng dụng này websever phải hỗ trợ ngôn ngữ lập trình web php, java và cơ sở dữ liệu MySQL 2.3 Phân tích thiết kế 2.3.1 Mô hình chức năng Xuất phát từ nhiệm vụ của bài toán và qua tìm hiểu thực tế ta xác định mô hình chức năng nh sau: 31 Xem hệ thống bài tập quỹ tích Xem hệ thống các bài viết hớng dẫn sử dụng một số phần mềm Trang chủ Đăng kí thành viên Tìm kiếm thành viên Quản... m u đờng viền Để tạo đờng viền cho vùng ảnh và đặt mầu của đờng viền ta khai báo nh sau: Kết chơng: Trong chơng này chúng tôi đã trình bày - Tổng quan về các ngôn ngữ lập trình web -Xuất phát từ mục đích để thiết kế ứng dụng nên chúng tôi không trình bày chi... dịch vụ m website cung cấp Website này cung cấp cho ngời sử dụng một số dịch vụ(chức năng) tuy nhiên tuỳ vào từng ngời mà các dịch vụ sẽ đợc cung cấp một cách khác nhau Đối với học sinh cha đăng ký: Chỉ sử dụng đợc các dịch vụ sau Xem hớng dẫn sử dụng một số phần mềm toán học Xem hệ thống các bài tập quỹ tích trong hình học phẳng Đăng ký để trở thành thành viên Đối với học sinh đ đăng ký: Sử dụng đợc... sử dụng cho các ứng dụng web có quy mô vừa và nhỏ Tuy không phải là một cơ sở dữ liệu lớn nhng chúng cũng có 20 trình giao diện trên Windows hay Linux, cho phép ngời dùng có thể thao tác các hành động liên quan đến cơ sở dữ liệu Cũng giống nh các hệ cơ sở dữ liệu khác, khi làm việc với cơ sở dữ liệu MySQL, ta phải đăng ký kết nối, tạo cơ sở dữ liệu, quản lý ngời dùng, phân quyền sử dụng, thiết kế đối... ứng với hai cách kết nối tới cơ sở dữ liệu MySQL ta cũng có hai cách khác nhau để mở một cơ sở dữ liệu 19 Cách 1: Sử dụng hàm sau: mysql_select_db(tên cơ sở dữ liệu) Cách 2: mysql_select_db(tên cơ dữ liệu,$link) Đóng kết nối cơ sở dữ liệu Để đóng kết nối với cơ sở dữ liệu ta dùng hàm sau: Mysql_close(tên cơ sở dữ liệu hoặc biến $link) Truy vấn cơ sở dữ liệu Để truy vấn cơ sở dữ liệu, ta có thể sử dụng. .. khai báo require() và include() là tơng tự nhau, tuy nhiên chúng có sự khác nhau cần chú ý đó là: Khi khai báo sử dụng require() thì websever phải nạp tất cả nội dung bên trong trang đó vào, còn khi sử dụng include chỉ khi nào cần sử dụng thì websever mới nạp nội dung của trang đó vào 1.2.7 Sử dụng h m trong PHP Cấu trúc đơn giản của h m function ([các tham số nếu có]) { nội dung bên trong h m... hàm PHP dùng từ khoá & để quy định tham số truyền vào là ở dạng tham biến Tham trị: Khi truyền tham số theo dạng này, nếu có sự thay đổi về giá trị của tham số đó trong hàm, khi ra khỏi hàm giá trị này sẽ không đợc lu lại ở tham số đó 1.2.8 PHP v cơ sở dữ liệu MySQL Thiết lập kết nối cơ sở dữ liệu PHP cung cấp 2 cách để thiết lập kết nối với hệ cơ sở dữ liệu MySQL Cách 1: Sử dụng hàm có cú pháp nh... lặp lại một số lần nhất định các công việc giống nhau cho cho đến khi vẫn còn thoả mãn biểu thức điều kiện 1.2.6 Sử dụng khai báo require() v include() Một trong những mục tiêu của của những nhà làm công nghệ phần mềm là sử dụng lại những đoạn mã đã viết trong khi viết đoạn mã chơng trình mới Làm nh vậy nhằm tăng tính mềm dẻo, tính nhất quán trong các ứng dụng, giảm thời gian xây dựng ứng dụng cùng... cung cấp hai cách khai báo để sử dụng bất kì đoạn mã chơng trình nào đã có, bằng cách sử dụng khai báo require() và include() Ta có thể chèn tệp tin, kịch bản PHP, text, HTML và ngay cả các lớp (class) của PHP Cú pháp khai báo nh sau: require(đờng dẫn đến tệp tin chứa đoạn m cần sử dụng lại) include(đờng dẫn đến tệp tin chứa đoạn m cần sử dụng lại) Hai cách khai báo require() và include() là tơng tự nhau, . trong việc sử dụng ngôn ngữ lập trình web nên hầu nh các website ngày nay đều sử dụng các ngôn ngữ lập trình này. Tuy nhiên việc tìm hiểu các ngôn ngữ lập trình web này trong chơng trình học. ngôn ngữ lập trình trên đó. Với việc thiết kế các website bằng cách sử dụng các ngôn ngữ lập trình web sẽ tạo ra sự tơng tác 2 chiều giữa ngời sử dụng và ngời thiết kế, nó giúp ngời thiết kế. các lý do trên và với sự hớng dẫn tận tình của thầy giáo Trịnh Thanh Hải chúng tôi đã quyết định chọn đề tài: Tìm hiểu và ứng dụng một vài ngôn ngữ lập trình để thiết kế trang web. 2. Mục