1 / 98

COM 366 – Web Database Development

COM 366 – Web Database Development . Introduction to XHTML and PHP. Module Aims. Aims

maren
Download Presentation

COM 366 – Web Database Development

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. COM 366 – Web Database Development Introduction to XHTML and PHP

  2. Module Aims • Aims • To increase the student’s awareness of current developments in the field of web database technologies and provide an understanding of the problems associated with the creation of web developments that use these technologies. • To develop the skills necessary to create interactive, professional data-driven web developments that could be used in different types of businesses and e-commerce environments and that are produced using open-source technologies

  3. CW Description

  4. Module & CW Information • Detailed CW and Module Information can be found on the Module Website: http://www.scis.ulster.ac.uk/~jose • In General it will take between 6 and 10 hours of work to complete each practical

  5. Introduction to PHP & MySQL Laboratory Setup

  6. PHP - MySQL • Commercial Sites: • Apache • PHP • MySQL • XAMP (WAMP – MAMP) • Required Tools • Text Editor or a Program like Dreamweaver

  7. Installing XAMP • If you are working from your laptop, it is time to download and install XAMP: • Windows: Download and Install WAMP Server • MAC: Download and Install MAMP • Leave all the settings as default except the browser (change to your preferred browser: I recommend Chrome, Firefox or Safari) • Once Installed, your files for this module need to be stored in the following folder (also applies to the lab machines: c:/wamp/www • Task: Create a folder with your name inside this folder

  8. Stopping IIS • Next step (only if you are working in the lab) – you need to stop IIS – go to: • CONTROL PANEL  ADMINISTRATIVE TOOLS  Internet Information Service (IIS) Manager 

  9. Stopping IIS • At the top right hand side of the screen click STOP

  10. Configuring XAMP • Now is time to Start WAMP Server: • On the desktop click start wampserver; a red “w” icon should appear in your taskbar, it should go from red, to orange to green – once it is green we are ready to go

  11. Starting WAMP Start WampServer TaskBar – Red “W”

  12. Starting WAMP • Right click on the icon and select: localhost (this should open your browser with the WAMP welcome page)

  13. WAMP in Browser

  14. Configuring Dreamweaver • If you are working with your laptop, and don’t have Dreamweaver, then use any available text editor; just remember to save the files with the correct extension and NOT as TEXT • In Dreamweaver, you will need to create a site to store your WAMP files:

  15. Dreamweaver • On the Dreamweaver MENU BAR, click: • SITE  New Site

  16. Setting the Site • On the Site Section name the site, e.g. john • Select the local folder (as in the figure using the disk to find it) • Then Click on “Servers” (second menu down on the left)

  17. Setting the Server • Click on the “+” sign under the window • Change the Connect using to Local Network • Use the settings shown on the figure

  18. Your Files • Click on the “Testing” box and Save

  19. First XHTML

  20. XHTML CODE – PAGE STRUCTURE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>YOUR DOCUMENT TITLE</title> </head> <body> … YOUR CODE … </body> </html>

  21. HTML & XHTML • HTML • All Web pages are made up using HTML (Hypertext Markup Language) • Every Web Browser turns HTML code into the stylized web page seen by the user • XHTML • The World Wide Web Consortium (W3C) – which is the group responsible for defining HTML and other protocols created XHTML as a transition between HTML and XML

  22. XHTML • XHTML is almost exactly like HTML, with the following differences: • All tags are written in lowercase • Nested tags must be well formed: • i.e. you can’t write: <div><p>text</div></p> instead you should write: • <div><p>text</p></div> • All tag attributes must be quoted: • HTML: <table border=2> • XHTML: <table border=“2”>

  23. XHTML • All tags must be closed: • Many HTML tags have an open and close tag, i.e. <div class=“class1”>text</div>, but a few don’t have implicit closing tags: i.e. <hr>, <br>, <img> ad <input> • To make this valid XHTML tags, you need to close them by adding a space and a slash at the end, like this: • <br /> • <hr /> • <img src=“file.png” width=“100” height=“50” /> • <input type=“text” name=“age” size=“3” />

  24. First XHTML Page Fill in the Title of the page (inside the <header></header> tags) <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Welcome to This page!</title> </head> Fill in the Body of the Page: <body> <h1>This is a Basic XHTML page</h1> <br /> <p>Even with <span style="font-size:150%;">some</span> decoration, it's still not very exciting.</p> </body> </html>

  25. Open the Page on the Browser The URL for your page is: http://localhost/yourfoldername/welcome.html

  26. Styling • Styling of XHTML is done using CSS (Cascading Style Sheets) – They will be covered in detail in Final Year – COM621

  27. Introduction to PHP

  28. Initial PHP • To create a PHP script you should start exactly as if you would if you were creating an XHTML document from scratch • In Dreamweaver: • File New PHP Document • This will create a PHP document that looks EXACTLY as the Blank XHTML document • Understanding the reason for this is vitally important

  29. How PHP Works • PHP is a server-side language; the code that you write in PHP resides on a host computer that serves Web pages to Web Browsers • When you go to a website (www.google.comfor example), your Internet Service Provider (ISP) directs your request to the server that hosts the www.google.com information • The server reads the PHP code and processes it according to its scripted directions

  30. How PHP Works PHP creates an HTML page on the fly based on parameters of your choosing

  31. Conceptual Summary PHP • PHP is a server-side technology • It does not run on the client (which is what the web browsers are) • However, the browsers understand HTML (and JavaScript and CSS), so • PHP will be used to generate the HTML that runs in a Web Browser • PHP is free, open-source code

  32. PHP • There are 3 main differences between a standard HTML document and a PHP document: • PHP scripts should be saved with the .php file extension • The PHP code is placed within the following tags: • Start tag: <?php • End tag: ?> • PHP Scripts must run on a PHP-enabled Web server • HTML pages can be viewed on any computer • PHP must always be run through a URL (i.e. http://something/page.php)

  33. PHP • In the lab and on your laptop, WAMP will do the job of a web server. WAMP/MAMP stands for: • Windows/Mac (Operating System) • Apache (web server technology) • MySQL (database technology) • Php (PHP:Hypertext Processor/HTML embedded scriptitng language) Invented by Rasmus Lerdorf in 1994

  34. First PHP Script • This script will be useful to determine if the server being used, supports PHP • Code: • On the Head section of your new PHP: <title>First PHP Script</title> • On the Body Section of your new PHP: <body> <?php phpinfo() ?> </body> • Save the Script as: phpinfo.php

  35. Testing the Script • Once the file is saved in the WWW directory (htdocs for a MAC) inside your folder, open your favourite web browser and open the following URL http://localhost/yourfolder/phpinfo.php

  36. Programming PHP • Comments and White Space • PHP comments are done placing two slashes in front of the text to be commented or enclosing multiple lines of comments in the /* and */ • A commented line will not be processed by the PHP server • It is good practice to use white space (blank lines, tabs, and other extra space) to make your code easier to write, read and maintain

  37. Programming PHP • Well written scripts: • Place blank lines between sections of code • Nest elements one tab-stop in from their parent element • Generally space out the page nicely • These techniques are the trademark of professionally written code

  38. Code Comments all PHP script must be enclosed between these tags <?php // comment lines are indicated by the // symbol /* Multiple line comments can be enclosed within these marks. Usually used to describe the functionality of a part of your code */ statements here; // note: all PHP statements end with a semicolon ‘;’ ?>

  39. Variables • A variable is best thought of as a container for data • Once a variable has been assigned a value, that variable can be altered, printed to the browser, saved to a database, emailed, etc. • Variables in PHP are flexible: you can put data into a variable, retrieve it (without affecting the value of the variable), put new data in and continue the cycle as necessary

  40. Variables • Variables in PHP are also temporary: • They only exist (have value) for the duration of a script • Once the user clicks a link or submits a form, the variables cease to exist unless you take special measures to extend their longevity

  41. There are some variables that are predefined in PHP (you don’t need to create them again). • i.e: $_SERVER, $_SESSION, $_COOKIE, etc. • The print_r() function can be used to view the value stored in a variable • Create a new PHP file named: variables.php and place the following code:

  42. Displaying Variable Content

  43. Variables - Syntax • All variable names must be preceded by a dollar ($) sign • Following the dollar sign, the variable name must begin with either a letter (A-Z, a-z) or an underscore (_). It can’t begin with a number • The rest of the variable name can contain any combination and quantity of letters, underscores, and numbers

  44. Variables - Syntax • You may not use spaces within the name of a variable (underscore is normally used to separate words) • Variable names are CASE-SENSITIVE! Consequently, $variable and $Variable are two different constructs

  45. Types of Variables • There are 3 basic types of variables: numbers, strings and arrays • In PHP, numbers can be either • Integers (positive or negative) i.e. 1, 1972, -1 • Floating point (positive or negative) 1.0, 19.72, -1.0

  46. Types of Variables • A string is any number of characters enclosed within a pair of either single (') or double (") quotation marks. They can contain any combination of letters, numbers, symbols and spaces. Strings can contain variables: "Hello World!” "Hello, $first_name!” "1 1/4” "24.12.2011” "1995” ' '

  47. Strings:Operators

  48. StringFunctions

  49. Common StringFunctions

  50. Common StringFunctions

More Related