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.

References:

Team, Editorial. ‘The Associative Model | Online Learning’.Learn.geekinterview.com. N.p., 2008. Web. 20 Mar. 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.

References:

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.

draft

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

Buttons:bsbutton

Images:bsimg

Form:bsform

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.

insertinto

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.

box

box1

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 – PHP SQL Workshop 1&2

In this weeks and last weeks workshop we were introduced to phpMyAdmin which “is a free and open source tool written in PHP intended to handle the administration of MySQL with the use of a web browser. It can perform various tasks such as creating, modifying or deleting databases, tables, fields or rows; executing SQL statements; or managing users and permissions.” (en.wikipedia.org/wiki/PhpMyAdmin)

We have been introduced to MySQL before but I wanted to do a bit of background research so that I could be exactly clear on what I am using in this project.

MySQL “is a popular choice of database for use in web applications, and is a central component of the widely used LAMP open source web application software stack (and other ‘AMP’ stacks). LAMP is an acronym for “Linux, Apache, MySQL, Perl/PHP/Python.

On Tuesday we began by navigating around phpMyAdmin, we learnt that the Structure tab is where you build your table, SQL tab is where you can input SQL statements – similar to the Query tab where you insert queries. The Search tab allows you to search the entire database for a specific piece of data. Insert tab allows you to insert information into the database manually. Finally, Export and Import tabs render out and download your database.

phpmyadminform

We used Brackets and FileZilla to run the php file on the internet. Brackets is a modern text editor which allows you to design web pages. We worked in a folder called project and it contained various pages: index.php, connect.php, header.php, footer.php and normal.css.

php screenshot

We created out form on phpmyadmin which requires the user to input their name, description, city and gender. We then transfer and create the webpage for this form within our index.php page. We have to first connect to the phpmyadmin database using our username and passwords and then we insert some if statements. We also learnt how to make a message pop up and say “invalid gender” using an if statement. Within the index.php file we were also able to sort the database results in order from ASC and DESC user ID’s. Below is all the code which outputs this function.

code2

code3