Designing for Dynamic Content

Transcription

1 Designing for Dynamic Content Course Code (WEB1005M) James Todd Web Design BA (Hons) Summary This report will give a step-by-step account of the relevant processes that have been adopted during the construction of this dynamic website. The website in question is a thematic website. Being thematic this means that almost every visual element will relate one way or another back to the sites main topic which in this case will be gradient art. 1

2 Content 1.0 Introduction page Creating The Database page Creating the database table 2.02 Testing the database. 3.0 Website Design page File Structure and Site Testing 4.0 PHP Code page Index page php code explanation 4.02 Gallery page php code explanation 4.03 View page php code explanation 4.03 Search page php code explanation 5.0 Conclusion page Bibliography page Appendix page Website code 2

3 Introduction Because for the purposes of this assignment this website needed to be dynamic, it had to be PHP based to allow for the communication and data transfer between the relevant database, the visitors browser and the site its self. PHP is an acronym for PHP: Hypertext Preprocessor and is a server-side, HTML embedded Scripting language used to create dynamic web pages In an HTML page, PHP code is enclosed within special PHP tags, so when visitor opens the page, the sever processes the PHP code (not the PHP code Itself) to the visitors browser. PHP works hand in hand with MySQL. MySQL is an open source relational database management system (RDMS) that runs as a server, the SQL part stands for: Structured Query Language. There are many benefits to having a dynamic website over a standard HTML based site, for example: unlike a none dynamic website, data can be updated remotely without any need for editing the site its self. The pages can simply act as a template waiting to be filled with content from another place. For this site eight thumbnail images have been added which when clicked will link to their parent images. All of the images throughout the site will be displayed dynamically via two database tables, one for the home page image and the other for the rest of the images. (Note that the image titles and descriptions etc will also be displayed dynamically). In addition a search box with a wild card function will run consistently throughout the site, the use of a wild card feature simply enables the user to input a less specific search criteria whilst still standing a fair chance of getting required results, for example: spelling mistakes are forgiven and words in the middle of a title would usually be still enough for the whole title to be pulled from the database. For the creation and development of this site, Adobe Dreamweaver, a PHP and MySQL capable server were utilized. 3

4 2.0 Creating The Database The first step was to create a table where all of the dynamic data was to be stored. Below is a wireframe of this table. As can be seen, the table is divided into rows and columns; each column is assigned a specific data type and name For the first column an ID is given, this relates to the specific rows from the table INT- Interga data. Because each row needs an ID, a number needs to be assigned to each of the subsequent rows. After the first row is set, the auto_ increment feature is activated and the following rows are automatically numbered. INT is selected when inputting numerical data. VARCHAR - Variable Character In the second column varchar has been used, varchar simply means that a mixture of various none numerical characters can be inputted. Up to 255 characters can be used TEXT Using the text setting, no value needs to be added. 4

5 2.01 Creating The Database Table As shown below, from phpmyadmin the wireframe concept is then put into practice when creating the real table: This is where the name of the table and the number of rows are defined. When these parameters are set the submit button is pressed to create the table. In this case the table name will be PHP 2 this is where the majority of the sites dynamic data is stored. The remaining dynamic data is stored on a separate table within the database; this table is called PHP. Table PHP houses only the dynamic content for the home page. For the purposes of this report the main focus will be in relation to table PHP2 The images below are snapshots of the real table as seen in phpmyadmin. When the table was created, the data types and rows named, the relevant fields where then filled with the desired content. This content will later be displayed dynamically on the website. 5

6 2.02 Testing the Database At this stage the database had to be tested to see if all of the required elements were communicating effectively. After as the table was created, the PHP and SQL code were exported and placed into a folder called db_setup, the php file was then uploaded to the server to test the connection. Upon successful connection the result displayed as follows: Congratulations, you are connected to your database. Below is an acquired diagram which demonstrates the communication process when using a dynamic website. The browser displays the content by allowing the php code to talk to the database with a request for relevant data, then the msql code from the database gives the php code what it wants. The php code then goes back to the browser via the website folder with the requested information. (Note that images are not stored on the database, but in the website folder, the database stores only the path to the folder.) The data from the SQL table can be edited localy and reimported back into phpmyadmin if so desired, but to do this the old table would need to be dropped/deleted. In this case all of the editing was carried out in phpmyadmin. Another reason for exporting the SQL table, is to keep a backup should anything happen to the original. Below is an extract of some of the sql code relating to the table export. (Note, this is not all of the code from the sql export) Table structure for table `PHP2` -- CREATE TABLE IF NOT EXISTS `PHP2` ( `id` int(4) NOT NULL auto_increment, `creator` varchar(30) NOT NULL, `title` varchar(30) NOT NULL, `description` text NOT NULL, `picture` varchar(30) NOT NULL, `thumbnail` varchar(30) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ; INSERT INTO `PHP2` (`id`, `creator`, `title`, `description`, `picture`, `thumbnail`) VALUES (1, 'James Todd', 'Title 1: Rainbow', 'I created this gradient using Adobe Photoshop.', 'Pic 1, Rainbow 001.jpg', '001.jpg '), (2, 'James Todd', 'Title 2: Caramel Sky', 'I created this gradient using Adobe Photoshop.', 'Pic 2, Caramel Sky 002.jpg', '002.jpg'), (3, 'James Todd', 'Title 3: Follicle', 'I created this gradient using Adobe Photoshop.', 'Pic 3, Follicle 003.jpg', '003.jpg'), (4, ' James Todd', 'Title 4: Candy', 'I created this gradient using Adobe Photoshop.', 'Pic 4, Candy 004.jpg', '004.jpg'), (5, 'James Todd', 'Title 5: Bliss', 'I created this gradient using Adobe Photoshop.', 'Pic 5, Bliss 005.jpg', '005.jpg'), (6, 'James Todd', 'Title 6: Tangerine Haze', 'I created this gradient using Adobe Photoshop.', 'Pic 6, Tangerine Haze 006.jpg', '006.jpg'), (7, 'James Todd', 'Title 7: Jet Sky', 'I created this gradient using Adobe Photoshop.', 'Pic 7, Jet Sky 007.jpg', '007.jpg'), (8, 'James Todd', 'Title 8: Heavens Curtain', 'I created this gradient using Adobe Photoshop.', 'Pic 8, Heavens Curtain 008.jpg', '008.jp 6

7 3.0 Website Design Below is the wireframe for the Gradients website, this is basically a sketch for the layout of the website. All pages excluding the view and the search page are laid out in the order the navigation determines. Every page with the exception of the about page, displays some kind of dynamic content. On the gallery page when the user clicks on a thumbnail this will take them to the view page whereby the associated parent image will be displayed. A search runs consistently throughout the site, when search details are entered the results display on a page called search.php File Structure and Site Testing Below is screen shot of the back end file structure relating to this site When any amendments where made to a specific element, the file would be uploaded to the server to test on various browsers. Firebug was also use to manipulate the code in a none destructive way, if the results are pleasing the code can be copied and pasted to the local file,(note that the actual php code its self cannot be seen in Firebug. 7

8 As the theme of this website is gradient art, various gradient orientated images where created. Bellow is a montage of them all. One of the websites researched when creating these images was Free Time Photo. The image below, taken from the website, gives a demonstration on how to apply the gradient tool when using Adobe Photoshop. gradient- tool.html 8

9 4.0 PHP Code Every page throughout this dynamic website has been given a file extension of.php Note this kind of file extension does not exclude html code, it just simply allows PHP code to be added, thus making it possible for the site to become dynamic. The php code is placed within div tags in whichever position one chooses, for example, if the php code is placed between the header and the navigation tags, that is where the dynamic content will appear. These tags relate to their relevant css coding. Note that div tags can also be placed within the php code its self. Every time php code is implemented it has to be opened and closed with a question mark, or if you like a query, an example of this is demonstrated below. Open query <?php Close query?> 9

10 4.01 Index page php code explanation The comments in yellow text attempt to explain the code relative to this page. <?php This is where I connect to the server where my database is stored mysql_connect("localhost", "dyn_jtodd", "*******") Here I connect to the actual database mysql_select_db("dyn_jtodd") From the database I specify which table I want to reference, note whe n the table is selected it is placed in the results variable. $result = mysql_query("select * FROM PHP"); From the reults variable the table is then ordered into a row while($row = mysql_fetch_object($result)) { // note in this i nstance the curly brackets basically allow multiple amounts of data to be echoed,without the brackets onl one item will be pulled from th e database. This is a div for a container where all echoed content will sit resid e. echo '<div class="index-pic-container">'."<br/>".$row->title; The words in black text are the names of the rows in the database which are to be selected from echo '<br />' 10

11 Below is the path that the database uses to display content, in this instance the image source is a folder named pics, this resides in the main website folder..'<img src="pics/'.$row->picture.'" alt="" />'; echo '<br />'.$row->description; } echo '</div>';?> 11

12 4.01 Gallery page code php code explanation. The comments in yellow text attempt to explain the code relative to this page. <?php //This is where I connect to the server where my database is stored mysql_connect("localhost", "dyn_jtodd", "*******") //Here I connect to the actual database mysql_select_db("dyn_jtodd") //From the database I specify which table I want to reference, note w hen the table is selected it is placed in the results variable. $result = mysql_query("select * FROM PHP2"); This is a div for a container where all echoed content will reside echo '<div class="thumbnails-php-container">'."<br/>" Below is the path that the database uses to display content, in this instance the image source is a folder named thumbs, this resides in the main website folder. If.'<a href="view.php?id='.$row- >picture.'"><img src="thumbs/'.$row->thumbnail.'" alt="" /></a>'; echo '</div>'; }?> Above, if you read the second line of code from left to right it becomes clear where they link to. When the user navigates to the gallery page and clicks on the desired thumbnail, it takes them to a row on the database table named picture, this is where the corresponding parent image resides. 12

13 Both the thumbnail and its parent image are called from their relevant rows and folders then echoed back dynamically to the browser. Note, all of the parent images are displayed on the view page. 13

14 4.03 View page php code explanation. This is the page where the user is taken to when they click the desired thumbnail. When clicked, this will activate its corresponding parent image. The comments in yellow text attempt to explain the process. <?php This is where I connect to the server where my database is stored mysql_connect("localhost", "dyn_jtodd", "*******") Here I connect to the actual database mysql_select_db("dyn_jtodd") The dollar sign represents a variable/array. Essentially it just tells the php that it is a variable. If you look at the first line of code below from left to right, you will see that a variable is being set in preparation for holding data, next the string or in this case, the gallery page url is being terminated. $filename = mysql_real_escape_string($_get['id']); On the second line of code a variable is made to hold the data for this specific query, then everything from the table php2 where field "picture" = file name pic 1.jpg is selected. Lastly if none of this cannot be achieved the last command Or Die tells the query to terminate. $result = mysql_query("select * FROM PHP2 WHERE picture = '".$filenam e."'")or die(mysql_ //The line of code beneath basicly means that if all is ok relay back the results while($row = mysql_fetch_object($result)) { 14

15 This is a div for a container where all echoed content will reside echo '<div class="view-container">'."<br/>" Below is the path that the database uses to display content, in this instance the image source is in a folder named pics, this resides in the main website folder..'<img src="pic-02/'.$row->picture.'" alt="" />'; `The term Echo br is a way of putting space between content echo '<br />' The variable in this instance relates to the requested rows from the database table.$row->creator; echo '<br />'.$row->title; echo '<br />'.$row->description; } echo '</div>';?> 15

16 4.03 Search page php code explanation The comments in yellow text attempt to explain the process. <?php //This is where I connect to the server where my database is stored mysql_connect("localhost", "dyn_jtodd", "*******") //Here I connect to the actual database mysql_select_db("dyn_jtodd") $select = $_POST['select']; $search = $_POST['search']; The function SWITCH evaluates a list if expressions and returns the value of the first expression that True is, which in this instance would be the results of the search. If there is no expression True then it returns Null. switch($select) Looking at the code bellow, the query this time means that if the search is successful, go to the PHP2 database table, select data from the relevant row if it relates to the inputted search request. Note because the search facility has a wild card function the search does not need to be inputted accurately. The percentage signs surrounding the word search activate the wildcard function, without these the search input would need to be totally accurate. { case picture : $QuerySelect = "SELECT*FROM PHP2 WHERE(PHP2.picture Li ke '%$search%')"; break; case title : $QuerySelect = "SELECT*FROM PHP2 WHERE(PHP2.title Like ' %$search%%')"; break; case creator : $QuerySelect = "SELECT*FROM PHP2 WHERE(PHP2.creator Li ke '$search%')"; break; } 16

17 $result = mysql_query($queryselect); $numrows = mysql_num_rows($result); This says if $numrows (a variable assigned earlier in the code) Doesn t equal zero, carry out the action within the braces if($numrows!= 0) While the $row variable has data from the mysql_fetch_array function, with result (a variable assigned earlier in the code), carry out the action within the braces { while($row { echo "<br>" The the word $row s shown in blue text bellow relate to specific rows from the database..'<img src="pic-02/'.$row['picture'].'" alt="" />'; echo "<br>". $row["title"]. "<br>"; echo "<br>". $row["creator"]. "<br>"; echo "<br>"; echo "<br>"; } echo "<br>" else { The words in red text bellow show the message that displays on the search page when the search has been unsuccessful echo "No luck? Why not try using the wil d card function, for example: if you typed pic 1 in the picture eleme nt of the search box, pic 1 along with its title would be displayed. Even if you entered just the title on its own, the image will still show. "; }?> 17

18 5.0 Conclusion From setting up the database through to the website completion many obstacles had to be overcome. Because James had no experience of working with PHP and MySql, taking into consideration the time limit he had to work with, there needed to be a steep learning curve. He found that not only did he manage to grasp some of the basic commands relating to the afore mentioned languages but in addition this helped to sharpen up his understanding of how css and html work together. From functionality prospective, this students initial aim was to implement a series of thumbnails which would link to their parent images, in addition to achieving this objective, a search bar with a wild card function was successfully implemented. Despite exceeding his expectations with this site James feels he could have improved certain elements relating to it, for example on the database table he named the first column id, this caused much confusion when implementing some of the php code as some of the code used the word id generically. Perhaps a better title would have been gradients_id. James has learned that when certain elements of code don t work it, isn t always because of a major problem but is often down to something as simple as one syntax error. The benefits of using a dynamic site are very clear, although it requires a knowledgeable web designer to build one, once up and running someone with no real experience of web design can input data into the database relating to the site, remotely from any where in the world. 18

19 6.0 Bibliography Free Time Photo (Page 8) gradient- tool.html w3schools (Most pages relating to php code) 19

20 7.0 Appendix 8.01 Website Code <div id="formcontainer"> <form id="search" method="post" action="search.php"> <div id="selectcontainer"> <font size="+1"></font> <select name="select"> <option>picture</option> <option>title</option> <option>creator</option> </select> </div> <div id="searchcontainer"> <font size="+1"> </font> <input type="text" name="search" size="40"> </div> <div id="submitcontainer"> <input type="submit" name="submit" value="submit"> </div> </form> </div> <div id="flash-container"> <object id="flashid" classid="clsid:d27cdb6e-ae6d-11cf-96b " width="800" height="50"> <param name="movie" value="media/grad-02.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value=" " /> <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you donâ t want users to see the prompt. --> <param name="expressinstall" value="../scripts/expressinstall.swf" /> <!-- Next object tag is for non-ie browsers. So hide it from IE using IECC. --> <!--[if!ie]>--> <object type="application/x-shockwave-flash" data="media/grad-02.swf" width="800" height="50"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value=" " /> <param name="expressinstall" value="../scripts/expressinstall.swf" /> <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> <div> <h4>content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href=" src=" shared/download_buttons/get_flash_player.gif" alt="get Adobe Flash player" width="112" height="33" /></a></p> </div> <!--[if!ie]>--> </object> <!--<![endif]--> </object> </div> <div id="index-pic-container"> This where the PHP for the home page is inserted </div> <div id="footer"> <p>gradients Website â By James Todd â Web Design Student</p> <p> 2011 All Rights Reserved</p> <div align="center"></div> </div> </div> 20

21 Index PHP Code <?php mysql_connect("localhost", "dyn_jtodd", "*******") error()) mysql_select_db("dyn_jtodd") $result = mysql_query("select * FROM PHP"); while($row = mysql_fetch_object($result)) { echo '<div class="index-pic-container">'."<br/>".$row->title; echo '<br />'.'<img src="pics/'.$row->picture.'" alt="" />'; echo '<br />'.$row->description; } echo '</div>';?> 21

22 Gallery Page PHP Code <?php mysql_connect("localhost", "dyn_jtodd", "*******") mysql_select_db("dyn_jtodd") $result = mysql_query("select * FROM PHP2"); echo '<div class="thumbnails-php-container">'."<br/>".'<a href="view.php?id='.$row- >picture.'"><img src="thumbs/'.$row->thumbnail.'" alt="" /></a>'; echo '</div>'; }?> 22

23 View Page PHP Code <?php mysql_connect("localhost", "dyn_jtodd", "*******") mysql_select_db("dyn_jtodd") $filename = mysql_real_escape_string($_get['id']); $result = mysql_query("select * FROM PHP2 WHERE picture = '".$filenam e."'")or die(mysql_ while($row = mysql_fetch_object($result)) {. echo '<div class="view-container">'."<br/>".'<img src="pic-02/'.$row->picture.'" alt="" />'; echo '<br />'.$row->creator; echo '<br />'.$row->title; echo '<br />'.$row->description; } echo '</div>';?> 23

24 Search Page PHP Code <?php mysql_connect("localhost", "dyn_jtodd", "*******") mysql_select_db("dyn_jtodd") $select = $_POST['select']; $search = $_POST['search']; switch($select) { case picture : $QuerySelect = "SELECT*FROM PHP2 WHERE(PHP2.picture Li ke '%$search%')"; break; case title : $QuerySelect = "SELECT*FROM PHP2 WHERE(PHP2.title Like ' %$search%%')"; break; case creator : $QuerySelect = "SELECT*FROM PHP2 WHERE(PHP2.creator Li ke '$search%')"; break; } $result = mysql_query($queryselect); $numrows = mysql_num_rows($result); if($numrows!= 0) { while($row { echo "<br>".'<img src="pic-02/'.$row['picture'].'" alt="" />'; echo "<br>". $row["title"]. "<br>"; echo "<br>". $row["creator"]. "<br>"; 24

25 echo "<br>"; echo "<br>"; } echo "<br else { echo "No luck? Why not try using the wil d card function, for example: if you typed pic 1 in the picture eleme nt of the search box, pic 1 along with its title would be displayed. Even if you entered just the title on its own, the image will still show. "; }?> 25