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.

Advertisements

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.