1 / 53

Introduction to the Internet, the World Wide Web (the Web), PHP, MySQL , and HTML Review

Introduction to the Internet, the World Wide Web (the Web), PHP, MySQL , and HTML Review. Computer Network. Computer network: Two or more computers that are connected by some type of communication media to enable resource exchange/sharing and communication Communication media:

kalli
Download Presentation

Introduction to the Internet, the World Wide Web (the Web), PHP, MySQL , and HTML Review

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to the Internet, the World Wide Web (the Web), PHP, MySQL, and HTML Review

  2. Computer Network • Computer network: • Two or more computers that are connected by some type of communication media to enable resource exchange/sharing and communication • Communication media: • Wire (cable) • Wireless (wave) • Resource: • File (e.g., Web pages) • Printer

  3. Client/Server Network • Client/Server Network: • A network • where some of the computers are clients, • some other are servers, and • some others are both clients and servers

  4. Client and Server • Servers: • Computers that provide networking services (e.g., sharing files, sharing Web pages) to other computers • Clients: • Computers that access/request and receive networking services from servers

  5. Networking software • Server program: program that must be run in a computer so that this computer can give/providenetworking services to other computer(s) in the network • Example: Web server program (e.g., Apache) • Client program: program that must be run in a computer so that this computer can request and receive networking services from server • Example: Web client program (e.g., Mozilla Firefox, Internet Explorer)

  6. How Does a Network Work? • A user uses a program (client program) in a computer (client computer) to send request message (query) to a program (server program) in another computer (server computer) over a wire or wireless communication medium • After the program in server computer receives the message, the program will process the message by searching and getting the requested file, and sending it to the requesting program in client computer (response)

  7. How Does a Network Work? (e.g., Web page sharing scenario)

  8. The Internet • The Internet: • The name of the largest computer network in the world • Client/Server network • Used by a lot of applications (e.g., email, FTP, WWW)

  9. The World-Wide-Web (WWW) • The WWW is a network of Web clients and Web servers that can exchange documents, pictures, videos, audio, and files via the Internet • Web servers are computers (software and hardware) that are capable of providing information (e.g., documents, files, audio, video) to Web clients • A Web server processes the requests and returns the requested documents, pictures, videos, audio, and files to the client • Web clients are computers (software and hardware) that are capable of requesting information (e.g., documents, files, audio, video) from Web servers • A Web client requests the documents, pictures, videos, audio, and files that are located in the server

  10. The World-Wide-Web (WWW) • To be a Web server, a software called HTTP Daemon (HTTPD) or Web server software must be installed in a computer • Examples of HTTPD are Apache and Internet Information Services (IIS) • To be a Web client, a software called Web browser must be installed in a computer • Examples of Web browser are Internet Explorer and Mozilla Firefox

  11. The World-Wide-Web (WWW) • Information exchange in the WWW: • Client sends a request for information to the Server. The server is identified by using the IP address/domain name of the Server. • How to send a request message to a Web server? • Open a Web browser • Type the URL: e.g.,http://www.uah.edu/colleges/adminsci/index.html • http: the protocol used to exchange information in the WWW • www: name of the computer • uah.edu: registered domain name • /colleges/adminsci/index.html: file address • After receiving the request, the HTTPD in the Server searches the requested file and returns it to the client • After receiving the requested file, the Web browser opens it

  12. Your Web browser sends a Web page request The World-Wide-Web (WWW) • Information exchange in WWW: Your computer running Web client software/Web browser (Internet Explorer, Mozilla) Server running a Web server software (e.g., Apache, IIS) The Internet The Web server sends back the Web page requested Web Server Web Client

  13. The World-Wide-Web (WWW) • Although the WWW can be used to exchange different types of information, it is mainly used to exchange: • Web pages (HTML documents) • Documents formatted by using HTML • Contains hyperlinks (i.e., texts or imagesto open other Web pages) • Web site: • A group of Web pages belonging to an individual/organization • Web page: • A single HTML document as part of a Web site • Home page: • The first page of a Web site

  14. The World-Wide-Web (WWW) • Web sites: • A collection of HTML files (and other types of information e.g., MS Word documents, MS PowerPoint documents) • Publishing a Web site: • Making a Web site accessible from any computer connected to the Internet • To publish a Web site, the Web site files (the HTML files) must be stored in the public folder in a Web server

  15. The World-Wide-Web (WWW) • PHP (PHP Hypertext Preprocessor) and MySQL • PHP is a programming language to write a program to create a Web application (e.g., an application to enable Web server to manipulate data that are stored in database (MySQL), an application to enable Web server to manipulate files that are stored in the Web server, an application to enable Web server to interact with an email server to send an email message) • MySQL is database management software

  16. Your Web browser sends a Web page request The World-Wide-Web (WWW) • HTML Information exchange in WWW: Your computer running Web client software/Web browser (Internet Explorer, Mozilla) Server running a Web server software (Apache, IIS) The Internet The Web server searches the Web page requested The Web server sends back the Web page requested Your Web client software/Web browser will execute the HTML code in the Web page Web Client Web Server

  17. Your Web browser sends a Web page request (the Web page contains PHP code to manipulate MySQL database) The World-Wide-Web (WWW) • HTML + PHP + MySQL Information exchange in WWW: Your computer running Web client software/Web browser (Internet Explorer, Mozilla) Server running a Web server software (Apache, IIS) + PHP server + MySQL server The Internet The Web server searches the Web page requested. After finding it, the PHP server executes the PHP code that manipulates the MySQL database The Web server sends back the Web page requested and the result of the PHP code execution Your Web client software/Web browser will execute the HTML code in the Web page and incorporate the result of the PHP code execution with the result of the HTML code execution Web Client Web Server

  18. The World-Wide-Web (WWW) • HTML + PHP Information exchange in WWW:

  19. HTML

  20. Basic HTML • HTML is a formatting language • It is used to create an HTML document (Web page) • The document is written in plain English and marked-up by using HTML flags • HTML code is executed by Web browser • Online HTML tutorials: • http://www.htmlgoodies.com/primers/basics.html • http://www.w3schools.com/html/

  21. What is the relationship between HTML and PHP? • PHP program/script can be embedded within HTML code • HTML code can be embedded within PHP program/script

  22. What is the relationship between HTML and PHP? • PHP program/script can be embedded within HTML code • Example: <html> <head> <title>Example #1 TDavid's Very First PHP Script ever!</title> </head> <?php print “Hello, World!” ; ?> <body> </body> </html>

  23. What is the relationship between HTML and PHP? • HTML code can be embedded within PHP program/script • Example: <?php Print “<FONT color="blue"><CENTER><H1> My first PHP sample program </H1></CENTER></FONT>” ; ?>

  24. What is the relationship between HTML and PHP? • We can switch back and forth between HTML and PHP at any time • Example: <?php PRINT “Hello, World” ; ?> <BR> <?php PRINT “Hello, World, again!” ; ?> <H1> Another HTML </H1>

  25. Basic HTML • How to create a Web page by writing the HTML code? • Open Notepad (or any HTML code editor) • Write the HMTL code • Save the document as HTML file • File > Save As … > • Specify the location • Specify the name of the file • Add .html or .htmafter the name • Change the “Save As Type: ” into “All Files”

  26. Basic HTML • How to “execute” the HTML code (How to see the Web page that is created by the HTML code)? • Open Web browser (e.g., Mozilla Firebird, Internet Explorer) • File > Open • Locate and open the HTML file

  27. Basic HTML • HTML command is called FLAG or TAG • Most HTML tags are in pair (consisting of start tag and end tag) • Examples: • <B> Text to be formatted </B> • <I> Text to be formatted </I>

  28. Basic HTML • Some tags have one or more ATTRIBUTES (and ATTRIBUTE VALUES) • Examples: • <A HREF=“http://www.htmlgoodies.com“> Text </A>

  29. Basic HTML • HTML documents should start with <HTML> and end with </HTML> • HTML formats plain text by using tags/flags • <B>Bold</B> : to format a text into bold text • <I>Italic</I> : to format a text into italic text • <B><I>Bold and Italic</I></B> : to format a text into bold and italic text • <HR> : to create horizontal line • <BR> : to break a text and jump to the next line

  30. Basic HTML • <H1> Text </H1> are used to write headings • <CENTER> Text </CENTER> are used to center a group of texts or images • &nbsp : to add a white/blank space

  31. Basic HTML • <A HREF="http://www.htmlgoodies.com">Click here for HTML Goodies</A> : to create a hypertext • <A HREF=“mysecondpage.html">Click here for second page</A> : to create a hypertext • <IMG SRC="image.gif"> : to display an image • <A HREF="http://www.htmlgoodies.com"><IMG SRC="homepage.gif"></A> : to create a hyperimage

  32. Basic HTML <TABLE> <TR> <TD> Marcia </TD> <TD> Carol </TD> <TD> Greg </TD> </TR> <TR> <TD> Jan </TD> <TD> Alice </TD> <TD> Peter </TD> </TR> <TR> <TD> Cindy </TD> <TD> Mike </TD> <TD>Bobby </TD> </TR></TABLE>

  33. Basic HTML • <TABLE> : to start table creation • <TR> : to create a new table row. Notice that you need to end every table row with an </TR> • <TD> : to create a new table column that displays certain information. Notice that you need to end every table column with an </TD> • </TABLE> : to end table creation

  34. Basic HTML <!-- --> : to create a comment (a statement that will NOT be compiled/executed as a code) • Example: <!-- This is a comment -->

  35. Frame • Frame is used to display multiple Web pages (multiple HTML documents) on a single Web page • <frameset rows = "*, *" cols = "*,*">: • Used to split the page into multiple rows and columns • The * refers to a single row or column (e.g., “ rows = *,*,*,* ” will break the page into 4 rows) • * can be substituted with number or percentage to specify the size of the row or column • <frame name = “frame1” src = "index.html" frameborder = "0"> • <name> is used to specify the name of the frame (cell) • <src> is used to specify the HTML document that must be displayed in each frame • <frameborder> is used to specify the border size • <frame src = "Page2.html" scrolling = "no" frameborder = "0"> • <scrolling> is used to display/hide the scroll bar

  36. Frame <html> <frameset rows = "*, *" cols = "*,*"> <frame name = “frame1” src = "index.html" frameborder = "0"> <frame name = “frame2” src = "Page2.html" scrolling = "no" frameborder = "0"> <frame name = “frame3” src = "index.html" frameborder = "0"> <frame name = “frame4” src = "Page2.html" scrolling = "no" frameborder = "0"> </frameset> </html>

  37. Creating Form • The following Web site contains detailed information about Form Command • http://www.w3.org/TR/html4/interact/forms.html • http://www.webcom.com/html/tutor/forms/example_list.shtml • http://www.echoecho.com/htmlforms.htm • Form • A Web page that contains controls • Form can be used to allow the user to enter input to PHP program • Controls • Icons/small images to allow the user to interact with a form • Examples: Text box, Submit button, List box, and so on

  38. user inputs values PHP Code OUTPUT HTML Form processing the values + data Dynamic Webpage data MySQL Database HTML Form, PHP Code, and MySQL Database

  39. Creating Form • How to create a Form? • A form starts with: • <Form Method = “POST” Action = “file_name.php> • A form ends with: • </Form> • Method : to define how to submit (pass/forward) the data set that are entered by the user on the form • Post : Passing form data (form data are NOT embedded in the URL) • Action: to specify the file to which the information on the form controls is submitted/passed/forwarded for processing when the submit button is clicked

  40. Creating Form • How to create a Form? • <Input Type = > • “Text” will create a single line text box • “Checkbox” will create a check box • “Radio” will create a radio button • “Submit” will create a submit button • <TextArea> </TextArea> = multi-line text box • <Select> </Select> = list box • You have to give each control a NAME • <Input Type = “Text” Name = “txt1”> • <Input Type = “Submit” Name = “sbm1”>

  41. Creating Form : Creating a Text Box • Single Line Text Box: • Used to allow the user to type SINGLE LINE TEXT input • SIZE : to set the width of the text box • VALUE : to set the initial value displayed on the text box

  42. Creating Form : Creating a Check Box and Radio Button • Check Box: • Used to allow the user to select ONE or MORE options • VALUE : used to set the value that is passed to the program whenever a check box is checked • Radio Button: • Used to allow the user to select ONE option • A set of radio buttons must have the same NAME • VALUE : used to set the value that is passed to the program whenever a radio button is selected

  43. Creating Form : Creating a Reset Button and Multi-Line Text Box • Multi-Line Text Box: • Used to allow the user to enter multi-line text input • Rows : used to set the height of the textbox • Cols : used to set the width of the textbox

  44. Creating Form : Creating a List Box • List Box: • Used to allow the user to select ONE option <option value = “Value1”> item_A </option> • Value1 = the value passed to the program whenever item_A is selected

  45. Creating Form : Creating a List Box • Submit Button: • Used to allow the user to submit all information in a form to a program file specified in the ACTION, and to trigger/initiate actions that can be performed by the program in the program file

  46. Creating Form : Group Box • Group Box: • Used to group a set of controls • <FieldSet> </FieldSet> • <legend> </legend> = the title of the group box

  47. Assignment 1

  48. Assignment 1 • Write the HTML code to create the above form (format your form as the above form; include all of the initial values). • Use table to organize various controls in your form (You will have to use 1 x 3 table i.e., 1 row, 3 column table to display the “Name”, the “Address”, and the “Payment details” controls in three columns) • The credit card radio buttons must belong to the same group; hence, there is must only be one button that can be clicked at any time (there must be no two or three or four buttons can be selected at the same time) • The Title list-box/drop-down menu must contain at least 4 items: Mr., Mrs., Ms., Dr. • When the submit button is clicked, the information in the from controls must be passed to a PHP file called “customer.php”

  49. Assignment 1 • When and how to submit the assignment? • Insert your first name and last name on the upper left hand corner of your page • Print the HTML code and the output (the form) • Submit the code on Thursday, January 21, 2010

  50. What will you learn in this class?How to use PHP and MySQL to develop various Web applications

More Related