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.

D4DME – HTML Forms (Part One)

Whilst I was waiting to hear back from Simon, I put my time to good use and started to build the form(s) using HTML (and later on PHP for form validation). For the time being I used some of my own CSS so that I could see everything clearly on the page, though once everything is working, I will be able to integrate my coding into the CSS that Chace is making. Starting with the sign-up form, I coded a basic page and form  that linked to a table in PHPMyAdmin, which looked like this:

9

Screenshot of my initial Website

The table within my database that the form submitted to looks like this (as based on my ERD):

10

Screenshot of PHPMyAdmin

Once my PHP were working together with my database, it looked like this:

12

Screenshot of my code in Brackets

Last but not least, my HTML (which at this point was just the form and it’s containing div(s)) looked like this:

11

Screenshot of my code in Brackets

At this point, anything inputted into the form fields would be sent to my ‘user’ table in my database (only if there is something in every form, however, thanks to the first step of form validation I conducted). My next step is going to be validating the form properly.

D4DME – The Database (Part Two)

An entity-relationship diagram (ERD) is a data modeling technique that graphically illustrates an information system’s entities and the relationships between those entities.

After our group lecture on ERD and database design, I decided to have a go at planning how our database tables would look for the Starving Student page. Our website won’t be able to function properly without a solid database structure, so it’s vital that I get this part of the project up and running to make the other jobs easier for my team.

7

Screenshot of ERD in Word

8

Screenshot of Database Tables in Word

The USER table contains the same fields as my previous idea on ‘D4DME – The Database’, though I have focused more on the rough design for now rather than trying to make the table in PHPMyAdmin. The RECIPE table is slightly more complicated, as it must have two derivative tables each containing relevant data. As I wasn’t particularly happy with this structure for the database, I decided to email Simon for some advice on what to do next.

References

Janssen, D. and Janssen, C., 2010. Techopedia [online].
Available from: http://www.techopedia.com/definition/1200/entity-relationship-diagram-erd [2/20/2015].

D4DME – The Database (Part One)

One of my tasks for today (as decided in our group meeting) was to create the tables in our database that the users will be able to submit content to. One of these will be a user credentials table that will contain information about anyone who signs-up to our site (name, username, password, email, etc). The second is going to be slightly more complicated, as it will contain recipes submitted by users with varying criteria.

The user credentials table will look like this:

Untitled7

Screenshot of PHPMyAdmin

With five columns of information (id, name, surname, username, password, email and date joined). This table will be fairly straightforward to link up to. The only fields that will be required to sign-in are username and password, so the process will be fairly simple to code.

The recipe table is going to be slightly harder to produce, as the fields need to be refine-able in the search options of the website.

Untitled8

Screenshot of Student Recipes

To help me think of the different fields for the submission form, I had a look at a pre-existing student recipe website called Student Recipes. This form covers the basics such as the recipe name, ingredients and method, though after our discussion in the group meeting today we decided to include as many fields as possible to make the search results specific to the user.

Untitled9

Screenshot of Word

Above is a list of fields that I am going to suggest to my team mates that could be included in the recipe form. Before I make the table I will need to check whether they want to use all of these fields or whether some are unnecessary.

References

Bailey, J., 2004. Quick and easy recipes for students [online]. Available from: http://studentrecipes.com/ [2/19/2015].

D4DME – Trial and Error

After having a discussion over Chace’s mock-up for the webpage, I created a page on our wiki to document our discussions (Here). The page consists of screenshots accompanied by an ongoing conversation that we had over Facebook. Whilst the Wiki is good to document our planning and teamwork, it doesn’t provide us with a real-time chatting option that we need to keep in touch when we’re not talking face-to-face. Facebook probably isn’t the best choice and isn’t very professional, though everyone is using it and it makes it easy to keep in touch outside of uni.

D4DME – The Website Design

As discussed in our first group meeting today (Here), Kyle and I decided to do some research into logo and icon design for our website. This is mostly Kyle’s area, as I said that I didn’t mind working on the PHP to start with if he wanted to work on the design (though I decided to give Kyle a hand as there isn’t much I can contribute until Chace creates the base code for our website). Chace was in charge of creating a mock-up of our first design idea, so in the meantime I decided to play around in illustrator to make a logo. My logo is only going to be a place holder, as Kyle is working on some more detailed designs for the actual logo.

The working title for our website is ‘Starving Students’, which is going to be a quick and easy recipe site with different filtering criteria aimed at students. This gave me a few ideas to start with, based mostly around how to represent the idea of students and food.

Untitled4

Screenshot of Illustrator

After doing a quick Google search for ‘student icon’ I found that the student hat was the most widely accepted icon to represent students. I decided to make a simple vector of the hat. My initial idea to integrate food into the design was to include a knife and fork somewhere alongside the hat, so I tried out different positions.

Untitled5

Screenshot of Illustrator

I decided to go for the top left design, as I thought that the cutlery fit nicely underneath the hat and didn’t take up any unnecessary room.

Untitled6

Screenshot of Illustrator

The last addition to the logo was a circle backdrop with a thick border to contain the icon. The colours of the logo are not final, merely place holders until we have a design for our website.

D4DME – The GitHub

During today’s group meeting, I decided that it was about time I understood how to use GitHub properly. Luckily enough, Rob decided to drop by the lab whilst we were having our meeting, so I asked him to give me a quick tutorial on how to use the command line function.

12

Screenshot of the GitHub Command Line Function

He showed me how to commit files to the repository using simple commands, as well as how to push and pull files to the website without needing to upload anything manually. I gave this a try with the project folder from our ‘Meet the Team’ page to see what would happen. After pushing the folder to GitHub, I made some changes to the colour scheme before committing again and taking a look at the files on the website.

Untitled3

Screenshot of GitHub

Now that I understand how to use GitHub (and see why it is a practical way of working) I intend to make sure that my group understand how to use it.

D4DME – The Wiki

To make it easier for us to keep our group work clearly distinguishable from our blog work, I suggested that we create a DocuWiki page on one of our servers. I was happy to set it up on mine, as I have 24/7 hours access to the servers (one of the many perks of living on campus).

13

Screenshot of Our DokuWiki

In hindsight, I realised that having a full Media Wiki was more than what w actually needed it for, so I decided to remove it from my server space and replace it with a much simpler version.

We decided as a team that the DocuWiki will be used to host any information that we think of during our weekly team meetings (such as the one we had today) so that we can look back over our planning and have a constant record of what we need to do to progress our project.

Our DocuWiki can be found Here