D4DME – Final Evaluation

With the website now being completely finished I decided to evaluate how I have done over the module and how far I have come in terms of coding skills. I have 100% improved my knowledge and ability to code as the independence of writing the code with others of the same standard makes you try harder to find out solutions – not just asking Kyle.

I feel confident with PHP and HTML and look forward to working with them again, HTML is our next project and as we didn’t do a huge amount in this project, I can improve my skills throughout the next module.

Throughout this project we faced many problems – some we fixed ourselves and some that Kyle was needed to explain to us the issue. Whenever Kyle did help us, we would always go into the labs straight after and work on the area he helped us with so that we made sure we understood exactly where we went wrong and how to avoid going wrong in the future.

If I were to improve anything in this project, it would be to have included some more database tables such as a file uploader or a more complex sign up form. The project has shown me the importance of contributing when working in groups and gave me a sense of what it would be like in the ‘real world’ and working as a part of a production team.

D4DME – Progress made over the Easter Holidays/Finishing Touches

Over the Easter holidays I decided to focus on tidying up all the code and making sure it was all formatted correctly so that it will be easy to read when being marked/looked at. I split this task up over a few days as it was less tedious that doing it all in one. Another thing that Rob and Kyle suggested we do to our code is comment it so that each chunk could easily be understood by us when editing/explaining it due to us not being overly confident with what every line meant off the top of our heads. We spoke in our group chat about splitting up the pages between us so that the job could get done quicker. Due to Amy and I writing all the code we thought it would be best if we split the pages between us as we had a better understanding of what each chunk was responsible for. I decided to comment the code on the meet the team, login and signup pages and then Amy commented the code on the post and index page as these had more code involved. Below is an example of what the commenting looks like in brackets.


The website is now coded properly with formatted and commented code and the PHP functions work – connecting to a database via a local server. As we managed to finish the back-end of the project with some time to spare we spent the majority of our time before easter using Bootstrap to perfect the aesthetics of the website so that the user experience would be improved. Although this wasn’t explicitly asked for us to do, we decided that in order to become confident with coding and design websites – practice is key so we took this project as an opportunity to explore and add to our knowledge of coding and brackets. Doing this, allowed me to practice previous skills used in workshops but be able to understand them and explain them in my own words – also learning various shortcuts in the Brackets programme which will be vital in future project in the next semester and next two years at university. Below are a few screenshots of how we have made the website more appealing to the eye through Bootstrap and CSS coding.




D4DME – Databases

As in this unit we are required to connect to and create a database, Rob and Garrett thought it would be helpful for us to have a couple of seminars looking into databases and the many roles they take on. I haven’t previously had much experience with databases so had to do some wider reading in order to understand the information taught to us in the seminars.

We looked at the associative database model which (to my understanding) is a model which works with entities that have an independent existence and the relationships between the entities are described as associations. The associations main purpose is to identify the relationship between the subject and the object. (Team)

It’s thought to be similar to the ERM however it differs slightly as an associative database creates excess storage for custom data for each user. This database is used when different data needs to be stored – as it can easily differ between various pieces, unlike the ERM.

Another database case study we looked at was The Memex which is a hypothetical machine written about in an article from 1945 entiltled ‘As We May Think’. We learnt that the article described a machine which has the potential to record a persons life (via text, voice, photography and video). This recording of ones life can also be played back and navigated through in any order via associative links inputted by its user (hyperlinks). In the seminar some of us were thinking – this is what we now call the computer or laptop or tablet or mobile. We are all familiar with hyperlinks online when you are redirected to a new page, image or piece of information.

A final database case study we looked at was Ted Nelson and Project Xanadu which is his 55 year project by which he attempted to build a computer network with a simple user interface. Its said that Xanadu will probably never be finished and will continue to be an idealised network which contains many important ideas that will remain to be used. Ted Nelson believes that interactive systems should the user maximum flexibility and not be restricted to a set of choices – limiting users possibilities.


Team, Editorial. ‘The Associative Model | Online Learning’.Learn.geekinterview.com. N.p., 2008. Web. 20 Mar. 2015.

D4DME – Web 2.0, USENET and BBS Research

Over Easter, I decided to look back at what Rob had mentioned about Web 2.0 and various other subjects to research more into if we were interested. After the Net Neutrality research, I have been eager to find out and learn more about the history and unknown information of the World Wide Web. I knew that I wouldn’t be able to find out the information I needed without some in depth research. I researched into Bullet Board Systems, USENET and when Web 2.0 met Usenet 1.0.

BBS is a computer server which allows users to connect to the system using a terminal program, and enables them to post, upload, download, IM and much more. This is similar to what our groups are creating for this project as users have to sign up, log in and then post to the home page for everyone to see – even those who aren’t logged in. (Wikipedia)

Usenet is a worldwide Internet discussion system where users read and post messages (articles) to one or more categories – known as newsgroups. Usenet is very similar to BBS and the discussions are threaded just like BBS but the posts are stored on the server sequentially. (Wikipedia)


Bbsdocumentary.com,. ‘The BBS Software Directory’. N.p., 2015. Web. 1 Apr. 2015.

Linux Magazine,. ‘Web 2.0, Meet Usenet 1.0’. N.p., 2015. Web. 1 Apr. 2015.

Wikipedia,. ‘Bulletin Board System’. N.p., 2015. Web. 1 Apr. 2015.

Wikipedia,. ‘Usenet’. N.p., 2015. Web. 1 Apr. 2015.

D4DME – Net Neutality

Net Neutrality, in a nut shell, is a network design paradigm which argues for broadband networks providers to become detached from the information thats sent over their networks. It believes in the idea that there should be no piece of information that is prioritised over another. In other words, information networks (the internet) are most efficient and useful when they are more attentive and responsive to multiple users. (Ocf.berkeley.edu) Net Neutrality is described as the Internets guideline principle – preservation of our right to communicate freely online and accessing an open internet. (Press)

In my opinion, after researching into the subject, Net Neutrality is the idea that internet providers are unable to access private information as like phone companies cannot access your private information stored in your phone or over phone calls. It frees up space where information may have been stored and allows the internet to become open and free for all to use and surf.

Some argue that Net Neutrality is needed in order to become equal with telephone and cable companies who, as providers, have to pay to use the service – whereas providers of companies online don’t incur this cost. Net Neutrality proposes to charge both the user and the provider – doubling the money made from the internet. (Wiki.openrightsgroup.org)

Contrasting this, there are many arguments against Net Neutrality. People believe that no on wants the government to regulate the internet due to it steering away from being an ‘open internet’. Also, companies such as Google, Yahoo and Microsoft will benefit greatly from a rise in profits which they won’t be paying for.

FCC is a US independent agency which regulates all communications. Net Neutrality in the US meant that companies like AT&T, Comcast and Verizon wouldn’t be able to offer a pay-to-play fast lanes due to users speaking out. The FCC originally allowed these companies to offer the service before proposing a change which gave internet users the best possible protection. (Press)

A more relevant discussion is about OFCOM – the UK government approved agency which regulates and manages communications in the UK. (Wikipedia) Ofcom stated in 2011 that due to growth in the use of the internet may require new approaches to traffic management.

I was able to have a clearer understanding about the problem Net Neutrality is aiming to fix after researching into OFCOM as it explains that due to increases in demand from users – providers/network officers find it more challenging to meet this demand and have no way of distinguishing between users – therefore bringing the idea of users paying for a prioritised service. It became even clearer when the example of eBay seller fees was given – with it being something I personally pay, and I can now understand that I pay this fee because I have used eBay as a platform for personal business and if I didn’t pay these fees then the traffic for this service would be uncontrollable.


Ocf.berkeley.edu,. ‘NET NEUTRALITY: Definition’. N.p., 2015. Web. 22 Mar. 2015.

Press, Free. ‘Net Neutrality: What You Need To Know Now’. Free Press. N.p., 2015. Web. 22 Mar. 2015.

Wiki.openrightsgroup.org,. ‘Net Neutrality – ORG Wiki’. N.p., 2015. Web. 22 Mar. 2015.

Wikipedia,. ‘Ofcom’. N.p., 2015. Web. 22 Mar. 2015.

D4DME – Incorporating jQuery/Draft

In this weeks workshop we began looking at jQuery and Kyle showed us how to use the simple toggle up function and suggested that it would be useful to use it in our current projects to improve skills – especially in javascript as we have not done much work on that and will be using it in the next unit. I managed to manipulate the code we used in the workshop to make the login and signup box toggle up and down from the buttons on the nav bar. This makes the website more aesthetically pleasing for the user and there is more information for them initially displayed. It also keeps the homepage free to store more information near the top of the page instead of the login/signup boxes taking up the majority of the visible page. The thing that we couldn’t grasp was stopping the login box being able to toggle down the same time as the signup box was opened. We played around for about an hour trying to use the ‘hide’ function but we kept just hiding the box completely. We asked Phil the next day if he had any idea how to achieve what we wanted and he luckily did. Instead of using the ‘hide’ function in the html file we had to add it to the css class of the boxes. We added in ‘display: none’ and then in the Javascript we made it so that if the signup button is clicked, the signup box becomes invisible and toggles up before the login box toggles down and visa versa. display none scrn shot js scrnshot Josh brought along his name ideas, logo and banner today for us to look at and we all agreed on the name ‘sitter search’ and below are the first drafts of the logo/banner ideas. We inputted the banner images into the carousel so we can visualise what the final home page would look like.


D4DME – Using Bootstrap for CSS/JS and Research into Existing Websites

Now we had now got the login and signup databases working me and amy decided to work on the css of the site and choose which buttons, shapes and layout we wanted to grab from bootstrap. We knew that we wanted the page to look clean and modern as the existing websites we found for advertising babysitters were very cluttered and looked unprofessional. Below are the 5 styles we liked from the Bootstrap file so we linked them up in our css file in brackets.

Navbar: bsnav




Carousel: bscaras

Me and Amy spoke with Josh and he liked everything we had done and gave us some suggestions on how we could make the website more navigational. We then decided to give him the task of selecting a colour scheme, creating a logo/banner and deciding on a font to use throughout the site.

All we had to do now regarding php was create a final database which allows users to post to the site and for their ad to appear on the homepage. I wasn’t too worried about the code for this section as we had created a very similar thing in a previous workshop which I remember clearly so should hopefully be able to understand the code from that workshop and incorporate it into our website.

I decided to research into existing websites – not just babysitting ones but various cooking, cleaning and other advertising websites to see how they had their users post what they wanted. I discovered that they all followed the same structure of having their users post go to the home page so that anyone that visits the site is immediately shown the information they want to know. There is usually information about the service being provided above the results but all the vital information appears on the home page. I decided that we should follow this same structure for our website and have each post go to the home page underneath the carousel which would display information about our babysitting services.

D4DME – Connecting to the final database

This week has been us trying to figure out how to get the user to fill out the profile form and for that information to be posted in a separate box on the home page.

As I mentioned before, we did a similar task like this a few months back but me and Amy didn’t have to files we used back then. We managed to get a basic outline of the code we needed – using youtube tutorials and other seminar members help. After we tried for a few hours to get it to work we decided to arrange to meet Kyle next week and see if he could explain to us where we were going wrong.

So that the meeting wasn’t completely unproductive. We thought we’d help Josh with the colour scheme hunt and found these few colour schemes we thought would fit in with our target audience of mothers looking for a babysitter. We wanted to have an elegant, slick design to make our website look professional as we found with other babysitting ad websites have been very childish and non-legit.

At the end of the meeting we managed to create the database and get it to post onto the homepage only if we inputted the data directly into the form on phpmyadmin but when you try to fill out the form on the profile page – the data is not reaching the database and therefore not posting.

Following our meeting with Kyle:

During our meeting with Kyle he explained to us that in order for the information to be submitted to the database table we had set up, we needed to use the “INSERT INTO ____” which meant that the information the user inputed into each field would update the database table. We again included a message which appears if the user either successfully or unsuccessfully makes a post.


In order for this post to appear on the homepage we decided to make a separate file for the box that the post would appear in to avoid clogging up the index php file with unnecessary code. We then needed to link this box page to the index page along with a small section of code. This kept the work nice and organised which meant that we could easily edit a section of code if a particular function wasn’t working on our site.



D4DME – Creating Sign Up Form/Meeting with Kyle

The way in which we create a sign-up form is different to how we made the login form. The login form uses the query ‘SELECT * FROM’ which means that it looks up existing users already uploaded into the database and grants them access if they exist. Below is the code which shows the back end process of connecting to the database. The ‘$_SESSION [“message”]’ and ‘$_SESSION [“username”]’ create a message which pops up when the user successfully logs in and reads “Success, welcome back {username}”. If the user fails to log in “Wrong username/password” pops up.

login request

When it came to figuring out how to manipulate the above code to allow users to sign up with a username and password was the difficult part. We created a new page called ‘signup.php’ and used the same code and just edited the various sections – however when a user tried to input their new details, they didn’t submit into the database.

We looked online for some solutions to help us but we could seem to get it to work so we decided to arrange a meeting with Kyle to see if he could help explain to us where we were going wrong. He immediately saw the problem and it was that instead of ‘SELECT * FROM’ it should be ‘INSERT INTO’ as you are adding information to the database not selecting it. Once we altered this – users were able to sign up and then login with their username and password. The code for the sign up page is below.

signup code

Whilst we were with Kyle in the meeting we asked him if it would be possible to remove the option to login and sign up once the user had logged in and instead show up the ‘New Post’ button. He managed to show us using an existing project he had worked on so we could decide how we wanted it to look. In order to do this we had to work in the index.php file and write out code which translates to “if the user is not logged in then include the login and signup button on the page” this meant that when the user is logged in, the login and signup buttons will not appear.

login:signup in user loggin

D4DME – Group Work Progress

So far as a group we have managed to make some progress on the project. Me and Amy began to work o the back end of the website as this was what was recommended by Kyle. Once we finish and achieve a working basic website you can focus on making it look nice. The main marks are coming from the functionality of the site so we wanted to ensure this was the more impressive part of our project.

This was started by opening up brackets files from previous workshops we had following up to the unit. We analysed which code we wanted to use and manipulated it into our new brackets file. We tried to incorporate as many functions as we could so we could practice what we learnt in these previous workshops and display evidence that we understood what was shown to us.

Me and Amy began the php side of things by logging onto phpmyadmin and creating the first database table we would use for the website (see below). This was where the users would be logging in and the database would have to recognise a users details and allow them access to enter the site and post onto the homepage. The way in which we connect to the database is via a server – we use dakar.bournemouth.ac.uk.

table 1We then discussed that it would be more effective and time-efficient for us to use Bootstrap to design the website as its a much simpler way to make the site look professional and aesthetically pleasing, especially as we aren’t getting marked on how nice it looks.