I began creating the html file of the project and added css to it. Using the mock up design as guidelines I was able to create the webpage. We then built the design around the php that was helped out by Verity and Kyle.
Below are screenshots on how I did it:
Adding it with the PHP
Outcome from converging the php, html and css
I then added media queries to the project in order to make it responsive to different screen size.
Overall I am very pleased with the outcome of the project as we were able to collaborate as a team together to create it. It was very important that we all shared the same goals and ideas and were up to the challenge. I was able to learn a lot about the fundamentals of php and how they are used to create databases for a website. Our knowledge and understanding about databases allowed us to create a recipe website that functions in the ways we planned out initially. The design as well is clean and bold and therefore easy to understand navigate with the users. Despite many trial and errors we were able to achieve our goals.
As a recipe site it was important that we created a filter that would allow the users to narrow down their choices and find their recipe’s easier. We decided to base our filters on 4 different selections.
Screenshot of the submit php.
A lot of the work was done by Verity, however she was able to comment on each section to help explain her actions clearer to me and therefore I was able to understand it.
Overall the filtering process took time and a lot of trial and errors. It eventually became functional and we were able to see it in action.
At today’s workshop we were given an insight on how to make a webpage sort out particular contents. These are commonly used within social networking website, that will allow us to view the most recent contents. For example; News Feed on Facebook. We then added a an if statement that would show an error message if the wrong information was inputted.
Below are screenshots on how I achieved this:
Adding the error message
The sorting page was largely based around if statements. This was due to it determining the information that has been inputted and that “if” the information was not accepted or recognise then it would send out an error.
This workshop has allowed me to really understand the functionalities of sorting and how it used to create interactive web pages. I’ll be keeping this in mind when I work on my new project as we will be wanting upload the latest recipes in order.
At today’s workshop we continued to create more features for our webpage. We were asked to design a navigation bar. We learnt how to make an unorder list. We would then create a link for the different tabs in order for it to become interactive. After that we were introduced to Filezilla which is a FTP software designed to export webpage designs on to the web.
Finally we turned our HTML files into PHP in order to make the webpage more versatile.
Below are screenshots of what I did.
The two screenshot above shows how I created the navigation bar from last weeks workshop using HTML and CSS. I started of unorder listing them on HTML before moving on to CSS to customise the text.
The screenshot above shows the outcome of my navigation bar. I was able to divide the “home” “about” and “contact” and use the hover tag to allow them to react when the mouse hovers over them. Making them a hyperlink.
The screenshot above shows what happens when I click on one of the hyperlinks. It shows that the link works however the navigation bar is no longer there and therefore I am unable to navigate myself back to the homepage. This leads on to the next task we then did in order to make the navigation bar accessible on different pages.
The two screenshot above shows how we changed the HTML file into a PHP file. We created an entirely new PHP file which would hold all the navigation tags. We then changed all of the HTML files into PHP files. This will allow the navigation bar to be visible in all tabs.
The screenshot above shows the outcome after changing the HTML file into a PHP. The URL also shows how we used Filezilla to export the webpage on the web.
I was pleased with my approach to the workshop as I was able to go through with it quite easily and achieve the learning objectives.