ece 3553 multifarious systems i blogsite a blogging website design by elizabeth nelson
Post on 19-Dec-2015
220 views
TRANSCRIPT
ECE 3553 Multifarious Systems IBlogsite
A Blogging Website Design by Elizabeth Nelson
Site Objectives
• Create a blogging website which allows users to:– Create a new account– Log in to an existing account– Change the background of their blog– Change the font of their blog– Change the color of their font in their blog– Write and post entries in their blog
• Anyone should be able to see the existing blogs
Site Map
Homepage
Home About Sign InBlogs
About Blogs Sign In
User “Dashboard”
Blog Appearance
New Entry
View Blog
List/Display of Blogs
Help
New User
Data• Files:
– about.html– blogs.psp– change.html– change.php– change2.html– default.css– help.html– index.html– missing.html– nav.html– new.html– new.php– new2.html
– new3.html– signin.html– signin.php– signin2.html– signin3.html– user.php– User files
• userdash.htm• usersite.html• userstyle.css
• Database Tables:– Users
• Name• Password• Firstname• Lastname• Dash• Site• Bground• Font• color
– User tables• Date• Entry
The Navigation Pane
• Frames
• Nav.html
•<html xmlns="http://www.w3.org/1999/xhtml" >•<head>• <title>BlogSite Homepage</title>•</head>• <frameset cols="120, *">• <frame name="navigationPane" src="nav.html" />• <frame name="home" src="home.html" />• </frameset>•</html>•<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
•<!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>• <title>Navigation Pane</title>• <link rel = "stylesheet" type = "text/css" href = "styles/default.css" />•</head>•<body>• <a href="home.html" target="home"><img src="images/home.jpg" alt="home"/></a></br>• <a href="about.html" target="home"><img src="images/about.jpg" alt="about" /></a></br>• <a href="blogs.php" target="home"><img src="images/blogs.jpg" alt="blogs" /></a></br>• <a href="signin.html" target="home"><img src="images/signin.jpg" alt="sign in" /></a>•</body>•</html>
View Blogs
• Blogs.php•<!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" >• <title>View User Blogs</title>• <link rel = "stylesheet" type = "text/css" href = "styles/default.css" />• <?php• print("</head><body><h1>Existing Users:</h1><ul>");• • $database = mysql_connect("localhost:/tmp/mysql5.sock", "aanelson", "nonose");• mysql_select_db("aanelson_beth", $database);• • $query = "SELECT name, site FROM users";• $result = mysql_query($query, $database);• • while( $row = mysql_fetch_array($result))• {• print("<li><a href='$row[1]'>$row[0]</a></li>");• }• • print("</ul>");• ?>•</body>•</html>•<head>
Sign In• Signin.html
•!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>• <title>User Sign In</title>• <link rel = "stylesheet" type = "text/css" href = "styles/default.css" />•</head>•<body>• <h1>User Sign In</h1>• <h3>Enter both a username and password or click "New User" to create an account.</h3>• <form method="post" action="signin.php">• <p style="text-align:left"><table border="0" cellpadding="0" style="height:50px; width:200px">• <tr>• <td>Username:</td>• <td colspan = "2"><input size="15" name="USERNAME" style="height:20px; width:100px" /></td>• </tr>• <tr>• <td>Password:</td>• <td colspan="2"><input size="15" name="PASSWORD" style="height:20px; width:100px" type="password"/></td>• </tr>• </table></p>• </br>• <input type="submit" name="login" value="Login" />• <input type="submit" name="new" value="New User" />• <input type="reset" name="reset" value="Reset" />• </form>•</body>•</html>
Sign In Code• Signin.php
•extract($_POST);• if(isset($new))• {• print("<script type='text/javascript' language='javascript'> document.location='new.html';</script>");• }• else• {• if(!$USERNAME || !$PASSWORD)• {• print("<script type='text/javascript' language='javascript'> document.location='signin2.html';</script>");• }• else• {• if(!( $database = mysql_connect("localhost:/tmp/mysql5.sock", "aanelson", "nonose")))• {• print("<title>Could Not Connect to Database</title></head><body>Could not connect to database.<br /><a href='signin.html'>Back to Login</a>");• die();• }• if(!mysql_select_db("aanelson_beth", $database))• {• print("<title>No Database</title></head><body>Could not open database, but did connect.<br /><a href='signin.html'>Back to Login</a>");• die(mysql_error());• }
Signin.php cont.
•$select = "SELECT * FROM users WHERE name = '$USERNAME' AND password = '$PASSWORD'";• $query = mysql_query($select, $database);• $row = mysql_fetch_row($query);• if( $row != 0)• {• $location = $USERNAME . "dash.html";• print("<script type='text/javascript' language='javascript'> document.location='$location';</script>");• }• else• {• print("<script type='text/javascript' language='javascript'> document.location='signin3.html';</script>");• }• }• }•?>
New User
• New.html•<h1>New User Form</h1>• <h2>Please fill in the following fields:</h2>• <form method="post" action="new.php">• <p style="text-align:left"><table border="0" cellpadding="0">• <tr>• <td>Username:</td>• <td colspan = "2"><input size="15" name="USERNAME" style="height:20px; width:100px" /></td>• </tr>• <tr>• <td>Password:</td>• <td colspan="2"><input size="15" name="PASSWORD" style="height:20px; width:100px" type="password"/></td>• </tr>• <tr>• <td>First Name:</td>• <td colspan="2"><input size="40" name="first" style="height:20px; width:100px" /></td>• </tr>• <tr>• <td>Last Name:</td>• <td colspan="2"><input size="40" name="last" style="height:20px; width:100px" /></td>• </tr>• <tr>• <td colspan="3"><h3>Blog Appearance:</h3></td>• </tr>• <tr>
New.html cont• <tr>• <td style="width:75px; height:50px; text-align:center"><img src="images/blue.jpg" height=50 width=50 /></td>• <td style="width:75px; height:50px; text-align:center"><img src="images/red.jpg" height=50 width=50 /></td>• <td style="width:75px; height:50px; text-align:center"><img src="images/yellow.jpg" height=50 width=50 /></td>• <td style="width:75px; height:50px; text-align:center"><img src="images/green.jpg" height=50 width=50 /></td>• <td style="width:75px; height:50px; text-align:center"><img src="images/fishes.jpg" height=50 width=50 /></td>• </tr>• <tr>• <td style="width:75px; text-align:center"><input type="radio" name="bground" value="blue" Checked/></td>• <td style="width:75px; text-align:center"><input type="radio" name="bground" value="red"/></td>• <td style="width:75px; text-align:center"><input type="radio" name="bground" value="yellow"/></td>• <td style="width:75px; text-align:center"><input type="radio" name="bground" value="green"/></td>• <td style="width:75px; text-align:center"><input type="radio" name="bground" value="fishes"/></td>• </tr>
New User Code• New.php
•<?php• extract($_POST);• //check if the fields have been completed• if(!$USERNAME || !$PASSWORD || !$first || !$last)• {• print("<script type='text/javascript' language='javascript'> document.location='new2.html';</script>");• }• //connect to database• if(!( $database = mysql_connect("localhost:/tmp/mysql5.sock", "aanelson", "nonose")))• {• print("<title>Could Not Connect to Database</title></head><body>Could not connect to database.<br /><a href='new.html'>Back to Login</a>");• die();• }• if(!mysql_select_db("aanelson_beth", $database))• {• print("<title>No Database</title></head><body>Could not open database, but did connect.<br /><a href='new.html'>Back to Login</a>");• die(mysql_error());• }• //check if the username exists• $check = "SELECT * FROM users WHERE name = '$USERNAME'";• $unique = mysql_query($check, $database);• $rows = mysql_fetch_row($unique);• if( $rows == 0)• {• //add user info to table• $dashAdd = $USERNAME . "dash.html";• $siteAdd = $USERNAME . "site.html";• $style = $USERNAME. "style.css";• $add = "INSERT INTO users(name, password, firstName, lastName, dash, site, bground, font, color) VALUES ('$USERNAME', '$PASSWORD', '$first', '$last', '$dashAdd', '$siteAdd', '$bground', '$font', '$color')";• $result = mysql_query($add, $database);
New.php cont.• switch($color)• {• case "blue":• $colorNum = "#0000c0";• break;• case "red":• $colorNum = "#920a20";• break;• case "yellow":• $colorNum = "#ffff00";• break;• case "black":• $colorNum = "#000000";• break;• case "white":• $colorNum = "#ffffff";• break;• }• • $file = fopen($style, "x+");• $styleBack = "body {background-image:url(images/" . $bground . ".jpg)}\n";• $styleFont = "p {font-family:" . $fontName . "; color:" . $colorNum . "}\n• h1 {font-family:" . $fontName . "; color:" . $colorNum . "}";• fwrite($file, $styleBack);• fwrite($file, $styleFont);• fclose($file);
New.php cont.•//create user dashboard• $file2 = fopen($dashAdd, "x+");• $dashData = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>\n• <html xmlns='http://www.w3.org/1999/xhtml' >\n• <head>\n• <title>Dashboard</title>\n• <link rel = 'stylesheet' type = 'text/css' href = 'styles/default.css' />\n• </head>\n• <body>\n• <h1>Welcome! ". $first ." ". $last ." !</h1>\n• <h3>Select an action or write an entry and click 'Submit':</h3>\n• <form method='post' action='user.php'>\n• <input type='hidden' name='USERNAME' value='". $USERNAME ."' />\n• <table>\n• <tr>\n• <td><h3>View Blog</h3></td>\n• <td><input type='radio' name='act' value='view' /></td>\n• </tr>\n• <tr>\n• <td><h3>Change Appearance</h3></td>\n• <td><input type='radio' name='act' value='appear' /></td>\n• </tr>\n• <tr>\n• <td><h3>Submit Entry</h3></td>\n• <td><input type='radio' name='act' value='enter' /></td>\n• </tr>\n• <tr>\n• <td colspan='3'><textarea name='entry' rows='10' cols='50'>Write Entry Here</textarea></td>\n• </tr>\n• </table>\n• <input type='submit' value='Submit' />\n• </form>\n• </body>\n• </html>";• fwrite($file2, $dashData);• fclose($file2);
New.php cont.•//create user entry table• $query = "CREATE TABLE " . $USERNAME . "(Date varchar(30) PRIMARY KEY, Entry text)";• $result2 = mysql_query($query, $database);• • //create user blog• $file3 = fopen($siteAdd, "x+");• $siteData = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>\n• <html xmlns='http://www.w3.org/1999/xhtml' >\n• <head>\n• <title>" . $USERNAME . "'s Blog</title>\n• <link rel = 'stylesheet' type = 'text/css' href = '". $style . "' />\n• </head>\n• <body>\n• <p><h1>Welcome to " . $first . " " . $last . "'s Blog!</h1></p>\n• <p><table><thead>\n• <tr>• <th>Entries:</th>\n• </tr></thead></table></p>\n• </body>\n• </html>";• fwrite($file3, $siteData);• fclose($file3);• • //redirect to dashboard• print("<script type='text/javascript' language='javascript'> document.location='$dashAdd';</script>");
User Code
• User.php•<?php• extract($_POST);• if(!( $database = mysql_connect("localhost:/tmp/mysql5.sock", "aanelson", "nonose")))• {• print("<title>Could Not Connect to Database</title></head><body>Could not connect to database.<br /><a href='signin.html'>Back to Login</a>");• die();• }• if(!mysql_select_db("aanelson_beth", $database))• {• print("<title>No Database</title></head><body>Could not open database, but did connect.<br /><a href='signin.html'>Back to Login</a>");• die(mysql_error());• } • if( $act == "view")• {• $location = $USERNAME . "site.html";• print("<script type='text/javascript' language='javascript'> document.location='$location';</script>");• }• elseif( $act == "appear")• {• $location = "change.html";• print("<script type='text/javascript' language='javascript'> document.location='$location';</script>");• }
User.php cont.
•else• {• //insert data into table• $timestamp = date('h:i:s A d - m - y');• $insert = "INSERT INTO $USERNAME(Date, Entry) VALUES('$timestamp', '$entry')";• $result5 = mysql_query($insert, $database);• • $firstQuery = "SELECT * FROM users WHERE name = '$USERNAME'";• $first = mysql_query($firstQuery, $database);• $row1 = mysql_fetch_array($first);• • • //rewrite user site using data from table• $siteAdd = $USERNAME . "site.html";• $style = $USERNAME . "style.css";• • $file3 = fopen($siteAdd, "w+");• $siteData1 = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>\n• <html xmlns='http://www.w3.org/1999/xhtml' >\n• <head>\n• <title>" . $USERNAME . "'s Blog</title>\n• <link rel = 'stylesheet' type = 'text/css' href = '". $style . "' />\n• </head>\n• <body>\n• <p><h1>Welcome to $row1[2] $row1[3]'s Blog!</h1></p>\n• <p><table><thead>\n• <tr>• <th>Entries:</th>\n• </tr></thead>";• fwrite($file3, $siteData1);• • $query = "SELECT Date, Entry FROM " . $USERNAME;• $result = mysql_query($query, $database);• while( $row = mysql_fetch_array($result))• {• $temp = "<tr><td valign='top'>$row[0]</td><td>$row[1]</td></tr>";• fwrite($file3, $temp);• }• $endData = "</table></p>\n• </body>\n• </html>";• fwrite($file3, $endData);• fclose($file3);
Conclusion
• Internet Explorer vs. Mozilla• Refresh• Redirect• http://beth.aanelson.com