D4DME – Displaying the Data

The next step in my PHP journey was to get the user-inputted data to display on the page as ‘recipe’ boxes.

$query = "SELECT * FROM recipe"; // V: The query is selecting all the data from the recipe table
	        }
			$result = mysqli_query($connection, $query);// V: defining the variable result by putting our connection variable and our query variable through a function
			if(!$result) { // V: If the query doesn't work, kill the connection and feedback to user
				die("Database query failed.");
			}
		    while($row = mysqli_fetch_assoc($result)) { // V: whilst our query works, include recipe.php to display data
		    	include 'recipe.php';
		    }

The query simply selects all of the data from the recipe table. If the result is successful, the function below splits it up into rows so that each recipe entry is a separate array.

<?php echo ($row["recipe_title"]); ?>
<?php
        if (!empty($row["recipe_image"])) { 
            $imageName = $row["recipe_image"];
        } else {
            $imageName = "images/Untitled.png";
        }
  	?>
<img src="<?php echo $imageName; ?>" />
<?php echo ($row["recipe_cooktime"]); ?>
<?php echo ($row["recipe_cuisine"]); ?>
<?php echo ($row["recipe_allergy"]); ?>
<?php echo ($row["recipe_description"]); ?>

The PHP above takes each part of the array and echos it separately, thus displaying the data in the format that we want it.

D4DME – HTML Forms (Part Four)

Having completed the sign-up form, all I had to do for the next one was tweak a few details.

Untitled

Screenshot of my submit form

The only things that needed to be changed were the names of the fields and certain input options (drop downs rather than text entry). Aside from this, and the change in sql queries, the code was exactly the same.

Note:

The image entry field is currently a text entry because I could not work out how to create an upload query that worked with the dakar server. I managed to make the upload function work, but it told me that I did not have the correct permissions to upload images to the database. So for now, users will have to upload their images using an external image uploader and then paste the URL into the form for it to work (otherwise there is a default image that will display if the field is empty).

Untitled1

Screenshot of my submit form

<?php
        if (!empty($row["recipe_image"])) { 
            $imageName = $row["recipe_image"];
        } else {
            $imageName = "images/Untitled.png";
        }
  	?>
    
<!-- V: The php block above is saying that if the recipe_image column is not empty then to use the URL in it, but if it is empty then use a default image -->
    <img src="<?php echo $imageName; ?>" />

D4DME – My opinion (a summary)

Over the course of this unit, I have already expressed my general opinions towards our group idea for our website. However, I thought that it would be a good idea to write a summary so that I can reflect back on everything as our work progresses.

My initial reaction to the group work was that I really wanted to take the lead on the CSS/design side of the project, though this wouldn’t have been very practical, as Chace admitted that he was struggling to learn PHP and would be more comfortable if he was allowed to start with the CSS. Obviously we are all going to make contributions to each part of the project, though initially we decided that it would be best to focus on a particular area.

The main focus for this brief is to ensure that our website is functional. The design is an added bonus, really, which I have tried to keep in mind whilst working with my team.

For this reason, I was put in charge of the PHP. As PHP is completely new to me as well, I have found some parts of this project challenging so far (as well as feeling slightly under pressure to make things work in a practical manner). It will be important for me to make sure that both my team mates understand my coding and that they can explain what is going on when we present our website in the group critique.

I was happy to go with a recipe-themed idea for our website, though the initial colour scheme did not sit well with me. I was very persistent with my team mates in saying that yellow was not a successful colour to use for our design. I managed to persuade them in the end, so overall I am satisfied with how the design is going so far.

Raspberry Pi

After speaking to Rob today about potentially setting up a server on a Raspberry Pi, he decided to lend me one to play around with. I thought that this would be a good idea to do in preparation for reading week when I won’t be on campus and won’t have access to the dakar server. By using a Raspberry Pi that has Apache installed, I will be able to work on my code and view it online by creating my own server space .

The Raspberry Pi is a low cost, credit-card sized computer that plugs into a computer monitor or TV, and uses a standard keyboard and mouse. It is a capable little device that enables people of all ages to explore computing, and to learn how to program in languages like Scratch and Python. It’s capable of doing everything you’d expect a desktop computer to do, from browsing the internet and playing high-definition video, to making spreadsheets, word-processing, and playing games.

To start me off, Rob let me borrow a Raspberry Pi (Model B), a blank SD card and a mini usb power cable. The first thing that I needed to do was download and install the Raspbian operating system onto the SD card, so I took a trip to the Raspberry Pi Downloads page.

Untitled3

Screenshot of The Raspberry Pi Website

Once the operating system had been installed onto the SD card, I gathered everything that I would need to set up the Raspberry Pi. As the Pi can output to HDMI, I used my TV as a screen. I connected the Pi to the internet via an Ethernet cable and I used my wireless mouse and keyboard from my desktop PC.

The next step required me to head off to the Documentation section of the Raspberry Pi site. On there I found a tutorial on how to install all of the relevant things to turn the Raspberry Pi into a server.

The Raspberry Pi is most commonly controlled via a command line (unless you use xstart to boot it in desktop mode). The first command I used was “sudo apt-get install apache2 -y”. This installed apache. To confirm that this had worked, I went to http://http://10.240.49.240/ which is the IP address of the Raspberry Pi.

Untitled4

Screenshot of my server page

The next step was to install PHP, by typing “sudo apt-get install php5 libapache2-mod-php5 -y”. This made it so that I could upload php files to the Raspberry Pi. After doing this, I decided to have a go at uploading files to the Raspberry Pi. Having already installed the client side of FileZilla, I connected to the Pi. However, upon trying to upload a file, I was denied access to the server space. I looked into the issue online and found the command “sudo chmod 777 -R /var/www” which changed the restrictions of the file location. I was then able to upload files without a problem.

References

Braben, D. Lang, J. Lomas, P. Mycroft, A. Mullins, R. and Upton, E., 2008. What is a Raspberry Pi? [online]. Available from: http://www.raspberrypi.org/help/what-is-a-raspberry-pi/ [3/1/2015].

D4DME – HTML Forms (Part Three)

The next step I took when validating my user credentials form was to make sure that certain fields only contained certain characters (such as the email field). I used a couple of PHP functions to determine whether the inputted data had been typed in the correct format; for instance, email addresses would not be accepted if they did not contain an ‘@’ sign or a ‘.’. Names and surnames would not be accepted if they contained anything other than letters and whitespace.

<?php
$name = ucfirst($name);
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
   $nameErr = "Only letters and white space allowed";
}
$surname = ucfirst($surname);
if (!preg_match("/^[a-zA-Z ]*$/",$surname)) {
   $surnameErr = "Only letters and white space allowed";
}
$email = refine_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
   $emailErr = "Invalid email format"; 
}
?>

However, I could not get this further stage of validation to work with my already existing validation, as only one would work (it would still submit data even if it didn’t meet the requirements above).

<?php 

    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $name = refine_input($_POST["name"]);
        $name = ucfirst($name);
        if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
            $nameErr = "Only letters and white space allowed";
            $x = 0;
        }
        $surname = refine_input($_POST["surname"]);
        $surname = ucfirst($surname);
         if (!preg_match("/^[a-zA-Z ]*$/",$surname)) {
            $surnameErr = "Only letters and white space allowed";
             $x = 0;
        }
        $username = refine_input($_POST["username"]);
        $password = refine_input($_POST["password"]);
        $email = refine_input($_POST["email"]);
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $emailErr = "Invalid email format"; 
            $x = 0;
        }
    }
?>

<?php 

if(isset($_POST["submit"])) {

        if(empty($name)) {
            $nameErr = "Name is required";
        } else if(empty($surname)) {
            $surnameErr = "Surname is required";
        } else if(empty($username)) {
            $usernameErr = "Username is required";
        } else if(empty($password)) {
            $passwordErr = "Password is required";
        } else if(empty($email)) {
            $emailErr = "Email is required";
        } else if($x == 1) { (SQL query here..)
?>

After talking to Kyle (workshop tutor) about my issue, he suggested that I introduce a boolean so that the data could not be submitted if it didn’t meet both sets of requirements. This made it so that the validation could check that there was both data in the field and that it met the required format.

Blog Post System

We were set a homework task this week to create a post system for our blogs. I decided to keep mine simple and colour co-ordinated with my blog theme (teals and greys). All paragraph text will be aligned ‘justify’ like this block of text here so that it touches either side o the blog post and lines up with the images.

The width of my blog posts is 440 pixels wide. As I want the images to align with the text, I set them to full size and align them to the center.

01

Screenshot of ____

Every image will open in a new page to be viewed in full. They also have a reference beneath them briefly explaining what they are and (if applicable) linking to the appropriate source.

0

Screenshot of ____

Any image that is smaller than 440px wide will be placed into a template image on Photoshop and padded out either side with a colour that matched my blog. That way all images will reach the same width as the text.

Links look like this.

References

References will be formatted in the BU Harvard Referencing style in this section beneath a h2 tag.

D4DME – HTML Forms (Part Two)

After doing a bit of research on w3schools, I found out how to start the process of validating my form.

13

Screenshot of my code in Brackets

The first thing that I added was in relation to security. As this is our first coding project, I know that there is no emphasis on security, though I thought that learning this practice now would be useful for the future. The above image demonstrates the use of a PHP function that stops a user from being able to inject code into the page.

16

Screenshot of my code in Brackets

The next thing I did was create a function (in a separate file that I linked in with PHP) that would validate the data inputted from the form. The function will strip any unnecessary spaces at the beginning/end of the data and will remove any special characters.

17

Screenshot of my code in Brackets

I then set the function to run in my main index file (with the addition of the ucfirst() function to both name fields) so that the data would be updated before being sent to the database.

14

Screenshot of the data before validation

15

Screenshot of the data in the table after validation

Finally, I ran a test to see how my new function would handle the data. As expected, the data that I put in was validated nicely, with the name/surname being capatalised and all unnecessary spaces removed.