Upbuzz: Local Business Search Engine
David Bayles & Benjamin Cody Hanson
Table of Contents
Introduction (David Bayles)...... Page 3
Introduction (Cody Hanson)...... Page 4
Project Overview...... Page 5
Project Elements: Database and Hosting...... Page 6
Project Elements: Authentication, Privileges and Security...... Page 7
Project Elements: Site Structure...... Page 8
Project Elements: Coding...... Page 9
Project Elements: CSS and Browser Compatibility...... Page 10
Project Elements: Design Elements and Navigation...... Page 11
Project Elements: Search Engine...... Page 13
Project Elements: User / Business Registration and Setup...... Page 16
Project Elements: Business Account...... Page 19
Project Elements: User Account...... Page 21
Project Elements: Administrator Account...... Page 20
Website Maintenance and Customer Service...... Page 23
Major Problems, Solutions and New Features...... Page 24
Conclusion...... Page 25
Appendix...... Page 26
Introduction (David Bayles)
Ever since I came to NMU in the Fall of 2003, I have probably had the same decisions and experiences that many other students have had. I came in knowing that I liked computers and that I would like to major in something that had to do with them. Computer Science was my first pick but I quickly switched over to Network Computing because of the freedom it seemed to give me with what type of classes I could take. I really took interest in the networking and more web oriented classes that dealt with server administration, PHP and database work. Near the end of my college career I really started to take interest in web design too and now regret that I didn’t take more of the web design classes. I plan to continue my interest and work in web design/development after I am finished with NMU.
This project was made possible by an NMU employee by the name of Lee Francisco. About halfway through my first semester at NMU I was offered a job to work at Micro Repair. Cody Hanson was already working there and told the manager that I’d be a good candidate to work on the laptops. As I worked there for the next two years I learned a lot about computer hardware and customer service. I also got to know Lee Francisco, who is the asset manager/programmer for Micro Repair, a lot better. At the end of 2005 I was asked to be a part of a company he was starting called 906 Technologies. I’ve worked there ever since on web projects and hardware repairs. The project that we are presenting to you was one of his ideas. Upbuzz.com has evolved and is still continually changing as we get new input and new ideas on what will make the process of local business to customer interaction better. This project has been by far the most valuable experience I have had so far involving web design and development. The problems we encountered, criticism, setbacks and long hours that we endured have made us more ready for our post college careers.
Introduction (Benjamin Cody Hanson)
I am a senior here at Northern Michigan University, coming here in the Fall of 2003 to play Football. I chose Network Computing because I liked the concept of the program, an emphasis on computers, technology, etc. with little required Math. As weird as it is, I can program all day in various languages, but I can’t do Math to save my life. Some say it’s the same concept, but I beg to differ. I learned a lot here at NMU from taking courses such as Windows Programming, Network Programming, Programming in Flash, Web Applications Programming, Database Management, etc, with instructors who made my learning interesting and unique. I chose these courses and Degree because I’m very interested in the Web and where it can take me. The possibilities are limitless. Along the way, I learned many different languages (PHP, MySQL, C++, C#, AJAX, Javascript, Java, Oracle, Visual Basic) of which my favorite came to be PHP, due to the fact you can use it with almost any web language, its secure and you can do practically anything with it.
During my tenure here at NMU, I have worked a few computer oriented jobs. I worked at Micro Repair (Northern’s Computer Repair) as a Laptop and PC technician, until I was promoted, where I then did most of the Work-orders around campus as well as some programming for various NMU projects (Asset Management System for example). While at Micro Repair, I was fortunate enough to earn several Certifications such as A+ and numerous IBM certifications. After my third year at Micro, I was asked by Lee Francisco to help start a company called 906 Technologies. In the beginning I was involved with the Computer Repair aspect of the company, but was later moved to just Web Programming. Dave Bayles, Nathan Lampi, and I are the team behind all of 906’s web projects. About a year ago, Lee Francisco approached us with the idea of “a small business search engine” and the reward of a partnership in it. Intrigued from the start, we began programming a fully dynamic website, adding features and idea’s every step of the way. After thousands of hours of programming, not to mention numerous redrafts of site functions, we have a beta site we can now offer to the public. I am very proud to be part of this project, and can only hope that the idea and site are designed well enough to take off.
Project Overview
We decided on upbuzz as our Senior Project because we knew that it would benefit us in two ways, one being we complete a Senior Project, and two being we could enhance the features upbuzz has to offer and build on what we had. The general idea behind upbuzz was developed in the winter of 2006 and since then we haven’t stopped working on it. A small business search engine that will link the local community to its businesses, providing a web presence for all businesses and an online community for every day users. We set out to offer small businesses who couldn’t afford a website, a free template where they can establish a web presence. Additionally, we would offer features customizable to each business such as an Online Menu or Photo Gallery. We also knew that we had to create an environment that users would want to come back to every day. With that in mind, we created the welcome page, and with it a message center, friends and favorite networks.
Since both of our focuses during our tenure here at Northern has been in Web Development, we knew that making this our Senior Project was the right choice. With it, we could showcase and develop further our knowledge and talents, ranging from CSS design and programming to database management. Upbuzz has undergone many different designs, both graphic and structurally. The original upbuzz was an idea that wasn’t as good as the current version we have now. Along the way we kept thinking of new ideas that would set upbuzz apart from the rest, and then we would build on that.
Project Elements
Database and Hosting
Hosting is a small but very important part of our site. We are involved with a private company that supplies us with good bandwidth, a powerful server, and the freedom to do whatever we want with the database and server. By far the most important part of our site is the database. We use a database that is MySQL version 4.1.120 managed by phpMyAdmin 2.7.0, a web-based application that allows us to do basically anything to our database. To date, there are 55 tables that compose the upbuzz structure. Below is a basic diagram of a few of the main tables.
It is very important for us to design our tables as precise as possible. Upbuzz makes at least one database call, or query, per page load. Having a good table structure allows our site to be very fast and efficient with data retrieval.
Upbuzz focuses on a few different main tables that are very important to the overall function of our site. Perhaps the most important tables are buzz_zip_codes, buzz_keyword, buzz_client and buzz_client_to_keyword, which power the search engine. When you type in an item in the search box, our queries access the keyword table looking for a close, if not, exact match. When it finds that match, it grabs the keywordID which is our way of identifying each unique keyword. We then look in the client_to_keyword table where we grab all of the businesses (unique businessID’s) who have that KeywordID associated with them, as well as the same zip code or one within a certain distance. We do one more query that will take all of the businessID’s and display the information associated with each. Our buzz_zip_codes table is one of the most important tables since it houses all distance and location information. It holds the zip code, city, state, longitude, latitude, county, area code, country, city abbreviation, city alias, and time zone of virtually every location in North America. We can use this information to provide localized search results according to the users input.
Authentication, Privileges and Security
When we first set out on this project, we decided that PHP would be the best language for us since its reliable, safe and secure, fast, stable, and runs on the server side. With PHP, we use sessions which allow us to keep data available for us to use throughout the site, such as the user’s ID, name, zip code, and such. We keep no information in a session that could be considered “private”. When the user logs in, the session is created with some of the elements mentioned above, as well as a “privilege” session variable that helps determine if the user is of the general public, a business, or an administrator, as well as what pages we choose to display. Below is a section of the login script (accesscontrol.php) that is called upon every login and each page load to determine if the user is logged in, and if so, what are his/her privileges.
<?php
include_once 'db.php';
session_start();
$logged=false;
if(($_GET['logout']=="true" || $_GET['action']=="logout") & isset($_SESSION['uid'])) {
$_SESSION = array();
if (isset($_COOKIE[session_name()])) {
setcookie(session_name(), '', time()-42000, '/');
}
session_destroy();
$logged=true;
}
$_SESSION['cur_table'] = "buzz_users";
if(isset($_POST['uid'])) { $uid = $_POST['uid']; }
if(isset($_POST['pwd'])) { $pwd = $_POST['pwd']; }
// Userid is set, continue verification
if(!isset($_SESSION['uid']) & isset($uid) & isset($pwd)) {
$uid = trim(strtolower($uid));
$pwd = trim($pwd);
dbConnect();
$sql = "SELECT * FROM `".$_SESSION['cur_table']."` WHERE active='1' AND user_ID = '".mysql_real_escape_string($uid)."' AND user_pass = PASSWORD('".mysql_real_escape_string($pwd)."')";
$result = @mysql_query($sql);
if (!$result) {
$_SESSION = array();
$_SESSION['error']="Sorry, a database error has occured";
header("Location:
exit;
}
if (@mysql_num_rows($result) == 0) {
$_SESSION = array();
$_SESSION['error']="Incorrect username/password";
header("Location:
exit;
}
// Set the variables to be used later
$row = @mysql_fetch_array($result);
$_SESSION['uid'] = $uid;
$_SESSION['user_ID'] = $row['ID'];
$_SESSION['first_name'] = stripslashes($row['first_name']);
$_SESSION['last_name'] = stripslashes($row['last_name']);
$_SESSION['city'] = $row['city'];
$_SESSION['state'] = $row['state'];
$_SESSION['zip'] = $row['zip'];
$_SESSION['szip'] = $row['zip'];
$_SESSION['email_addr'] = stripslashes($row['email']);
$_SESSION['user_priv'] = $row['user_priv'];
$_SESSION['account_type'] = $row['account_type'];
header("Location:
exit;
}
?>
As you can see above, we safeguard our database from performing certain actions by adding mysql_real_escape_string before the users input. This prevents a “hacker” from trying a SQL injection attack, which can exploit security vulnerability in our database. As stated before, we store no personal information besides their full name and zip code. Future additions include an SSL certificate which will allow us to securely transfer private data. This will allow upbuzz to offer many more services such as online ordering and shopping with credit card processing.
Site Structure
The site structure was created to facilitate the size of the website and allow for future growth. All of the main site design style sheets are located in the /template folder. The main style sheet that controls much of the design for the website is layout.css. header.php and footer.php are also located in this folder. They are included in each page through PHP so that whenever a change to the header or footer of the website needs to be made, it can be as simple as editing one of these files. The /images folder in the /template folder is the location where all of the backgrounds, icons and images that are used through most of the website.
Another main section of site is located in the /buzzpage folder. This is where all the images, style sheets, Javascript and PHP files are located that control how each business’s profile looks and acts. There are the PHP files for each subpage that a possible business could have (Home, Photo Gallery, Menu, Testimonials, etc). The files are set up in such a way that if a business has it marked in the database that it should have a certain page displayed, it will show up for that business.
The /businessgallery folder is filled with the images that companies upload into their own personal gallery. The images are created with the naming structure: companyID_categoryID_ItemID.ext. This makes it so that the files will never run into the problem of writing over other files of the same name. It also makes the images easy to identify because of the IDs that are used. Looking back, we should have created new folders within this folder that were linked to their business. This would have organized the files a little better. The same naming convention and structure was created for the /menupictures folder, which is used for businesses that create a menu.
The /myaccount folder contains the PHP and Javascript files that have to do with the “My Account” portion of the website. This is the place where users can edit their business’s personal information, subpages, personal data, privacy settings and more.
The /admin folder is a completely different and restricted section of the site. It has its own limited style sheet and is restricted so that only site administrators can view it. This is pretty much a web based backend for administrators to manipulate data that is stored in the database.
Coding (PHP, AJAX, Javascript, XML, MySQL)
We chose to create upbuzz with PHP because it’s reliable, fast, and stable in all browsers. We also chose it because it works great with our MySQL database. PHP forms the base of all of our pages which are like templates, where all information is filled in from the tables in our database. We use various Javascript on most pages for error checking and such, while we use AJAX for instantaneous results of database changes. For instance, to verify that the user has entered a valid email upon registering, we ask them to type in a code that we emailed to them. After they type in this code, they click a submit button, and the page displays instantly if validation was successful or not. We use XML only in a few spots of the site, for RSS feeds and the weather on the users welcome page (it displays the local weather according to their zip code on file). The only MySQL code we use are PHP and are for database calls and manipulation.
CSS and Browser Compatibility
When we started upbuzz, CSS was something new to all of us. We knew that CSS was required for all new legitimate websites, but like all new things, it takes some getting used to. Browser compatibility had to be by far the hardest and most irritating obstacle to overcome when designing the site. In the beginning, we would keep testing a design in whatever browser wewere currently using. After having a lot accomplished, we would remember that CSS did not always work the same universally. When checked in other browsers, it would fall apart 75% of the time. As we became more knowledgeable about CSS and the hacks and tricks used, it wasn’t that bad. Internet Explorer 6 gave us the most trouble, namely because it is an older browser that wasn’t made with CSS in mind, but it still has a high percentage of users. Most of these bugs have been worked out and as the site stands now it should be compatible with Firefox, IE 6/7 and Safari.
As the development progressed, we also started to learn the importance of keeping our CSS files neat and organized so that when we needed to find a certain section, it was fast and effective. One trick that has saved a great amount of time is putting in comment tags. If we ever needed to quickly find a section of the main style sheet, opening the find function in a text editor would locate the keyword instantly. For example, a keyword would be “=Friends”.
/* =Friends Page
======*/
#name_contain {
width:350px;
}
.friend_box {
position: relative;
margin: 10px 0;
height: 50px;
width: 500px;
padding: 10px 5px;
border: 1px #ccc solid;
font-size: 12px;
}
The sites main CSS files are located in the /template folder for most of the site and navigation, /buzzpage folder for the businesses profile elements and /admin for the administration section.
Design Elements and Navigation
The main objective of the site design was to keep it clean, easy on the eyes and just generally make the functionality as user friendly as possible. In the beginning we had many different color combinations to build the site on, but we finally decided to go with complimentary colors of blue and orange on a light background. The name of upbuzz was thought up by Lee Francisco as a short word for the concept of finding what all the buzz was about with all the Upper Peninsula businesses. As we were thinking of logos or an image for the site, we thought what most people would think of when they hear the word “buzz”. This of course would be a bumble bee. Dave created several versions of this mascot and logo for the website, but we finally all agreed on the current simple bee logo that appears on the site today. A little fun fact about the bee is that it was created entirely of overlapping orange and white circles with the exception of one ellipse.