Unit Notes ICAWEB501A Build a dynamic website Topic 3 Develop website to the specified design © Copyright, 2014 by TAFE NSW - North Coast Institute Date last saved: 10 March 2014 by Amanda Walker Version: 1.0 # of Pages = 35 Copyright of this material is reserved to the Crown in the right of the State of New South Wales. Reproduction or transmittal in whole, or in part, other than in accordance with the provisions of the Copyright Act, is prohibited without written authority of TAFE NSW - North Coast Institute. Disclaimer: In compiling the information contained within, and accessed through, this document ("Information") DET has used its best endeavours to ensure that the Information is correct and current at the time of publication but takes no responsibility for any error, omission or defect therein. To the extent permitted by law, DET and its employees, agents and consultants exclude all liability for any loss or damage (including indirect, special or consequential loss or damage) arising from the use of, or reliance on, the Information whether or not caused by any negligent act or omission. If any law prohibits the exclusion of such liability, DET limits its liability to the extent permitted by law, to the re-supply of the Information. Third party sites/links disclaimer: This document may contain website contains links to third party sites. DET is not responsible for the condition or the content of those sites as they are not under DET's control. The link(s) are provided solely for your convenience and do not indicate, expressly or impliedly, any endorsement of the site(s) or the products or services provided there. You access those sites and use their products and services solely at your own risk. Page 2 of 35 ICAWEB501A Build a Dynamic Website Table of Contents Topic 3 Introduction ................................................................................................ 4 3.1 Create software components of the website ................................................... 5 PDO and why use it ............................................................................................... 8 Bootstrap ............................................................................................................. 15 PHP Sessions ...................................................................................................... 16 Activity 3.1 ........................................................................................................... 16 3.2 Test components of the website .................................................................... 16 Features to consider in testing ............................................................................. 17 Activity 3.2 ........................................................................................................... 19 3.3 Integrate components to produce the web application ................................ 19 Activity 3.3 ........................................................................................................... 35 Check Your Understanding .................................................................................. 35 Page 3 of 35 ICAWEB501A Build a Dynamic Website Topic 3 Introduction This is Topic 3 of 4 topics. This topic will assist you to develop website to the specified design. In this topic, you will learn how to: . Create software components of the website . Test components of the website . Integrate components to produce the web application Using the Unit Notes Icons and symbols are used throughout the guide to provide quick visual references. They indicate the following: Icon Meaning Icon Meaning ACTIVITY: An activity is ACTIVITY: A Learning listed to be completed activity requiring some physical action WWW: A web link is listed REFLECTION: A point is to be considered and thought about more deeply IMPORTANT: A pivotal point SEARCH: A particular item is detailed / book etc needs to be found and applied Page 4 of 35 ICAWEB501A Build a Dynamic Website 3.1 Create software components of the website These notes will serve as an introduction to the concepts. You are encouraged to do further research to fully understand the concepts. Now that the design specification has been completed, physical and logical mapping has been organised and data storage requirements have been designed; as the developer, you are going to bring the purpose and goals the client has for the site to come on live. Considering the requirement will help establish the development environment which relates to the source code to be used. To begin a site in this instance, one of the most important decisions to make is the following: . What is the software platform that will be used? . What type of functionality is provided and its costs? . Is the platform flexible, scalable and so on? Some platforms out there can offer what is needed to start with and accompanied with a high degree of customisation. For our purpose of learning here, you are recommended to use the specified technical environment and software components to be discussed shortly. More often than not, being a developer, you will require some programming expertise and this website can assist you: http://www.codeacademy.com/ Most of the building modules/components required for your assignment are mentioned in the scenario document so read it carefully and follow this to guide you. You may also refer the TV Buzz building blocks to re-enforce the ideas you have for Memos Tonight web application. What comprises a Technical Environment? The question to be answered is: Has the organisation identified and procured the tools to be used on the project? For example: . Application development language/s . Database design and development . Report development . Website content management, if applicable . Document management, if applicable . Testing To develop the web application for this unit you will need the following: A server environment such as Apache A server side scripting language such as PHP, PDO Web page development software such as Dreamweaver, Expression Web or other HTML editor At least 3 major browsers for testing the website (note that in a production environment you would generally make an effort to test on an even wider range of browsers) Page 5 of 35 ICAWEB501A Build a Dynamic Website There are some notes below to help you to prepare the technical environment for your web page but this is optional so long as you are able to upload your web pages and it dynamically uses functions which are required by the scenario. The website should be able to be tested through http://localhost. Should then upload your files to an alternate server using FTP and then access the site from that server using the full URL to complete testing. You can set up your own development server and request hosting services from TAFE if you need it. To arrange hosting through TAFE send an email to your Facilitator with the title ‘Web hosting environment request’. With this, you will also be provided access to cPanel to create and setup your database. To make your development server fully functional, you may create a folder on your hard disk called c:\web and use it as the directory for uploads. While creating a site, an important question to ask is if the site should be open to anyone, moderated or a private network. One of the objectives to be met for this assignment is to ensure that the ‘advertising’ portfolio is catered for as a long term objective. If you encounter difficulties setting up your development server, you may use these links and refer to the FAQ sections in these sites for additional detail. XAMPP: http://www.apachefriends.org/en/xampp.html . WAMPServer: http://wampserver.com/en/ . AMPPS . If you’re using MAC OS, download MAMP: http://mamp.info/en/download.com . If you’re using LAMP on Linux, download XAMPP for Linux: http://www.apachefriends.org/en/xampp-linux.html Using FTP To transfer files to and from your Web Server, you will need an FTP program. You can use FileZilla, FireFTP, or Classic FTP for MAC. Using a Program Editor Although plain text editor works for editing HTML, PHP and JavaScript, there are some dedicated program editors such as Editra (for MAC and PC), Notepad ++, Eclipse, Sublime Text 2 and so on. Using an IDE (Integrated Development Environment) Integrated environments offer many additional features such as in-editor debugging and program testing and so on. Some examples include phpDesigner IDE. You may also use Dreamweaver. Apache Apache is a well-known HTTP Server; it includes Web Browsers, FTP clients and server plus the DNS. One of its features is to supports plug-in modules for extensibility i.e. server-side programming language to authenticate schemes with language interfaces such as PHP. Apache also: . Allows virtual hosting, DBMS-based authentication databases & content negotiation . Supports password authentication and digital certificate authentication Page 6 of 35 ICAWEB501A Build a Dynamic Website . Has a built-in search engine & an HTML authorizing tools and supports FTP. Once all the components are ready for coding, ensure that all that you do from this point forward matches the Software Design Specification documentation and meets all the business and technical requirements. For the scenario, you need to understand and explain to your client that she/he is unlikely to have the kind of scaling and reliability requirement that any extremely large sites face so working it small but keeping it flexible is the best way to approach the application framework. Before you