Just Enough Web Programming with XHTML, PHP, and MySQL April 2008.pdf

2 months ago
Full text

A c k n o w l e d g m e n t s

  Of course, the final product would not look as good as it does without the help of the copy editor, Kezia Endsley and the technical editor, Matt Telles. Mitzi Koontz also deserves a thank you for helping behind the scenes, so to speak, along with the rest of the publishing and support team.

A b o u t t h e A u t h o r

  in Computer Studies from the University of Derby, UK, and has written articles and books on a variety of subjects, fromsoftware engineering to video game design and programming. 54 Anatomy of the Document .

I n t r o d u c t i o n

  In particular, Just Enough Web Programming will provide: n n An understanding of Web publishing n A build-up of useful information over time n Reference chapters for later use, whenever you get stuck in the real world Examples using real-world services that would otherwise be difficult to leverageYou should be able to get started very quickly, by taking the basic outline principles and shading in the detail as they progress. A newcomer to the WorldWide Web and online publishing can start at the very beginning, and work right through to the end, whereas those who already have some experience can pick upadditional tips and tricks at the appropriate point.

Conventions Used in This Book

  Conversely, to indicate that there is both a choice of value andpresence, you’ll see the list in [ and ] symbols, thus: j Two j Three ][ OneThese are all examples where you’re given a list of values from which to choose and the value is optional; so you need only choose one if it is really necessary. I might also indicate that a specific constant value (one that does not change,and is imposed on the reader) should be used by specifying a list with a single item:< 1 >Again, this indicates that the digit 1 must appear in the piece of code, whereas the following indicates that the digit 1 might appear, depending on the specificneeds:[ 1 ]This last use is not very widespread in the various examples, but is included here to complete the picture.

How to Use This Book

  Along with your changing circumstances over time, the following general categories can be defined:n n Beginner: No exposure to Web design or development n Some knowledge: Some exposure to Web design Intermediate: Current Webmaster wanting to extend current knowledge Professional reference: Off-the-shelf solution seeker, with some exposure toHTML and related technologies The book has been written in such a way as to offer a good solution for each of these reader types. Those readers with no initial agenda, with the time to dedicate to reading and understanding, can just read the book from cover to cover and try out the variousideas and snippets as they go along.

Study Areas

  The final aim of the book is to provide enough information that you can create dynamic Web programming applications of your own, or leverage This study area is aimed at providing you with enough knowledge of the lan- guages used to describe the way in which Web pages should be rendered (HTML, XML, XHTML, CSS, and so on) along with some techniques for dynamic content generation in the browser itself. Client Side ScriptingCollecting together the material from the first three chapters, and adding the use of scripting within the Web page, this chapter is the first introduction to pro-gramming for the Web.

Choosing the Right Tools

  It is important, before reading the book proper, that you put together a series of basic tools that will allow you to use the examples from the book. These tools fallinto two principal areas: n Client tools Readers who have their eyes set on server side programming will need the server tools also; again, though, most of these are available out of the box for serveroperating systems.

Client Tools

  In this case,this includes certain keywords that are not part of the Web content that the end user will see, but which have relevance to:n n The browser The Web designer Figure 1.1 Syntax highlighting in SciTE The highlighting allows the designer or programmer to edit the content more easily, but is not carried through into the final content. More recent versionsof Internet Explorer can also be used to FTP files, but it might be a better option to download one of the many Open Source FTP applications that sport aWindows Explorer style interface and take advantage of a drag-and-drop Figure 1.3 Windows command-line FTP Figure 1.3 shows the help screen from the Windows command-line FTP application.

Server Tools You’ll read about the setup of the server and the role that it plays later on

  However, you do need to be aware that at some point, to get the most out of the book, you need to upload some server side scripts to a remote site and test them. The database that I use is the relational database MySQL; it is Open Source, well- supported, and integrates with the various tools, services, and scripting languagesintroduced in the book.

Using Open Source Resources

  If you follow the book through from the start to the end, you will first need to assemble some tools—just for editing and client sidedisplay in the first instance—and then you can dive right in with the first real Once you have learned how to deploy your first set of Web services, Chapter 10,‘‘Setting Up,’’ will point you in the right direction. 21 Then you read about the way that presentation of the content is described, followed by a discussion of some of the mechanisms that allow the exchange ofinformation between the computer displaying the content and the one serving it.

The Internet

  This information typically takes the form of: n n Requests for information or service n Responses containing that information or the result of a service Informational responses, that is, reasons why the service or information could not be deliveredThe information is exchanged in a client/server model; in other words, clients(users) connect to servers on the Internet and use their resources by placing requests with or without data. In other words, when using one of the first kinds of chat rooms, lag was the term used for the time delay between the user typing thecommand and receiving confirmation of the command being executed.

Servers and Protocols The Web is still a client/server environment, based on requests and responses

  These conversations between the browser and the server needed a standard framework for communication, and some protocols were established in order toprovide a standard way to exchange information. The protocols also provide for a set of standard responses 500—Server error, a problem on the serverThe Web server itself is just a piece of software that runs on the machine and processes the requests through the network interface.

Search Engines

  Each indexingsession builds a database that can be searched on demand, with pages returned that fit the query made by the surfer—based on the evaluation of an algorithmusually proprietary to the search engine itself. These rankings are based on the evaluation of the algorithm with respect to the rules that the search engine applies to evaluate the relevancy of the informationcontained in the database.

Internet Service Providers

  The ISP’s role is to give Web surfers the possibility to access the Internet using equipment that is available off the shelf. Consumers began to express a wish to participate in the production of information beyond posting to Usenet newsgroups, and the Web hostingservice was born.

Web Hosting

  In other words, HTTP gives you the possibility to offer Web pages over the Internet, and FTP gives you the possibility to uploadpages to the server so that they can be shared with the Web at large. That is the role of the DNS (email has a similar mechanism known as MX—mail exchange) and the final IP address that the domain name resolves to is theaddress of the Web host.


  The obvious disadvantage with this is that you have spent so much time trying to make sure that the visitor can find the site that asking them to clickon an advert and leave the site seems to run against common sense. The model, however, does work, if only because a proportion of traffic to your sitewere looking for something else that they might just find among the adverts The visitor will then be enticed (you hope) by the product or offer, and proceed to the advertiser’s site where the sale is affected.

Client/Server Programming

  This is the flexibility and power of the mark-up principle on the one hand, and possible disadvantage, as you need to test the implementation on many differentplatforms to be sure that the appearance is the same. There are different flavors of mark-up, but the main language that people use to describe the presentation of content is calledHTML.(As a side note, and for those who are interested, HTML was not the first standard that the W3C tried to establish.

Introduction to HTML

  This job is made easier by the fact that browserapplication providers tend to be somewhat looser in their adherence to standards than in the past, coupled with techniques such as server side scripting thatgenerate much of the HTML at the same time as the content is presented. However, the end result might not always be the same on all platforms, including that of the designer—it is only there to give details of the intention ofthe designer with respect to the content that is being presented.

Introduction to Style Sheets

  To keep the example simple, assume a vertical MenuSection that is 25% of the screen width, a middle ContentSection that is 50%, and an AdvertisingSectionthat is 25% of the available screen width. This level of dynamic generation is also often a result of data exchange with the server, and again, it can be either the client or server that generates the resultingHTML.

Data Exchange

  POST The superficial difference between this and the mechanism is that you do not see the data that is being posted to the server as it is part of the payload datathat follows the HTTP request. The W3C indicates that the GET request POST should be used to retrieve information stored on the server, and that the request should be used to cause some form of permanent change on the server.

Form Processing

  The simplest kind of form is a collection of input areas, with a button markedSubmit, and is aimed at providing a way for the user to input information to be sent to the server. This is known as asynchronous data exchange—you do not have to reload the page in order for it to become apparent, but the data that is retrieved from theserver has a direct effect on the contents of the page.

Introduction to XML

  For example, the server can offer the feeds, but the client needsto be able to display the elements that are contained in each entry to the user in a way that enables them to look at them in a meaningful manner and possibly clickon links that are included as part of the feed information. However, it is a part of some standard scripting language implementations that allow the Web programmer to make a request using a special kind of HTTPrequest—XhttpRequest—and process the data that is returned.

Client Side Scripting

  Just as a reminder—client side scripting is a way to extend the functionality of aWeb page beyond static data by requesting that the user agent (the Web browser, for example) do some additional processing on behalf of the Web programmer. Or, you might use a cookie to store information about the user’s last visit to the site and use that to try and help the user navigate through the site whenhe or she returns.

Server Side Programming

  The difference between a client side script, such as a JavaScript which is also embedded in the page, is that the Web server will interpret the PHP that itencounters and send the result of that processing to the client rather than the text of the script itself. Although it was designed to be easy to deploy, the HTML tag collection is large, and it is unlikely that you will be able to remember all the tags at a single sitting.

The Document Model

  Inside that, there is document information that tells the browsermore about the actual HTML (including the version and character set), as well as the title of the document, usually displayed in the title bar of the browser. <tag_name>Content inside tag</tag_name> You almost always need a start and end tag (the end tag being the one that has the tag name preceded by a forward slash, /), and whatever is in between is con-sidered to be the target to be modified by the tag.

Anatomy of the Document

  In the HEAD section you put all the content that is information to the browser(W3C calls this the user agent), but which is not intended to be displayed to the end user. As long as you include the DOCTYPE information, along with the reference to the Document Type Definition (DTD)file, the browser knows where to find the exact definition of the version you are using.

Style Elements

  The HTML designer should not try to circumvent the stricthierarchy; if text is to be given a specific visual aspect to set it apart, but is not a heading, a heading tag should not be used. With the advent of stylesheets, the specific font handling tags have become deprecated, but you still have the possibility to use them, and they can be easier in many cases to deploy thanstyle sheets.

Hyperlinking The power of the Web, of course, is in being able to link content together

  Whether it is a page, an image, a video, a sound, or a zip file containing a software release, hyperlinking is a vital part of the HTML standard. You need to remember, how- http:// ever, that the protocol is only one of a collection.


  A clickable image simply allows the users to click on a part of it and be directed to a new resource. It is usually posted to the server, as discussed in the precedingchapter, but it can also be processed locally if the data is not designed to be relayed to the server, and the result displayed in the browser using client sidescripting.

HTML Short Reference

  It is also very helpful, even if you are goingto develop content in XHTML, to understand the way HTML is constructed, as most of the principles carry through. Before looking at the actual tags that will enable you to create marked-up con- tent, you need a grounding in the basics, as well as some of the rules for using thetags in practice.

Deprecated Usage

  Using deprecated HTML carries a very minimal risk that the content will not be correctly rendered in the years to come. However, following the principle that thecontent is designed to be around for a given period of time, and also taking into account the fact that browsers will try to remain as backward compatible aspossible, for commercial reasons, I am quite content to include deprecated usage where such is useful.


  In fact, there are some sets of tags that can be overlapped, which means that there is an area that is common to both tags, as well as two areas outside: <tag_one>Content <tag_two>Other Content</tag_one> More Content</tag_two> In the previous example, if you assume that tag_one turns on bold text, and tag_two italics, you would expect Content to be in bold, Other Content to be in More Content bold italics, but to be in italics only. The last two HTML tags that you need for text formatting are: n n SPAN DIV The purpose of these tags is very similar—to provide bulk formatting for a section of text, which can be adjusted using nested tags such as <B> , <I> , and so <SPAN> <DIV> on, to enhance the base formatting specified in the or tag.

Flow Formatting

  So, to prevent this happening for content that you want to be aligned otherwise, you can specify a VALIGN value of: n n TOP n CENTER BOTTOM As you are probably starting to appreciate, leaving the default behavior (or assuming any default behavior at all) for layout is inadvisable, so you should getinto the habit of always specifying the layout (alignment in this case) for HTML where it is of importance. To turn the image into a client side imagemap, you need to specify the USEMAP <MAP> attribute and insert a reference to the element that contains the specific information relating to the areas of the image that can be clicked.

Document Linking

  You can also specify a link to a page that is in a different folder, relative to the one that the source page is in: <A HREF="target_folder/target_page.html">Link Text</A> If the target page is on a different server altogether, the final possibility is: <A HREF="http://www.mycom.com/target_folder/target_page.html">Link Text</A> In this last example, the target folder might not be required, depending on theURL to the page being linked to. If you need to link directly to this point in thepage from outside the page, the external reference form can also be used: <A HREF="http://www.mycom.com/target_folder/target_page.html #internal_ ref_name"> Link Text</A> This anchor will be underlined and highlighted in the same way as any other anchor, and when clicked, it will jump to the appropriate place in the targetdocument.

Common Symbol Codes

  The following is an example, with the layout on the left, and the HTML on the right:Home Home<BR/>Services Services<BR/>Email &nbsp;&nbsp;Email<BR/>Website &nbsp;&nbsp;Website<BR/>In order to indent the Email and Website items, I have inserted two non-breaking spaces in front of each item. This is done in a similar manner as the character entity name: &#number; If, for example, you want to insert the character code for a non-breaking space, it would be: &#160; # Note the use of the in this case to signify a decimal number.


  103 Styles solve this very easily—they provide an addition to the Web programmer’s toolbox that’s XML compliant (styles can be used with both HTML and XML/ XHTML) and provides an interface to set any of a number of properties, as well as a way to create named variations (classes) of specific tags. n <head> Inline (at the same time as the tag, such as ) n Internally, as part of the of the documentExternally, in style sheets External style sheets are a good idea if you need to be able to swap between styles(think of the different Blogger.com layouts, for example) without changing the actual XHTML that defines the content.

The Document Model, Revisited

  TheDocument Model can be seen as a tree, where the document is at the bottom, and each block element ( <div> , <p> , heading, table, list, and so on) can be a branch, orleaf, on that tree. The <font> tag has no default behavior, andso you can attach properties to it: <font face="Arial">This is Arial Text</Font> Styles give access to all properties, so that they can be changed, but to prevent collisions with existing definitions, you can give any derived styles new names,much as you can in Word.

Tags and Styles

  Each tag in an HTML document can be altered with the application of a style, and that style will override any default behavior (or augment it) that the tag mighthave had. Now, you coulduse HTML tags such as the font tag to change that color, but this means inserting h1 So, to create a specialization of the class, you would write: h1.my_heading { color: "blue"; } This would turn all the text in h1 tags, which were indicated as belonging to the my_heading class, blue.

Derived Objects

  You can change the flow, layout, position, and size, and even adjust the para- meters so that the resulting rendering might not look much like a list or table, butthe behavior will remain the same: the content in the <ul> must be contained <li><tr> within tags, for example, and each row of the table ( ) must still contain cells ( <td> ). So, as before, you create a statement such as: h1.my_heading_1 { color:"blue"; } Exactly where this is done is the subject of the next section of this chapter entitled‘‘Setting Up Style Sheets.’’ Before you look at that, let’s review two common, powerful, and easy-to-use tags: <div> and <span> .

Positioning Properties

  Position information supplied is considered to be an offset from the containing block, so if a value of 10px is supplied for the left property of a contained paragraph, the paragraph will be offset by 10 pixels from the left side of the containing block. For example, if you redefine the floating paragraph from the previousexample as: p.floating_para { float:right;width:50px; border:2 dotted white;text-align:right; background-color:silver;margin: 25px; } This yields the result in Figure 4.5 that you can compare with Figure 4.4; the top- rightmost edge of the floating paragraph is offset by 25 pixels from the outer edgeof the containing division.


  If the first letter of eachwork of the first line of a block should be in uppercase (for example), you can use: Figure 4.8 First line and first letter If you assume that the very first letter should be given extra importance, you can add the following: div.article:first-letter { font-size: 14pt; } Sometimes, you will need to add other properties to make the text flow better, which is where having better (more precise) control over the box formattingcomes into play. Without the float specified in the division, the effect is not quite the same, and you might like to experiment with different floats for the first letter to see how thetext flows around it with different settings of float .

CSS Objects and Properties Short Reference

  The first of these is the font-styleproperty, which allows you to select among the following: font-style: normal, italic, or oblique In most browsers, italic and oblique are rendered in the same way, as are the different weights that can be set with font-weight . Figure 4.11 Font sizes To make sure that all the lines are spaced with reference to the largest font used in the entire paragraph, and not space each line according to the size of the textcontained within, you must set the line-height property: line-height: pt size, multiplier or percentage The pt size is the size in points.

Dokumen baru

Aktifitas terbaru

Download (449 Halaman)


Beginning Web Programming With Html Xhtml Css Php And Mysql Oo Programming With Php Php Dan Mysql Pdf Modul 9 Web Programming Mysql Php Dan Mysql Untuk Web Just Enough Structured Analysis Modul 6 Web Programming Php Turn Based Board Rpg With Javascript Php And Mysql Chapter 4 Working With Files And Directories Php Programming
Show more