Internet Technologies and Web Design Assignment
Thomas McAllister 12711981
Introduction
This website was created to cater for the e-‐commerce and advertising needs of the recently opened small business, Green Beards Ranelagh. The business operates primarily for the purpose of selling cold press juices, and has been open for approximately a week at the time this documentation was created. I approached Ray, the manager of Green Beards, and sought permission to engage the business for this project. I organised a meeting with Ray to discuss the needs of the website, in terms of images, text, menus, and how to cater future expansion. When we first discussed the website, he was very enthusiastic as the shop was only in the building stages.
In the early stages of discussion, Ray was open to many suggestions I put forth about the development and content of the site. Accordingly, we agreed that I would make the website and carry on work on it over the summer to improve it as necessary, once the shop has been open for a while. As the business has been operating for a short time, it was difficult to determine the clientelle to which the website must cater for. As such we agreed to create a simple website and make additions and modification as the scope of the business operation becomes more defined. This will take place in the coming months, and Ray has requested that the website be made in contemplation of future expansion. I have created the website accordingly.
At present the shop isn't doing deliveries. However as the business grows, Ray and the co-‐owner Kevin, plan to add a delivery service to the shop. However, the scope of products for sale are variable at this stage. Kevin and Ray have suggested that they would like customers to contact the shop to place customised orders. As such this website has been created so users can place their orders in the contact section. The website also contains a dynamic sidebar that is connected to a database. This sidebar lists any recent updates. For example, if there is a change in opening hours in a particular week or if there anre any special offers going, the owners only have to add any updates in phpmyadmin, which I'll explain to them how to use. It is also noted that this website is created for ease of use so that any authorised personnel of the business, including those with little technical ability, may navigate and make additions to the website accordingly. Finally, the website was also created to allow easy navigation for website visitors/customers, as requested by Ray and Kevin.
This following sections will discuss business issues, the website content, the website design, an evaulation of the site, an outline of technology issues, and will make an overall reflection of the website development process.
Business Issues
It was important for the website to be useful and fuctional for the needs of the business and future operations.
It's not going to be the e-‐commerce site straight away, as the scope of products sold by the business vary, but hopefully over the summer I can make any necessary improvements and adjustments. Having a website is crucial to any business for the reason of maintaining a strong presence in a competitive business market. So many businesses have engaged in e-‐ commerce practices, therefore having a website is not just an advantage but a necessity for Green Beards. The aim of this website is to attract business from people that might not otherwise have come across the business. The website aims to attract people who have searched specifically for juice related content. It's one of the first cold-‐pressed
juicing. For people who aren't aware of cold-‐press juicing , the website is aimed to spread awareness about the benefits of juicing, and even more importantly, cold-‐press juicing. Since, there are only a couple of other cold-‐press juiceries in Dublin, having a website should be very helpful both in attracting business to the shop and in to assist in promoting the expansion of business well into the future. In his research, Ray travelled to New-‐York to understand cold-‐pressed juicing, and as such the shop has a very modern, clean and minimilistic in style. The website aims to reflect this look.
In terms of cost-‐benefit analysis, there is not much to lose by having the site, especially because it was done for free. Potential downsides are that the website hasn't been tested rigourously in a work environment and there would very likely be a number of teething problems that would need to be monitored and fixed up until it becomes robust.
But overall, I have explained to the business owners and reiterate that having a sort of website is highly advantageous for business sucess in the highly competitive market. The website I have developed should help spread awareness of the shop whilst also providing a means to make customised orders juices online for delivery as the business expands. In his way, the website can attract business that otherwise wouldn't be there, had the owners not engaged a web developer. In the early stages of the business Ray and Kevin will be relying heavily on customer feedback. This feedback can then be analysed to see how much the website is contributing to the success of the shop. A section for feedback has been added in the Contact section of website.
Website Content
I consulted with Ray and Kevin to gather information about what they wanted from the site.This is the first entreprenerial venture that Ray and Kevin have been involved with, and as a result they didn't have any high expectations of what the website should look like. However, Ray did use Wix, the free website builder to make a rough template of a potential site, which they showed me and stressed that I did not have to make an exactly identical website. They asked for a simple and easy to navigate website, with simple drop down menus, content layouts and minimal images. The business owners also requested that the website be made simple to ensure that non-‐technical users/customers may navigate and operate the site with ease.
I used the wix template initially but made a few changes after consulting with Ray and Andrew. Below is the Wix template. In the end, the website was quite different to this, not because of scope creep but more for practical reasons. And I consulted the lads regularly and they were quite happy with final product.
The site is being hosted by a company in Ireland, to allow me to contact them, particularly during Green Beards' business hours if the experiences technical difficulties.The domain name is www.greenbeardsjuicery.com. At the beginning I started off making the site in Dreamweaver but I had issues when using JQuery for the drop down menu. So I just ended up writing the site from notepad ++ and refreshing the page to see how the changes looked. I felt that this was more reliable as when I was using Dreamweaver, the design view wasn't displaying the website anywhere close to what it looked like when I tested it in different browsers.
I used XAMPP v 3.2.1 as my local host when designing the site. This enabled php usage and testing. phpmyadmin was used as the database management interface for mysqli database. I went over how to use the interface with Ray and Kevin. They're not using the site yet, but they were really keen to understand how it might work in the future, particularly in terms of prospective expansion. At the very start of the MSc, before we even did any web development study, Ray had mentioned that he was looking for an inventory control system that could keep records of all stock. However, as the scope of products for sale vary, and as there is not set menu options for their procuts, Ray and Andrew asked that I expand the website at a later stage. I endeavour to this this in the future. Below is an outline of the architecture of the site from a users perspective and below this diagram is another showing the folder structure of the site.
Web Site Design
After coming up with the design of the site, I was able to start writing it up in notepad++, after using Dreamweaver for a while until it didn't work anymore with the JQuery.
The aim was to make the website look earthy or natural to reflect the products that are on sale in the shop. Since the name is green beards, the wrapper class is styled green in the css. Overall, the look and feel are very simple. I really didn't want to complicate the site so that it would be hard to navigate.
There's a simple header at the top of the page, a dropdown navigation bar just under that, a main section in the centre, a sidebar at the right and a footer at the bottom. All of these elements were styled with a border-‐radius of 6 to make the site look a little easier on the eye. I think that it makes it look like the elements are more embedded in the page this way.
Below is a screenshot of the folder where the site is contained. The main page is called index.php.
Instead of writing all of these pages from scratch separately, I used php to get the above pages dynamically based on what the user selects. Inside the html files there is only a small bit of code within body tags to fill the centre area of page. This saved me a good amount of work and makes the website quite responsive. Below is the code used for that.
The navigation bar has the following headings.
The default page settings are to land on ths page. The about tab has two drop downs; "Why Cold-‐Pressed" and "The Benefits of Juices". The nav bar was done with JQuery and when the mouse is placed at the about tab, the drop downs automatically appear. This is slightly deceiving because pressing "About" calls it's own page too. The Juices tab just calls juices.html from the content folder. It's just a list of the five signature juices sold by the shop. The Contact option is unique because it is where one of the tables from the database is called from. Users of the site are able to place orders online in this section and their input can be looked at in phpmyadmin by th people in the shop looking after deliveries.
When you press send this pop us is then made. It's done client-‐side using Javascript.
Orders can be tracked in phpmyadmin.
The second table in the database is to store recent news events/updates such as special offers and days that the shop is closed.It holds only 5 entries at a time based on the date that the update was entered.
Site Evaluation
Green Beards aren't promoting the site just yet until the business gets more established. Both Kevin and Ray like the direction that it's going in. The user-‐friendliness of the site is probably the only thing that they specified. It's a very easy site to navigate through. Over time things will be added to it but the foundation is quite simple and building it won't be too hard. Anything else that's added to the page can be added as a subheading within any of the navbar headings. They both really like the database integration where customers can place their orders online, and the other table where they can put recent news in the sidebar. The sidbar has a limit of five posts that can be made so the most recent posts on the top will knock the oldest off. Me Kevin and Ray were discussing whether to add styling like a background image underneath the text in the about section. But they wanted a really clean feel so we left it very simple. But in the process of trying to put a background image underneaththe text, before we decided against it, the picture accidentaly ended up as a background behind the wrapper. But the guys actually thought it looked good so I left it in.
The aspects of hardware, software and connectivity issues will be discussed in this section. Firstly, in terms of hardware issues, to ensure that the website displayed properly, I tested it in a range of browsers, including Chrome, Internet Explorer, Mozilla Firefox, and Safari. As a result of testing I was able to ensure that the website operates on all the aforementioned web browsers . I also tested it in earlier versions of Internet Explorer and some of the earlier versions of Safari. They all scaled fine with some minor differences on the user interface, none of which adversely affected the appearance or functionality of the site. As the website is simple, end users do not need to have high end computer hardware or graphics cards.
The homepage is saved as a php file and depending what tab on the navigation bar that the user clicks, a different html page from another folder called content is called.
In terms of connectivity, the main issue encountered was when I had to upload my files onto the server. There was a slight issue because I hadn't yet imported the datatbase from the local phpmyadmin to the server version. Initially, the below code was slightly different , but when I created a new database to work beyond the host computer, I needed to change the password and database name.
php code was used to connect with the MySQLi databse. The below image reflects this element of connectivity.
I used phpmyadmin to make the tables in and to manage the database.
I transfered the files from my root folder into the public_html folder on the server.
For the software aspects of the project, I endeavor to prepare a technical document so that other web-‐developers engaged by the managers will be able to understand the operation of the code and what programming languages were used. This will be useful for software troubleshooting purposes. I started off coding the site using Dreamweaver and transitioned to notepad ++. And while developing the site from my laptop I used XAMPP.
Reflection
Doing this website was a great learning experience and doing the code and construction of the site hands was crucial to my learning. I read a book on html and css, looked at php code online to try and get an understanding of it and attended lectures on the area. But all of these alone aren't enough to get a decent grip on web-‐design. I can realy understand why people in that industry say that you have to learn the theory first, but the only way to get a real understanding of the ins and outs of web-‐design is to go and do it. I learned that it's a long process when you're a beginner to get a web-‐site up and running. But also, with the repitition involved in making a site, you eventually slowly start to absorb the information and certain rules become a little bit more second nature. I can see why people say that it's so important to keep on top what's happening in technology. I had no idea what a dynamic site even meant a few months ago, but now I know that php is the language used to talk to databases and other technologies on the server side. I found the theory behind things like server-‐side scripting a lot fairly ok to understand initially, but the application of the technologies was a lot harder in my opinion. Generally, I have a habit of reading up on topics and getting some sort of understanding but without doing the hands-‐on part. I've been doing that for years. This project was a great chance to really get stuck into the practical application of the technologies, and I was forced to stick to it when I had an urge at times to get distracted. In this way, the project has helped me to learn to really focus and stick with problems long enough to solve them, rather than getting disheartened when something doesn't work completely perfectly. The project has helped me to prepare for what it might be like in the work place. This experience has given me a real appreciation for the amount of effort that goes into making a site. It's a really good feeling when you can see the results of your work on a computer screen. A few months ago, before starting on the MSc it was frustrating me the way I knew literally nothing about computers or programming. This site shows how far the class have come and how fast too. We've learned an incredible amount in a really short time. The rate of learning was incredible. I can definitely see myself getting into building a few websites as a hobby or even in work but I really need to hone the skills because seeing how long it took to make a simple site made me realise that I've got a long way to go. But that's ok, because the material is interesting and learning new technology is fun for me.
The main materials that I used to learn from were lecture notes, the W3C website, a reference book on HTML and CSS, google for the php, database and dynamic parts of the site. I used youtube a bit too but not as much. I find youtube really good for helping to teach general coding concepts but for actually finding out things to do with database integration, google was more helpful.
Overall, building the site was a great experience and very challenging at times. The whole experience helped me gauge where I'm at with web-‐development . Even though I'm not as strong at the php and database side of things compared to HTML and CSS, building the site helped me to get good exposure to that part of development. Putting the theory part of what we learned in the classroom into practice was very rewarding.
