Internet programming lecture 1


Published on

Published in: Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Internet programming lecture 1

  1. 1. Lecturer, and Researcher atThamar UniversityBy Eng: Mohammed HusseinEmail: mohammedhbi@gmail.comRepublic ofYemenTHAMAR UNIVERSITYFaculty of Computer Science&Information System1By Eng: Mohammed Hussein
  2. 2. Outline Course Details Introduction Programming and TheWeb Programming vs. Scripting Serving HTML Pages Web Server Accessing a database Web application Ajax HTMLTags2By Eng: Mohammed Hussein
  3. 3. CourseDetails Grading : Practical and Project : 35% One topic per/students from a specified set 30 minutes presentation Examination : 65% E.g. question you ask and how much you interact3By Eng: Mohammed Hussein
  4. 4. Whatyou have to do in your project?Eng.Tariq will describe for you during the practicalclass time.In additional to that, you have to study and implementthe DevelopPHPCustomCMS project, whichshows the course concept.By Eng: Mohammed Hussein 4
  5. 5. Introduction• WorldWideWeb(WWW):• a collection of interlinked multimedia documents that are stored on theInternet• HyperTextTransfer Protocol(HTTP) :• a protocol to access the WWW.• Dynamic HTML Object Model– Allows web authors to control the presentation of their pages– Gives them access to all the elements on their pages.• Web page: consist of– Elements, forms, frames, tables– Represented in an object hierarchy• Scripting– Retrieve and modify properties and attributes5By Eng: Mohammed Hussein
  6. 6. Programming and Web Adding dynamic elements toweb. HTML and XHTML pages arestatic - no real interactivitywith the user. Web programming languagessuch as Flash, JavaScript andPHP can be used to addinteractivity to HTML/XHTML. Examples include respondingto mouse and keyboardactions, checking user input,building web pagesdynamically, inputting anddisplaying data, etc.Text, Graphics & PicturesHTML, DHTML, XHTML & CSSPHP & MySqlFlash, JavaScript & XML6By Eng: Mohammed Hussein
  7. 7. Programming and Web Client-side vs. Server-side Client refers to the end-users computer or a program running onthat computer. Server refers to a central computer (or a program running on acentral computer) that clients connect to and interact with. Clients and Servers connect via the Internet or a local networksuch as an intranet. Differences between client-side and server-side are importantwhen programming for theWorldWideWeb. In most cases, creating a dynamic web site requires both client-side programming (e.g. JavaScript) and server-sideprogramming (e.g. PHP).7By Eng: Mohammed Hussein
  8. 8. Programming vs. Scripting Not a concrete distinction, but... Programming languages generally have stricter rules ofsyntax, often need to be compiled, and usually producecode that can run more or less independently of othersoftware. Scripting languages are generally less strict about syntax,are usually interpreted rather than compiled, and oftenproduce code that works with another application (e.g. aweb browser or a web server). Most newcomers find scripting languages easier to learn. JavaScript and PHP (in its usual form) are both scriptinglanguages.8By Eng: Mohammed Hussein
  9. 9. Serving HTML Pages How clients can requestHTML documents storedon a server? We dont usually make webpages just to be viewedlocally.We want to placethe HTML files on a fileserver that is part ofInternet!You do this byuploading the pages to AnISP (Internet ServiceProvider).As you can see inThe diagram below Setting up a Server You can set up an HTTPserver on an Linuxmachine using the httpdprogram. Many Linuxmachines include theApacheWeb Server. On a Windows you canset up xampp-win32 thatinclude the ApacheWebServer.9By Eng: Mohammed Hussein
  10. 10. ServingHTMLPagesDocumentStore10By Eng: Mohammed Hussein
  11. 11. ServingHTMLPages HTML page includes image, audio, and video files.All of this content lives on a web server—a remotemachine often far away from Client computer. Client use a web browser to request, retrieve, andeventually display web content on the screen.11By Eng: Mohammed Hussein
  12. 12. CommonGatewayInterface (CGI)The interfacespecification thatdefines howinformation can bepassed from thebrowsers back to theserver is called theCommonGatewayInterface, (CGI).12By Eng: Mohammed Hussein
  13. 13. Preparingtobuilddynamic sites1. Web browser requestsstatic page.2. Web server findspage.3. Web server sendspage to requestingbrowser.13By Eng: Mohammed Hussein
  14. 14. Processing dynamic pages1. Web browser requestsdynamic page.2. Web server finds page andpasses it to applicationserver.3. Application server scanspage for instructions andfinishes page.4. Application server passesfinished page back to webserver5. Web server sends finishedpage to requesting browser14By Eng: Mohammed Hussein
  15. 15. Accessingadatabase1. Web browser requests dynamicpage.2. Web server finds page and passesit to application server.3. Application server scans page forinstructions.4. Application server sends query todatabase driver.5. Driver executes the query againstthe database.6. Recordset is returned to driver.7. Driver passes recordset toapplication server8. Application server inserts data inpage, and then passes the page tothe web server9. Web server sends finished page torequesting browser.15By Eng: Mohammed Hussein
  16. 16. WebApplication A web application is a website that contains pageswith partly or final content of a page. The final content of a page is determined only whenthe visitor requests a page from the web server. A dynamic page which is the final content of thepage that have varies of from request based on thevisitor’s actions. Web applications are built to address a variety ofchallenges and problems.16By Eng: Mohammed Hussein
  17. 17. TraditionalWebApplicationsBy Eng: Mohammed Hussein 17
  18. 18. TraditionalWebApplicationsFigure 15.1 presents the typical interactions between the client and the server in atraditional web application, such as one that uses a user registration form.First, the user fills in the form’s fields, then submits the form (Fig. 15.1, Step 1).The browser generates a request to the server, which receives the request andprocesses it (Step 2).The server generates and sends a response containing the exact page that the browserwill render (Step 3), which causes the browser to load the new page (Step 4) andtemporarily makes the browser window blank.Note that the client waits for the server to respond and reloads the entire page with thedata from the response (Step 4). While such a synchronous request is beingprocessed on the server, the user cannot interact with the client web page.Frequent long periods of waiting, due perhaps to Internet congestion, have led someusers to refer to the World Wide Web as the ―World Wide Wait.‖ If the userinteracts with and submits another form, the process begins again (Steps 5–8).By Eng: Mohammed Hussein 18
  19. 19. Ajax-enabledwebapplicationinteractingwiththeserverasynchronouslyBy Eng: Mohammed Hussein 19
  20. 20. AjaxWebApplicationsAjax applications add a layer between the client and the server to manage communicationbetween the two (Fig. 15.2).When the user interacts with the page, the client creates an XMLHttpRequest object to manage arequest (Step 1).The XMLHttpRequest object sends the request to the server (Step 2) and awaits the response.The requests are asynchronous, so the user can continue interacting with the application on theclient-side while the server processes the earlier request concurrently. Other user interactionscould result in additional requests to the server (Steps 3 and 4).Once the server responds to the original request (Step 5), the XMLHttpRequest object that issuedthe request calls a client-side function to process the data returned by the server.This function—known as a callback function—uses partial page updates (Step 6) to display thedata in the existing web page without reloading the entire page.At the same time, the server may be responding to the second request (Step 7) and the client-sidemay be starting to do another partial page update (Step 8).The callback function updates only a designated part of the page. Such partial page updates helpmake web applications more responsive, making them feel more like desktop applications.The web application does not load a new page while the user interacts with it.By Eng: Mohammed Hussein 20
  21. 21. XAMPP webserver http://localhost/ Username: root PHP Script Language phpMyAdmin Database Manager MySQL DatabaseBy Eng: Mohammed Hussein 21
  22. 22. AppServ-webserver http://localhost/ Username: root PHP Script Language phpMyAdmin Database Manager MySQL Database22By Eng: Mohammed Hussein
  23. 23. AdobeDreamweaverCS5 You can use Adobe Dreamweaver CS5 or CS6 forthe basic steps involved in creating an attractive,functional website. In this course, you will learn to design a site layout,insert images and text, create links, and how toupload your site to the Internet.23By Eng: Mohammed Hussein
  24. 24. Organizing yourwebsite Project Name Images folder Html or php folder Index page Index page is the first page which the server will run thisindex file in a website. Index page extension could be html or php.24By Eng: Mohammed Hussein
  25. 25. HTMLStructure(tree)25By Eng: Mohammed Hussein
  26. 26. CommonHtml Tags<body><table><h1><div><title><frame><form><select> <option><head><a><html>< meta > < link > <script><label >&nbsp;< input >< img><p><br>26By Eng: Mohammed Hussein
  27. 27. HTMLTags <Title > : It is very important when it’s come toGoogle search and it will appear with blue link thatinGoogle results. <DIV> :To make sure the contents inside it will keepsizes. <Table>: represent data in table and sometimes canbe used like <DIV>.27By Eng: Mohammed Hussein
  28. 28. <FORM>Tag <FORM> tag which allows users to input data intothe web server by using methods. The <FORM> tag starts an HTML form and takesthe most important three attributes: TheACTION attribute specifies the URL of theprogram to invoke to process this form. The METHOD attribute send the form data to thetarget web page and it takes values either GET orPOST.28By Eng: Mohammed Hussein
  29. 29. Security(GET,POST) methods The hole security which allows users to change yourURL string, in order to have access to you data ofpage.29By Eng: Mohammed Hussein1. Post method is more secure.2. Post method sent data to httpresponse (body).3. Post method sent more data.4. Post method is not good forsearch but it is good for hiddendata.1. Get method is less secure.2. Get method sent data to pageaddress.3. Get method sent less data.4. Get method is good for searchcontent in order to let users toused it again.
  30. 30. <html><head><title>My Page</title></head><body><h1>Mohammed Hussein</h1><h2>Welcome</h2><b>To the course</b>:<p><tt>InternetProgramming</tt><p>on your computer.<p> <b>Press</b><i>The<font color="red">Next</font>Button</i>.</body></html>30By Eng: Mohammed Hussein
  31. 31. TheHTML RelationshipNodeTree31By Eng: Mohammed Hussein
  32. 32. HTMLFragment:(description)From the HTML we can say:1. The <html> node has no parent node; it isthe root node.2. The parent node of the <head> and <body>nodes is the <html> node.3. The <html> node has two child nodes;<head> and <body>4. The <head> node has one child node; the<title> node5. The <title> node also has one child node;the text node "Welcome"6. The <h1> and <p> nodes are siblings, andboth are children nodes of <body>7. The parent node of the "Hello world!" textnode is the <p> node.<html><head><title>Welcome</title></head><body><h1>Lesson one</h1><p>Hello world!</p></body></html>32By Eng: Mohammed Hussein
  33. 33. Image -Tag1. <IMG SRC="Koala.jpg" ALT="Black Sheep Ale" ALIGN="left" HEIGHT=150WIDTH=100>2. <IMG SRC="Koala2.jpg" ALT="Spitfire Bitter" ALIGN="right" height=250width=200>33By Eng: Mohammed Hussein
  34. 34. TableStructure(tree)34By Eng: Mohammed Hussein
  35. 35. Comparisons between Fixed set of tags Presentation oriented No data validationcapabilities Single presentation Extensible set of tags Content orientated Standard Datainfrastructure Allows multipleoutput formsXMLHTML35By Eng: Mohammed Hussein
  36. 36. WindowDHTMLObjectModel.appletsallanchorsembedsformsfiltersimageslinkspluginsstyleSheetsscriptsframespluginscollectionbodyscreendocumenthistorynavigatorlocationeventdocumentdocumentobjectwindowKey36By Eng: Mohammed Hussein
  37. 37. References