During this project, I was given the task to compile a large amount of recipes and input them into a database. The information from the database was then pulled out using PHP and into a designed website showcasing all of the various dishes. It took a total of 10 weeks to complete from the wireframes all the way to the completed product. When developing the design aspects for the website, it took several different designs before I could figure out which one best fit a recipe website, as well as numerous amounts of different color pallets. This was also the first time I had encountered using PHP, which I later had to figure out how to implement within my HTML. I ran into many problems when working with this new language, but with every new language, I kept on going at it until it was working perfectly. I found it very interesting how once you put everything into the database, you can use PHP code in order to build these pages!
For this project, we were given the task to develop a responsive recipe website that pulls data from a database, which is then coded through php files.
We were given a total of 10 weeks to complete this project. There were different times in which certain
aspects of each part of the project were to be completed at. These assignment checkpoints are seen down
below.
First week: Developing ideas and website wireframes in Adobe XD included microinteractions/style tile/ full
color wireframes
Second Week: Developing code for fully responsive website
Third Week: Fine tuning the code for responsiveness
Fourth and Fifth week: Creating the PHP code to show on the home screen, displaying all of the different
recipes
Sixth and Seventh Week: Continuing with the PHP and implementing it so we can see each of the recipes and
their
images corresponding to each recipe
Eighth and Ninth Week: In our last few weeks of completing the project, we worked on making our filters and
search bar work properly with the use of PHP in order to find the correct recipes through the database.
This was a fully individual project through all of development and design work. The purpose of the project was to help the client put together their recipes into a cohesive page. This is done utilizing HTML, CSS, SQL, and PHP.
The client has many different recipes that they have collected over time. They have collected them and organized them in the form of PDFs. The client wants their recipes to now be easily accessible online so that people can look at their recipes on a website. The problem is that the PDF needs to be seen online, but it is too much to create individual, static pages, of each recipe. What if there were 10 recipes that wanted to be added? We don’t want to create 10 additional static pages.
I wanted a website that had a minimalistic feel and one that would make you happy if you were to look at it. I chose the pale pink color to induce feelings of light heartedness when the user goes onto the website. Since this was cooking, I also wanted colors that represented the Earth. The foods that people are preparing are taken from our environment, and I wanted them to be aware of this, which led me to colors such as green and dark red/brown. Green meant to represent the greenery of the earth while the dark red/brown represented our ground and dirt from which the ingredients had originated from.
During the wireframing process, I utilized Adobe Xd in order to create the design for the UI. For each page, there were three different breakpoints: web, tablet, and mobile. First was the process of trying to figure out what the sub page covers would look like. I went through numerous versions of card like designs, but I wanted to create them as if the recipes are pictures on a card. If someone were to create their own recipe books, they would write down the recipe, along with a picture of the food that they had created. I created a polaroid like card, and used that as the sub page images.
At first, the menu bar was just a drop down menu that had let the user select which filters they had wanted to choose. However, I realized that when it is at the breakpoint for a laptop, the full option should be present since there is so much white space. There should be no reason for there to be the drop down when the user can just look at all the options on such a big screen.
When coding for the PHP, I inserted the PHP code into the div tag that I was supposed to present all of the previews of each recipe. When inputting the code and looking at the website, some of the elements were not showing up. I soon realised that this was because I had not capitalised some of the words in the PHP database that should have been capitalized. After remembering that PHP was case sensitive, everything started working perfectly fine. I found it fascinating how just by inputting what parts of the database should be in certain html elements, that it will run until there is no more information to pull from the database.
When implementing the PHP code into the recipe page, it incorporates the PHP that I learned when implementing the home page, but also some new skills. The first was being able to draw information from a folder within the folder that the HTML and CSS is from. I learned that you have to create a loop in order to have the PHP run until it goes through each of the different parts of information within the database if I wanted to fill out the entire recipe. I also learned that if I wanted to have photos implemented within the page, they had to be put into a separate folder inside of the main folder for the PHP to call it and then implement it into the actual website after it finds the image names within the database. I also learned that if I were to pull an image or something from another web page within PHP, I have to utilize the backslash in order to make sure that the PHP can read it correctly.
When creating my db.php PHP file in order to link the PHP code with the data base, I learned that you have to have two separate codes for the local connection and the online connection. You cannot run both at the same time, or else they will run into an error. Instead, if you are working locally, you must comment out the code for the online connection, and vice versa.
Overall, this project was a great success! All of the pages that needed to have pHP implemented, worked well. The CSS remained consistent throughout the project even when minor tweaks were made. This was a great opportunity in both learning PHP as well as implementing it into a project. I liked how this wasn’t just learning how to code, but also creating something out of it. If I were to go back and redo this project, there wouldn’t be much that I would change. The only thing I would do differently would be to start my CSS style sheet as if I were coding for mobile first. I started coding for the desktop interface first, and then found that I had to do more working when trying to size the elements down. I just have to remember to keep that in mind whenever designing an interface that it is easier to design from a smaller design and work my way up.