Introduction to Dreamweaver, HTML, and PHP
advertisement
An Introduction to Dreamweaver and PHP 1 Goals Our goals are •To become familiar with the Dreamweaver environment •To introduce some basic HTML •To introduce some simple PHP •To compare simple PHP (server-side) code with simple JavaScript (client-side) code We will do so by designing a page that looks like the following. 2 Possible Preliminary step 1: After a fresh install, Dreamweaver may ask if you want to work in the Designer or Coder version of its environment. 3 You can change your workspace preference by going to Edit/Preferences on the menubar and clicking on the Change Workspace button 4 Use the radiobutton to choose the desired workspace preference. Click OK and OK. 5 Designer View: 6 Possible Preliminary Step 2: After a fresh install, Dreamweaver may ask you for a serial number. 7 Starting the page: Next you can choose whether to open an existing page or create a new one. When creating a new page, you must select the type of page. 8 PHP versus HTML: The php extension • PHP code is embedded within HTML code. • However, a page with PHP code must have the php extension and not the htm or html extension. – Because the PHP is embedded within HTML, we will still often refer to the file as an HTML document. • Why the php extension? 9 Why the php extension?: A note about clients and servers • There are two main actors involved in viewing a webpage. 1. The viewer’s computer acts as a client. When surfing or navigating to a page, the client machine requests a page be sent. 2. With the webpage is associated a web server, which handles the request and delivers a response (the page) to the client. • The php extension informs the server that it must do more than just send the file. Moreover, there must be an associated PHP server to perform this extra work. 10 Result of starting: The Code view of the new page. Though we are making a php file, thus far we have a simple HTML file. 11 HTML • HTML stands for Hypertext Markup Language. – Hypertext refers to the presence of links in a page. The links allow a viewer to move directly to another document that may have a different location. – Markup Language refers to a coding system that indicates how a document is structured or how it should be rendered (using ordinary printable characters rather than special control characters). 12 HTML Tags • To distinguish between text and the marking up thereof, HTML uses tags. • HTML tags are keywords placed within angle brackets <>. • Many HTML tags work in pairs. There is an opening tag and a closing tag which impose their effect on the hypertext enclosed between them. – The closing tag has the same keyword as the opening tag but the keyword is preceded by a slash. 13 • The example above shows some HTML tag pairs. – The <html> and </html> pair surround the HTML document. – The <head> and </head> pair enclose some explanatory information regarding the document. – The <title> and </title> pair contain the document’s title. – The <body> and </body> pair house the information that is to be rendered on the page. • Note the hierarchical structure of tag pairs within tag pairs (also called nesting). 14 To change the page’s title, edit either textbox on the document toolbar or the text between the <title> tags. 15 To add a comment, place the cursor where you want the comment and go to Insert/Comment on the menubar. A traditional comment has no effect on either the structure or rendering of the document. It is seen only when the code is viewed and is used to describe the page or some feature thereof. 16 The comment is placed between the <!-- and the -->. 17 To change some of the page’s features such as the font or the background, go to Modify/Page Properties on the menubar. 18 The resulting dialog box allows one to set various properties. 19 E.g. use the dropdown list to make a choice of font family. 20 Click on the palette button next to Text color to choose a font color. 21 Color Codes • One could also enter the color code for one’s choice in the corresponding textbox. • In HTML color codes use the RGB scheme in which one determines the amount of red, green and blue that will be combined to make the color by choosing three numbers each between 0 and 255. • The numbers are expressed as hexadecimal numbers (base 16) and concatenated (placed one after another) and preceded by a pound sign #. 22 La Salle logo blue color code calculation Here we have used Adobe Photoshop to determine that Red=3, Green=45, and Blue= 87. 23 La Salle logo blue color code calculation 2 To convert from decimal numbers to hexadecimal numbers, you can use the calculation under Start/Programs/ Accessories/Calculator. Click on View/Scientific and enter the decimal number to be converted. And the click on the Hex radio button. The result should have two hexadecimal digits (0-9 or A-F). If the result has only one digit, a “0” should be placed in front of it. Putting the Red, Green and Blue results together yields La Salle logo blue: #032D57 La Salle logo yellow: #FFD100 24 Use the Browse button and the resulting dialog box to locate an image file to use as a background. 25 Path warning message 26 Embedded versus referred to • When one inserts an image in a Word document, the image is embedded into the Word document. As a result if you want someone to view the document, you only need to send one file – the Word document. • When one inserts an image in an HTML document, the image is referred to by the HTML document. As a result if you want someone to view the document, you must send two files – the HTML document and the image file. 27 Relative versus Absolute Path • When the HTML document refers to the image file, it provides a path so that the image file can be located. – A file’s path may be absolute (a complete (full) path or an explicit, full URL, e.g. http://www.lasalle.edu/index.htm) or relative (a shorter path that starts with the same location as the file doing the referring). • Image files are generally referred to by a relative address. – The previous warning message occurred because we had not saved the HTML file. Since the HTML file had no location, a relative address could not be provided for the image file. 28 Note the address given refers to the computer’s C drive. This address will probably be useless when the file is moved to a web server where it can be viewed by clients. 29 Style tags • The new additions were placed in a style tag in the head portion of the document. • The actual style code was then placed inside a comment within the style tags. • This approach is used to deal with various versions of browsers. – If the browser understands the style tag, it knows to look in the comment for the style code. – If the browser does not understand the style tag, then it will ignore the style code since it is placed in a comment. 30 Cascading Style Sheet • If one is making a website consisting of many web pages that will have the same style, then a better approach is to place this style code in a separate file called a cascading style sheet and have all of the individual pages link to it. • This way we only have to change one file to update the style of all of the pages. 31 Next use the File/Save As option on the menubar and the resulting dialog box to save the file. Recall it should have a php extension. (Do not have spaces in the file name.) 32 In this case, Dreamweaver automatically updated the path to a relative path. 33 One can see what the page will look like in Design view or see code and design simultaneously in Split view. 34 Use Insert/Table on the menubar and the resulting dialog box to make a table with 4 rows and 2 columns. 35 Highlight the table and click on the arrow next to Properties at the bottom to expand the Property inspector 36 Use the Property inspector to alter width, background color and alignment. 37 Click in the top cell and drag across to highlight both cells in the top row, then go to Modify/Table/Merge Cells. 38 Table with merged cells in Design and in Code View (merging is achieved by colspan attribute in code) 39 Table Tags • The main tags involved in rendering a table are – The <table> </table> tags, which “delimit the table” – that is, indicate where the table code begins and ends. – The <tr> </tr> (table row) tags, which delimit a row within the table. – The <td> </td> (table data) tags, which delimit a cell within a row. 40 Webopedia delimiter definition 41 Tag Attributes • Note that the merged cells were achieved using the keyword colspan as follows <td colspan="2">&nbsp;</td> • The above code is an example of a tag with an attribute. • In the newer (more compliant) rules for HTML code attributes are set using a equal sign and the value in quotation marks. 42 Place the cursor in the top row, go to Insert/Image on the menubar, and use the dialog box to locate the La Salle logo image file Note that the image preview tells one the size of the image. 43 Logo added to first row There is a web site navigation convention that the logo is a link to the home page. So let’s do that next. 44 Right click on the image, go to Make Link on the context sensitive menu, enter La Salle’s homepage in the URL textbox. Click OK. 45 Code for hyperlinked logo • The resulting code is <a href="http://www.lasalle.edu"> <img src="La-Salle-Logo-2003-540-7406.gif" width="558" height="144" border="0"> </a> – Where <a> is the anchor tag and its href attribute is set to the destination URL. – And where <img> is the image tag with its src attribute set to the image file name (a relative path). • Note that the image tag is not a paired tag. The newer rules for HTML would have you add a space and a slash just before the closing angle bracket > as shown below. <img src="La-Salle-Logo-2003-540-7406.gif" width="558" height="144" border="0“ /> 46 Aspect Ratio • If one were to change the image size attributes, width and height, they should be changed proportionately to maintain the image’s aspect ratio. – Both numbers should be multiplied (or divided) by the same amount. – Alternatively, if one attribute is left unspecified, then the other will be set to maintain aspect ratio. 47 Entering Text • In the remaining rows we will display the date using HTML, PHP and JavaScript. • In the first column, enter the terms “HTML”, “PHP” and “JavaScript” respectively. – In Design view, place the cursor in the appropriate cell and type. – Or in Code view, identify the appropriate <td></td> pair and type code between the tags. 48 Place the cursor in the second column, second row and go to Insert/Date on the menubar and use the dialog box to select the desired format. 49 HTML Date Code Version: just text. The file would have to be updated each day to display the correct date. 50 With the cursor in the second column of the third row, go to Insert/PHP Object/Code Block on the menubar. 51 Start typing PHP code print date(‘F j, Y’); Note the word print turned blue – it’s a keyword. 52 Webopedia keyword definition 53 Continue typing PHP code print date(‘F j, Y’); Note that not only does date turn blue to indicate that it is a keyword, but also after typing the opening parenthesis, a tip is displayed to inform you that a string corresponding to the date format is needed. The item in the square brackets is optional. 54 Finish typing print date(‘F j, Y’); Note that the format string is in single quotes and that Dreamweaver puts it in another color. 55 The semicolon delimiter • A delimiter is some character or set of characters (code) that is used to determine where one thing ends and the next thing begins. • PHP uses a semicolon to delimit statements. A statement is a small unit of code (an instruction) which has an established effect. • We inserted a PHP code block – a block is a set of statements. – Here our block will only have one statement. 56 The functions print and date • A function is a set of code with a name and a defined action. • A function may need some information to perform its action – this information is sent by using arguments (data passed to the function). • The arguments are usually placed in parentheses when the function is being called upon to perform its action. – The format string seen in the date is an argument. – The print function also has an argument (the thing to be printed) but it uses a different style with its argument simply following it on the line with no parentheses. 57 Go to Insert/PHP Object/Comment on the menubar 58 Anything typed between the /* and the */ will correspond to a PHP comment. This type of comment is known as a C-style multi-line comment because this was the way to designate a comment in the C programming language. Another style is to use two slashes // and anything following the two slashes on the same line is a comment. 59 Dreamweaver uses yet another color for comments. 60 The PHP icon Note that in Design, Dreamweaver inserts a PHP icon to indicate that there is PHP code in this portion of the page. This icon will not be seen by the viewer of the page. 61 Place the cursor in the 4th row, 2nd column, go to Insert/Tag. Choose HTML Tags and script in the dialog box. Click Insert. 62 Use the drop-down list to choose JavaScript as the language and text/javascript as the type. Click OK and then Close the previous dialog box. 63 Result: <script> </script> in which one places the JavaScript code 64 Enter the JavaScript code seen below for writing the date 65 Using Dreamweaver to transfer documents to web server • The document must be sent to a machine that is both a web server and a php server. • A standard way to move files around on the Internet is to use FTP (File Transfer Protocol). • This can be done using a browser or an FTP client (such as WS_FTP) or within Dreamweaver. 66 Go to Site/Manage Sites …, click on the New … button and click on Site from the list 67 Give the site a name and click Next. Then click the Yes radio button, choose PHP MySQL from the drop-down list and click Next. 68 Select the Edit locally, then upload radio button. Then click on the folder icon and choose a (local) folder for the site. 69 70 Fill in the information regarding the FTP connection. Username and password should be same as logon to the Explorer domain (password first 5 soc. sec., an underscore, and the first three letters of your username) 71 Click the Test Connection button 72 Enter the URL of the root and click on Test URL. 73 Check-in and check-out is used to manage a site with multiple authors. We’ll skip this feature here. Review information and click Done. 74 Click Done on the Manage Sites dialog box. 75 Now under the files tab, you can view the site (either local or remote). Or click on the Expand/Collapse button to see both. The Expand/Collapse button 76 Click on the Connects remote host button. (May need to click on + to expand folders.) 77 Use the Put files button to upload the files to the remote site. Click OK on dialog box. 78 Click on the Expand/Collapse button. 79 View the remote file in a browser. Click on View/Source to see the code. 80 Code the results from View/Source in browser. Note that we see no PHP code here. Before the web server responded with the file, the PHP server executed the PHP code (on the server side) which printed the date. It is this edited file that was sent by the web server to the client. 81 References • PHP for the World Wide Web, 2nd edition, Larry Ullman, Peachpit Press, 2004. • http://www.webopedia.com 82
