IT3503 Web Development Techniques (Optional)

Transcription

1 INTRODUCTION Web Development Techniques (Optional) This is one of the three optional courses designed for Semester 3 of the Bachelor of Information Technology Degree program. This course on web development techniques is a brief introduction to the most common methods of adding useful, interactive and dynamic elements to a web site. CREDITS: 04 LEARNING OUTCOMES After successful completion of this course students will be able to: Identify the main concepts in the web development environment Create web pages using HTML and CSS Add interactivity to web pages using JavaScript Create server scripts using PHP Identify alternative web development technologies Describe legal and ethical issues in web development OUTLINE OF SYLLABUS Topic Hours 1- Introduction to the Internet and Web Web page design with HTML and CSS 16* 3- Client-side Programming with JavaScript 14* 4- Server-side Programming with PHP 14* 5- More topics in web development 12 Lectures Practical and Tutorials Total for the subject 60 1

2 * Students are expected to have at least 20 hours of practicals to strengthen their knowledge of these sections. Note: All these should be lecture-demonstrations preferably conducted in a laboratory with hands on practice for students. SYNOPSIS/OVERVIEW The course is designed to provide the learner with most essential web development skills in designing a simple website by adding dynamic features to web pages with client side scripting languages, and generating dynamic content with server side scripting techniques. The course is specifically designed in such a way that even a novice learner will be able to describe and apply programming concepts such as data types and variables, operators, control structures and object oriented concepts in most popular web development languages. This course also aims to provide the learners with the necessary competence and analytical skills to select their web development platforms and to identify risk factors associated with web development. Hence, it provides a foundation for more advanced web development courses. PEDAGOGICAL FRAMEWORK The main pedagogical framework of the course focuses on activity based learning. Students are supposed to do all the learning activities to cover the learning content. EXPECTATIONS/EXAMINATIONS/REQUIREMENTS The learners are expected to obtain knowledge and master necessary skills to work with languages such as HTML, CSS, JavaScript and PHP. Set of questions are provided to the learner at the end of the content of each chapter and two assignments are provided one at the end of the first half of the syllabus and the other at the end of the full syllabus. Marks for the activities and quizzes are not counted but marks for the assignments are tracked by the LMS and a pass grade is issued. Obtaining pass grades for the two assignments and Final Exam are mandatory for the completion of Semester 3. 2

3 REQUIRED MATERIALS Main Reading Ref 1 : Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, Python, and PHP Web Standards Programmer's Reference, ISBN: , Wiley Publishing Inc., USA (Indian Edition) Supplementary Reading Ref 2 : Ref 3 : Ref 4 : Ref 5 : Ref 6 : Ref 7 : Ref 8 : Ref 9 : Ref 10 : Ref 11 : Ref 12 : Ref 13 : Ref 14 : Ref 15 : Ref 16 : Ref 17 : Ref 18 : Ref 19 : The pages of the web addresses mentioned above were browsed on 24 th July You can access all theses content from LMS. 3

4 DETAILED SYLLABUS : Section 1: Introduction to the Internet and Web (4hrs) Recognize the Internet as an interconnected network which carries various information and services Describe the World Wide Web (WWW) architecture Describe the client-server architecture and HTTP protocol Identify main bodies who control the standards for WWW 1.1. What is the Internet? [Ref 2] 1.2. What is the World Wide Web? [Ref 3] Web servers and web browsers IP address and Domain Name System (DNS) URI and URL Client-server model HTTP protocol 1.3. Standards bodies [Ref 4, Ref 5, Ref 6] The World Wide Web Consortium (W3C) Internet Engineering Task Force (IETF) and RFCs Section 2 : Web page design with HTML and CSS (16 hrs) Describe the structure of a HTML page using various HTML tags Modify the presentation of information of a given HTML page by adding images and various formatting Create web pages with inter-page and intra-page links Add and manage frames Describe the use of HTML forms and include them in a HTML page Describe a style sheet language in contrast to markup language Describe programming concepts of CSS language Create a website using HTML and CSS 4

5 2.1. Designing HTML documents Document tags [Ref 1: pg 13 21] Paragraphs and lines [Ref 1: pg 23 33] Ordered and unordered lists [Ref 1: pg 35 49] Inserting images [Ref 1: pg 51 67] Absolute and relative links [Ref 1: pg 69 77] Text and text formatting [Ref 1: pg 79 88] Tables and table formatting [Ref 1: pg ] Using tables for page layout [Ref 1: pg ] Using frames and frame targeting [Ref 1: pg ] Designing forms [Ref 1: pg ] 2.2. Defining styles using CSS Styles and HTML [Ref 1: pg ] Selectors, structure and cascade [Ref 1: pg ] Values and units [Ref 1: pg ] Text properties [Ref 1: pg ] Fonts [Ref 1: pg ] Colors and backgrounds [Ref 1: pg ] Visual formatting [Ref 1: pg ] Boxes and borders [Ref 1: pg , ] Positioning [Ref 1: pg ] Table layout [Ref 1: pg 244] User interface styles [Ref 1: pg ] Section 3 : Client-side programming with JavaScript (14 hrs) List client-side scripting languages Explain the programming concepts and data types in JavaScript language Identify the object-oriented concepts used by JavaScript Identify the document object model (DOM) of a HTML document and access different components using JavaScript Explain event handling in JavaScript 5

6 Use JavaScript to create a simple webpage with dynamic content Create a webpage including forms and use JavaScript to validate fields 3.1. Client-side programming languages [Ref 1: pg ] 3.2. Uses of JavaScript [Ref 1: pg 265] 3.3. Incorporating JavaScript in a HTML document [Ref 1: pg ] 3.4. Basic JavaScript syntax [Ref 1: pg 269] 3.5. Data types and variables [Ref 1: pg ] 3.6. Expressions and operators [Ref 1: pg ] 3.7. Control structures [Ref 1: pg ] 3.8. Functions and procedures [Ref 1: pg ] 3.9. Arrays and objects [Ref 1: pg , ] Document object model (DOM) [Ref 1: pg ] Event handling [Ref 1: pg ] Using JavaScript for form validation [Ref 1: pg ] Section 4 : Server-side programming with PHP (14 hrs) Explain server-side programming List server-side programming languages Explain the programming concepts and data types in PHP language Identify the object-oriented concepts in PHP Use PHP to process a HTML form Identify some useful functions in PHP Create sessions in a PHP-based website Identify other facilities in PHP Connect to a MySQL database using PHP and exchange data 4.1. Server side programming languages [Ref 1: pg ] 4.2. PHP fundamentals [Ref 1: pg ] 4.3. Data types and variables [Ref 1: pg ] 4.4. Expressions and operators [Ref 1: pg ] 6

7 4.5. Control structures [Ref 1: pg ] 4.6. Functions and procedures [Ref 1: pg ] 4.7. Arrays and objects [Ref 1: pg ] 4.8. Form data handling [Ref 1: pg ] 4.9. Handling sessions [Ref 1: pg ] Accessing a MySQL database [Ref 1: pg ] Errors and troubleshooting [Ref 1: pg ] Section 5 : More topics in web development (12 hrs) Identify HTML editors and their features List popular solution stacks and explain their advantages and disadvantages Identify the 3-tier architecture in web application development Distinguish between web servers and application servers Explain how AJAX can be used to improve the presentation of information Identify issues involved in publishing a website to a web server Describe copyright and privacy issues in web content development Identify available technologies to make web transactions secure 5.1. HTML editors for website development: e.g. Microsoft FrontPage and Macromedia Dreamweaver [Ref 7, Ref 8] 5.2. Solution stacks: e.g. LAMP, WAMP [Ref 9] 5.3. Developing web applications applying 3-tier architecture [Ref 10] 5.4. Web servers, application servers and web application servers: e.g. Apache web server and Tomcat web application server [Ref 11-14] 5.5. Developing interactive web applications using AJAX [Ref 15] 5.6. Website hosting and ISPs [Ref 16, Ref 17] 5.7. Website legal issues: copyright, privacy and terms of use [Ref 18] 5.8. Security protocols and secure connections: e.g. SSL and HTTPS [Ref 19] 7

8 PLATFORM Windows or Linux Apache 2.x PHP 5.x MySQL 5.X Activities - Please refer to the activities on the e-learning material in your Learning Management System (LMS). Assessment - You will get two online assignments as Assignment Quiz 1 and Assignment Quiz 2. The final exam will be conducted in a face to face environment. Contact details - Tel : Ext