Transcript lecture 1
www.hndit.com IT4103 Web Programming Week1- Introduction to Web based Application Development & Markup Language www.hndit.com Module Aim • This module aims to build student awareness of the range of mechanisms available to web programmers seeking to develop dynamic and interactive web sites. • At the same time students will develop practical expertise in client-side and server-side scripting providing them with a solid foundation from which to develop a mastery of web programming techniques. www.hndit.com Learning Outcomes At the end of the module the student will be able to 1. Explain how the interactive functionality of any given web site may have been achieved using a range of client-side and server-side scripting, CSS, Web 2.0 technologies, web applications and web services. 2. Use style sheets and JavaScript to enhance the user interface of a web site. 3. Write PHP scripts to serve data from a MySQL database to a browser. 4. Construct an income generating web site. www.hndit.com Outline Syllabus 1. Orientation to Web Programming and available technologies 2. Style sheets 3. Client-side scripting 4. Server-side scripting 5. Web services – using the output in a new web site 6. Adding functionality to a web site using web applications 7. Generating income from the web 8. Building a site around a CMS www.hndit.com Assessment and Weighting • Continuous Assessment – Weekly laboratory exercises 10% – Construction of an interactive website 40% • End Semester examination – Structured Question paper 50% www.hndit.com Introduction www.hndit.com Internet • The Internet is a computer network made up of thousands of networks worldwide. • No one knows exactly how many computers are connected to the Internet. It is certain, however, that these number in the millions and are growing. • No one is in charge of the Internet. There are organizations which develop technical aspects of this network and set standards for creating applications on it, but no governing body is in control. The Internet backbone, through which Internet traffic flows, is owned by private companies. www.hndit.com Internet • All computers on the Internet communicate with one another using the Transmission Control Protocol/Internet Protocol suite, abbreviated to TCP/IP. • Computers on the Internet use a client/server architecture. • This means that the remote server machine provides files and services to the user's local client machine. www.hndit.com Internet (cont.) • An Internet user has access to a wide variety of services: interlinked Web pages, electronic mail, file transfer, vast information resources, interest group membership, interactive collaboration, multimedia displays, real-time broadcasting, breaking news, shopping opportunities, and much more. • The Internet consists primarily of a variety of access protocols. • Many of these protocols feature programs that allow users to search for and retrieve material made available by the protocol. www.hndit.com WWW • Stands for World Wide Web • Commonly “Web” • A system of interlinked hypertext documents accessed via the Internet. • Hypertext-text displayed on a computer or other electronic device with references (hyperlinks) to other text that the reader can immediately access. • Hyperlink (or link)- is a reference to a document that the reader can directly follow, or that is followed automatically www.hndit.com WWW (cont.) • The World Wide Web (WWW) is a network of computers that, using the Internet, are able to exchange text, graphics, and even multimedia content using standard protocols. • The Web was created in 1989 by the Briton Sir Tim Berners-Lee and the Belgian Robert Cailliau working at CERN in Geneva, Switzerland as a means for transferring text and graphics. • A client requires a client application, usually a Web browser, to view Web pages that may contain text, images, and other multimedia and navigates between them using hyperlinks. • Web servers are special computers that are setup for the distinct purpose of delivering content which are place on the Internet. www.hndit.com Web page • A document or information resource that is suitable for the World Wide Web • Can be accessed through a web browser • displayed on a monitor or mobile device • This information is usually in HTML or XHTML format. • Use other resources such as style sheets, scripts and images into their final presentation • retrieved from a local computer or from a remote web server www.hndit.com Web page( cont.) <html> <head> -----CSS----------Scripts-----</head> <body> <h1>My Web Site </h1> . . . <p>Come Again<p> </body> </html> www.hndit.com Web Site • A collection of related web pages containing images, videos or other digital assets • Hosted on at least one web server • Accessible via a network such as the Internet or a private local area network through an Internet address known as a Uniform Resource Locator • Domain name and IP www.hndit.com Web Server • Web server is a software on a server machine that can be run to answer requests from Web clients using the Hypertext Transfer Protocol (HTTP). • This can also be defined as a network server that manages access to files, folders and other resources over the Internet or local intranet via HTTP. • Web servers handle access permission, execute programs, keep track of directories and files and communicate with client computers. www.hndit.com Web browsers • A software application for retrieving, presenting, and traversing information resources on the World Wide Web. • Major web browsers are Internet Explorer, Firefox, Google Chrome, Apple Safari, and Opera. www.hndit.com Hypertext Transfer Protocol (HTTP) • HTTP is a very simple client-server request/response communication protocol • HTTP is the heart of the world wide web (WWW) which is used to transfer or convey information • HTTP is stateless and relies on URI naming mechanism • Development of HTTP was coordinated by the W3C (World Wide Web Consortium) and the IETF (Internet Engineering Task Force) www.hndit.com Domain Name Service • Domain name: The specific address of a computer on the Internet – microsoft.com • Domain Name System (DNS) – A DNS server provides 'name resolution service‘ which means that DNS servers resolve names into IP addresses or vice versa. – DNS servers are also called name servers. – A local DNS server which performs domain name lookup is usually located on the network to which your computer is attached. – If you are using an Internet Service Provider (ISP), your DNS server is at your ISP. – If you are using the network at your college or your office, you probably have a local DNS server somewhere near you at the server room. www.hndit.com Internet protocol (IP) address • An IP address is a number used to identify the logical connection of a computer in a physical network using a 32-bit binary address, composed of four 8-bit numbers. • 192.168.1.1 • Any resource attached to an IP network can be assigned an IP address, e.g. computer, printer or a scanner. • It is possible for a single host to have multiple IP addresses if it is running multiple networking applications, such as DNS, Web or Mail server software. • Addresses are always unique. • Because IP addresses are software configured, it is easy to move hosts from one network to another simply by changing the IP address or the network mask www.hndit.com URL- Uniform Resource Locator • Information provided in a URL – The protocol to use (generally HTTP) – The server to request the document from – The path on the server to the document – The document’s name (optional) www.hndit.com Domain registrar • A company that provides domain name registration services for a fee. • Maintain database which maps domain names to IP’s • Propagate new domain name/IP address information across the internet www.hndit.com Structure of World Wide Web • Clients use browser application to send URIs via HTTP to servers requesting a Web page • The server name part of the URL will be resolved by the DNS • Web pages are constructed using HTML (or other markup language) and consist of text, graphics, sounds and even embedded files • Servers respond with requested Web page or other message such as an error message • Client’s browser renders Web page returned by the server to the client • The entire system runs over standard networking protocols such as TCP/IP and DNS Client-Server Computing Architecture www.hndit.com • In the client-server architecture, the client is separated from a server • The client is defined as the requester of services and the server is defined as the provider of services • A Server a host that is running one or more server programs which can be sharing of information or resources • Client does not share any of its resources, but requests a server's content or service function. Client-Server Computing Architecture www.hndit.com Client-Server Computing Architecture www.hndit.com • Characteristics of a client – Initiates requests(Master) – Waits for and receives replies – Usually connects to a small number of servers at one time – Typically interacts directly with end-users using a graphical user interface – Examples: web browsers, email clients and online chat clients Client-Server Computing Architecture www.hndit.com • Characteristics of a server – Passive (slave) – Waits for requests from clients – Upon receipt of requests, processes them and then serves replies – Usually accepts connections from a large number of clients – Typically does not interact directly with end-users – Examples: web servers, database servers and mail servers www.hndit.com Advantages of Client-Server Architecture • Low coupling of client and server, thus greater independence for maintenance. – For example, it is possible to replace, repair, upgrade, or even relocate a server while its clients remain both unaware and unaffected by that change. • Greater security for data stored on the server. Servers can control access and resources. • Easy to update and administer data, because of centralized nature. www.hndit.com Disadvantages of Client-Server Architecture • More traffic to the server as the number of simultaneous client requests to a given server increases. • If the server fails under a critical condition, the clients’ request will not be fulfilled. www.hndit.com Web Application • Any application that uses Web Technologies including web browsers, web servers and Internet protocols is called Web Application. • A web application can be divided into three different layers. www.hndit.com Web Application (cont.) 1. Presentation layer which forms the first tier of the application, consists of web server and the web browser, which is responsible for assembling the data into presentable format. 2. Application layer constitutes the second tier of the application and is consisting of server side program and scripts. 3. Finally the third tier provides the programmable access to the databases. www.hndit.com Web Application (cont.) • In an e-commerce scenario – when a user (first tier), send a request to the web server, – web server process the request (Second and third tier), – formats the result and finally sends the formatted results (first tier) to the client. • In this process server side scripts play a very important role of processing the users request and in the generation of dynamic pages, based on user and its input. www.hndit.com Static vs. Dynamic Content • Static web pages do not change the content or layout depending on user input. • In contrast, dynamic web pages adapt their content depending on user input or computing environment (user, time or data). • Dynamic content can be delivered as a result of two technologies: – Client-side scripting languages – Server-side scripting languages Characteristics of Client-sidewww.hndit.com Scripting • Plain HTML is basically static – The browser displays the text and graphics and waits for the user to click a link or fill in a form to return data to the server. • Client-side scripts can modify the pages at runtime, and therefore, they also falls under the heading of DHTML (dynamic HTML). • Client-side scripts have greater access to the information and functions available on the user's computer, whereas for server-side scripts its for the server. • Client-side scripts require that the user's web browser understand the scripting language in which they are written. www.hndit.com Some Uses of Client-side Scripting • Form verification – Client-side scripts can parse form data prior to the data being submitted to a handler on the server, ensuring that there are no obvious errors (missing or improperly formatted data). • Document animation and automation – Accessing element data and properties via the DOM, client-side scripts can affect changes in elements’ content, appearance, size, position, and so forth. • • Basic document intelligence – Client-side scripts can embed a base level of intelligence to the document by linking elements to scripts via events (mouse clicks, key presses, and so on). www.hndit.com Client-side Scripting Languages • • • • • JavaScript JScript VBScript ActionScript AJAX www.hndit.com Server Side Scripting • Server-side scripting is a web server technology in which a user's request is fulfilled by running a script directly on the Web server to generate dynamic HTML pages. • In client-side scripting, the scripts are first downloaded, and then interpreted and executed by the Web browser. • Server-side scripting enables the ability to highly customize the response based on the user's requirements, access rights, or queries into data stores Some Server-side Scripting Technologies www.hndit.com • ASP - Microsoft designed, primarily Windows based, solution allowing various languages (generally VBscript) inside a HTML-like outer page • ASP.NET - part of Microsoft's .NET platform and is the successor to ASP • JSP - a Java-based system for embedding Java-related code in HTML pages • PHP - open source solution based on including code in its own language into an HTML page • Ruby on Rails - a free web application framework that aims to increase the speed and ease with database driven Web sites creation www.hndit.com Creating a Web site 1. 2. 3. 4. 5. 6. 7. Choose a domain name Register with a Registrar Choose a hosting service Tell Registrar the IP address Create web content Store (publish) onto hosting server (FTP) Submit new site to search engines www.hndit.com Creating your Web Site Technologies & Tools • Markup Languages – HTML, DHTML, XML, XSLT, etc.... • Cascading Style Sheets (CSS) • Scripting languages – perl, javascript, php, etc.... • Web creation and editing software – Notepad, FrontPage, ColdFusion, Flash, Site Builder, etc.. www.hndit.com HTML • • • • • Stands for Hyper Text Markup Language Predominant markup language for web pages HTML is the basic building-blocks of web pages Not a programming language An HTML file is a text file containing small markup tags (like <html>) • The markup tags tell the Web browser how to display the page • An HTML file must have an htm or html file extension • An HTML file can be created using a simple text editor www.hndit.com Basic HTML Document Structure <html> <head> <title>Your Page Title</title> </head> <body> This area will contain everything that will be visible through a web browser, such as text and graphics. All of the information will be HTML coded. </body> </html> www.hndit.com Basic HTML Document Structure(cont.) • <html> - Begins your HTML document. • <head> - Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects. • <title> - The TITLE of your page. This will be visible in the title bar of the viewers’ browser. • </title> - Closes the HTML <title> tag. • </head> - Closes the HTML <head> tag. • <body> - This is where you will begin writing your document and placing your HTML codes. • </body> - Closes the HTML <body> tag. • </html> - Closes the <html> tag www.hndit.com HTML Tags • Refer Word document of HTML Tags… HTML Character Entities Result Description < > & non-breaking space less than greater than ampersand " ' quotation mark apostrophe Entity Name < > & " ' HTML Character Entities (cont.) Result Description Entity Name ¢ cent ¢ £ pound £ ¥ yen ¥ € euro € § section § © copyright © ® registered trademark ® × multiplication × ÷ division ÷