Styling the Web-App

Standard

The majority of the code had now been written and I had decided to have a play around with the CSS and styling of the site as it had been quite plain.

Amy and I found a couple of different colour schemes online (specifically the sitehttps://color.adobe.com/explore/newest/?time=all) to start off with to get some inspiration:

Screen Shot 2015-03-17 at 17.07.06Screen Shot 2015-03-17 at 17.05.45Screen Shot 2015-03-17 at 17.05.30Screen Shot 2015-03-17 at 17.05.19

We also found this tile background from http://subtlepatterns.com/ that we could potentially use. This was our background till we decided that we needed to properly style the site.

geometry2

We also had the idea of creating a “cloud theme” background so I put together a basic cloud background in Illustrator and we placed it into the site and decided that it didn’t work at all and we decided to leave the styling to the end of the project.

Screen Shot 2015-03-17 at 17.15.35

cloud backgroundJosh hadn’t contributed much towards the code so we gave him the job of styling the site. He came up with the Mary Poppins inspired logo and used purple and grey as his main colours. After changing the CSS to fit this scheme (for example changing font colour and border colours). However after changing all of these elements and uploading them to the dakar I thought that the scheme didn’t really fit our audience. We had set out to make a modern and aesthetically pleasing website as that made our site different to our competitors. I spent some time playing around with different layouts using the colour palette Josh had suggested but I thought that it didn’t really suit out site. Below is some images of all of some of the layouts I tried.

Screen Shot 2015-03-23 at 19.10.10 Screen Shot 2015-03-24 at 14.16.51 Screen Shot 2015-03-24 at 14.42.27 Screen Shot 2015-03-24 at 15.36.40

After this process I decided to completely start from scratch. I thought that we should have a dark background with some bright colours. I had a look online and found some relevant colour palettes that I could use:

In the end I found one that I liked and used it to create the banners below (found on the carousel).

greybanner1 greybanner2 greybanner3

I also decided to make a small logo for our site. As we had named this web-app Sitter Search I was trying to combine the idea of children and “finding something”. I had the idea to combine a baby rattle and a magnifying glass. I wasn’t completely happy with the result but I didn’t really have enough time to perfect it.

Screen Shot 2015-04-18 at 15.42.04

This is what the site looked like once I had adjusted the CSS and elements like the carousel images:

Screen Shot 2015-04-18 at 15.58.23

Advertisements

Timestamp

Standard

I decided that I would try and add a timestamp to the post that come up on the homepage. To do this I needed to add a timestamp row on PHPMyAdmin so it would record the time that the post was submitted. Adding this feature would prove to be  an aesthetic element to the posts and also meant that sorting the post by most recent would be easier to do.

This is a video someone recommened me to watch that gave me the details to add a timestanmp onto the post:

I used this video to understand what code to write and how it worked. I ended up changing the layout of the timestamp so that It said “3 hours ago” or “2 minutes ago”.

Firstly I had to create the function which would cause the time to be posted in the post box. This code also included the way that the timestamp would be printed and named the function as “$timestamp”. The code below is the code I wrote for the functions.php file.

class convertToAgo {
    function convert_datetime($str) {
        //sets the timezone to UTC
	   date_default_timezone_set('UTC');
        //explode breaks a string into an array
   		list($date, $time) = explode(' ', $str);
    	list($year, $month, $day) = explode('-', $date);
    	list($hour, $minute, $second) = explode(':', $time);
    	$timestamp = mktime($hour, $minute, $second, $month, $day, $year);
    	return $timestamp;
        //this function converts into a timestamp in the "2015-01-01 12:12:12" format
    }
    function makeAgo($timestamp){
	
   		$difference = time() - $timestamp;
   		$periods = array("sec", "min", "hr", "day", "week", "month", "year", "decade");
   		$lengths = array("60","60","24","7","4.35","12","10");
   		for($x = 0; $difference >= $lengths[$x]; $x++){
   			$difference /= $lengths[$x];
   			$difference = round($difference);
        }
   		if($difference != 1) $periods[$x].= "s";
   			$text = "$difference $periods[$x] ago";
   			return $text;
        //this function gives out the differences between the time and the timestamp-time
    }
} 

Screen Shot 2015-04-17 at 18.08.58

The next step was to place the function in box1.php as the timestamp needed to be shown in the box with the other profile information. This linked the database time data with the function so it could find the right information to use.

include_once("../includes/functions.php"); // Include the class library
    $timeAgoObject = new convertToAgo; // Create an object for the time conversion functions
    // Query your database here and get timestamp
    $ts = $row["dateofpost"];
    $convertedTime = ($timeAgoObject -> convert_datetime($ts)); // Convert Date Time
    $when = ($timeAgoObject -> makeAgo($convertedTime)); // Then convert to ago time
    ?>
    
    <div class="time_ago" <h2><?php echo "".$when; ?></h2> </div>

This is the code I placed into the box1.php file. Screen Shot 2015-04-17 at 18.08.01

I then styled this timestamp in the CSS by making the font slightly opaque and giving the text a different colour.

Screen Shot 2015-04-17 at 18.19.46

Creating Sign Up Form

Standard

We created the sign-up form in a slightly different way from other forms like the login form. The ‘SELECT * FROM’ query was used so that it can look up the existing users and lets them log in to the site.  The ‘$_SESSION [“message”]’ and ‘$_SESSION [“username”]’ bits of code echo out a message which tells the user whether or not they have logged in successful.

login-request

This part of the code was slightly complicated as we had to adapt the code so that a user could log in with their username and password. The singup.php was used so submit their details when they signed up. This was code we used in other areas of our site. However we kept on having errors with this code including the data not being placed onto the database and then the user not being able to log in. Another problem we couldn’t overcome was that someone could create a user without typing anything in the fields as we did not know how to set the character limit for the password and username. Kyle helped us sort out some of these errors. He noticed that we had put ‘SELECT*FROM’ in the code but it actually needed to be ‘INSERT INTO’ as we were trying to add data to the database rather than pull it from the database. This finally made the sign up page work and we were now able to log into our site.

This is the code for the sign up page form:

signup-code1

After being able to log in we now realised that when you logged in you could see the log in feature in the nav bar and we wanted to show the ‘New Post’ page at the top so a user was able to create a profile. We thought that this might cause errors and it didn’t look right for it to be there if a user was already logged in so we asked Kyle how to do this and there was an easy fix for it. We had to work out the code that would mean that “if the user isn’t logged in then show the login and sign up button on the page”. It was a simple bit of code to add to hide and show the elements we wanted in different situations.

loginsignup-in-user-loggin

PHPMyAdmin

Standard

For this project we needed to create 2 databases on the PHPMyAdmin server. One was needed to record usernames and passwords and the second was to record the data from the profiles.

This is the database for the usernames and passwords:

Screen Shot 2015-04-17 at 16.37.51

This was the structure for that database:

Screen Shot 2015-04-17 at 16.39.18

The second database was slightly more confusing. We had to remember to make an ID row and name all of the elements appropriately so we could accurately link this table to the form we will create using PHP. This is the second table:

Screen Shot 2015-04-17 at 16.41.25

This was the structure for this database:

Screen Shot 2015-04-17 at 16.41.37

To add this to our code we needed to create a connect.php file and link this PHPMyAdmin database to our code. This is what it looks like:

Screen Shot 2015-04-17 at 16.42.51

Below is the code from the signup.php and is where we linked our PHPMyAdmin to the code and created the form where the user would be able to submit their information and then it would save on the PHPMyAdmin and then would be echoed out on the homepage as a profile.

&lt;?php require_once(&quot;../includes/session.php&quot;); ?&gt;
&lt;?php require_once(&quot;../includes/connect.php&quot;); ?&gt;
&lt;?php require_once(&quot;../includes/functions.php&quot;); ?&gt;
&lt;?php include_once(&quot;../includes/templates/header.php&quot;); ?&gt;

&lt;a name=&quot;formlogin&quot;&gt;&lt;/a&gt;
&lt;a name=&quot;formsignup&quot;&gt;&lt;/a&gt;

&lt;?php

    if(isset($_POST[&quot;post&quot;])) {
        $fullname = ucfirst($_POST[&quot;full_name&quot;]);
        $email = ucfirst($_POST[&quot;email&quot;]);
        $age = ucfirst($_POST[&quot;age&quot;]);
        $gender = ucfirst($_POST[&quot;gender&quot;]);
        $personalprofile = ucfirst($_POST[&quot;bio&quot;]);
        $location = ucfirst($_POST[&quot;location&quot;]);
        $user_id = $_SESSION[&quot;user_id&quot;];
        //$photoupload = ucfirst($_POST[&quot;photo_upload&quot;]);
        //$cvupload = ucfirst($_POST[&quot;cv_upload&quot;]);

        $query = &quot;INSERT INTO newpost (user_id, full_name, email, age,
 gender, bio, location) VALUES ('{$_SESSION['user_id']}', 
'{$fullname}', '{$email}', '{$age}', '{$gender}', '{$personalprofile}',
 '{$location}')&quot;;
        $result = mysqli_query($connection, $query);

        if($result) {
            $_SESSION[&quot;message&quot;] = &quot;Post successful&quot;;
        } else {
            $_SESSION[&quot;message&quot;] = &quot;Something went wrong!&quot;;
        }
    } else 

    
            {
            $fullname = &quot;&quot;;
            $email = &quot;&quot;;
            $age = &quot;&quot;;
            $gender = &quot;&quot;;
            $personalprofile = &quot;&quot;;
            $location = &quot;&quot;;
            //$photoupload = &quot;&quot;;
            //$cvupload = &quot;&quot;;
        }

?&gt;

&lt;div class=&quot;container&quot;&gt;
    &lt;h3 class=&quot;post&quot;&gt;New Post&lt;/h3&gt;
    &lt;div class=&quot;jumbotronlogin&quot;&gt;
	    &lt;div class=&quot;row&quot;&gt;
	        &lt;div class=&quot;col-md-12&quot;&gt;
	            &lt;div id=&quot;form-box&quot;&gt;

                &lt;form action=&quot;profile.php&quot; method=&quot;post&quot;&gt;
                    &lt;div class=&quot;form-group&quot;&gt;
	&lt;label for=&quot;inputName&quot;&gt;Full Name&lt;/label&gt;
		&lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;full_name&quot; id=&quot;exampleInputName2&quot; placeholder=&quot;Full Name&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;form-group&quot;&gt;
	&lt;label for=&quot;inputName&quot;&gt;Email Address&lt;/label&gt;
		&lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;email&quot; id=&quot;exampleInputName2&quot; placeholder=&quot;Enter Your Email Address&quot;&gt;
                    &lt;/div&gt;

                    &lt;div class=&quot;form-group&quot;&gt;
	&lt;label for=&quot;inputName&quot;&gt;Age&lt;/label&gt;
		&lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;age&quot; id=&quot;exampleInputName2&quot; placeholder=&quot;Age&quot;&gt;
                    &lt;/div&gt;

                    &lt;div class=&quot;form-group&quot;&gt;
	&lt;label for=&quot;inputName&quot;&gt;Gender&lt;/label&gt;
						&lt;select class=&quot;form-control&quot; name=&quot;gender&quot;&gt;
				            &lt;option&gt;Please Select&lt;/option&gt;
				            &lt;option value=&quot;male&quot;&gt;Male&lt;/option&gt;
				            &lt;option value=&quot;female&quot;&gt;Female&lt;/option&gt;
				        &lt;/select&gt;
                    &lt;/div&gt;

                    &lt;div class=&quot;form-group&quot;&gt;
	&lt;label for=&quot;inputName&quot;&gt;Personal Profile&lt;/label&gt;
                    &lt;textarea name=&quot;bio&quot; class=&quot;form-control&quot; rows=&quot;3&quot; placeholder=&quot;250 Characters&quot;&gt;&lt;/textarea&gt;
                    &lt;/div&gt;

                    &lt;div class=&quot;form-group&quot;&gt;
	&lt;label for=&quot;inputName&quot;&gt;Location&lt;/label&gt;
		&lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;location&quot; id=&quot;exampleInputName2&quot; placeholder=&quot;Location&quot;&gt;
                    &lt;/div&gt;
                    
                    
                     &lt;!--&lt;div class=&quot;form-group&quot;&gt;
                        &lt;label for=&quot;exampleInputFile&quot;&gt;Photo Upload&lt;/label&gt;
                        &lt;input type=&quot;file&quot; id=&quot;exampleInputFile&quot;&gt;
                    &lt;/div&gt;

                    &lt;div class=&quot;form-group&quot;&gt;
                        &lt;label for=&quot;exampleInputFile&quot;&gt;CV Upload (optional)&lt;/label&gt;
                        &lt;input type=&quot;file&quot; id=&quot;exampleInputFile&quot;&gt;
                    &lt;/div&gt;--&gt;
                    &lt;input type=&quot;submit&quot; name=&quot;post&quot; class=&quot;btn btn-default&quot;&gt;
                &lt;/form&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;/div&gt;


&lt;?php include_once(&quot;../includes/templates/footer.php&quot;); ?&gt;

The signup would mean that a user could sign in and if the data was different to what was on the PHPMyAdmin then it would not log them in.Screen Shot 2015-04-17 at 16.43.08

Bootstrap

Standard

For this project we decided to use bootstrap as the source of our CSS and jQuery. This decision was made as we wanted to concentrate our efforts to make the PHP and HTML work rather than spend a long time trying to get the CSS to work. Another point was that we looked at Bootstrap and decided that it would be a good thing to use as it would increase our knowledge of a widely used form of CSS.

We started by having a look at the videos on the internet on how to set up Bootstrap and link it into out HTML page. This is one the videos I used to understand Bootstrap in more detail:

Bootstrap 3: Getting Started (part 1: setup & adding templates) from Ericca Hope Garrison on Vimeo.

We had a look on the website to see some of the elements of Bootstrap we could use in our website. These elements include:

  • Carousel
  • Form
  • Buttons
  • Nav bar (we wanted it to be static)
  • General alignment
  • Jumbotron (to use as divs within the page)
  • Image elements (circular images)

One of the more complicated parts of Bootstrap was the Javascript elements like the carousel. We liked the default one given to use on Bootstrap so copied the code. The hard part was working out where to place this code and how to adjust the code to add our images.

 

This is what the Bootstrap code looks in our project:

Screen Shot 2015-04-17 at 16.10.11

Meet the Team Page

Standard

Are first task towards the making of out web-app was to make a basic Meet the Team page using basic HTML and CSS. We used the previous files we had made in tutorials with Kyle and just input the elements we needed like an image, link to our blogs and a paragraph to put a small bio about all of us.

meet-the-team-code

We had used Bootstrap to make this site by creating some large columns so we could have 3 small sections in the middle of the page. Bootstrap made this process a lot faster as we didn’t have to fiddle around with alignment or much CSS. We could also make our images circle and adding buttons that link to our blog by using one of the elements from the Bootstrap site.

plain-meet-the-team

In the screenshot below it shows us also using the default Bootstrap navigation. This nav bar was exactly what we wanted to use for our project as it was simple and we were able to fix it to the top of the page very easily. This left us with a completed meet the team page and a good shell of a website to build the next part of the code from.

meet-the-team-actual-page-basic

This is the code for the buttons from Bootstrap:

bsbutton

This is the code for the nav bar from Bootstrap:

bsnav

This is the code for the circular images from Bootstrap:

bsimg

Website Planning

Standard

Before we started to write the majority of the code we planned how we wanted the website to look and planned what code needed to be written or researched.

I drew a basic sketch of the website’s layout.

wireframe

Firstly we decided how the website would work and the elements we would have on each page. We decided that we would have a sign up, log in and log out. To be able to post a profile you would need to have an account and then sign into the website to be able to post your own profile. I also suggested that we could add a feature where a user could delete their own profile if they are logged in. We asked Kyle some details on how to make the photo upload work and due to permissions on the server it would have been tricky to do so we left that element out.

Overall we successfully worked out the general elements and features of our site so we could go ahead and start to code our site properly.