Project Box
A social media Site for student designers
Overview
What is Project Box?
Project Box came to fruition after I had the idea to create a randomly generated design project generator website. Eventually I expanded on that idea to create a website that incorporates solutions to all the needs of student designers in one easy to use online destination.
Purpose of Completing Project
The purpose of Project Box was to gain experience in developing social media style websites/webapps as it is something I had never done before. Key Aspects I wanted to learn about included:
Research and Planning
Research
My initial plan was to hardcode the social media site using raw PHP, HTML, CSS, and JavaScript however after some research and lectures I decided this would take too much time and isn’t reflective of how these systems are often built in industry. Because of this I decided to make use of a PHP framework called Laravel. My reasoning for choosing this framework is that it helps to speed up the development process through a range of different tools.
Understanding Laravel
Through lectures and my own research I was able to gain a basic understanding of the way the Laravel framework communicates and functions in order to build a site. Below I have written a small amount about my understanding of each of the tools/aspects within the laravel framework. All this information was learnt during my research this semester or during the development of my project.
Blade Templating and Views
The Blade system allows you to easily set up complex and dynamic website layouts and templates. It includes a range of shorthand functions which allow you to create dynamic pages that can have content changed based on variables, loop through html markup inserting database information, easily write if statements with your HTML and more.
Models and Eloquent ORM
The Models created with the Eloquent ORM (Object Relational Mapper) provide a quick and easy way to communicate with a websites database. They also allow for other useful features such as creating relationships between models. Relationships can be used to link data from multiple database tables making queries to retrieve the information within controllers much easier.
Controllers
Within the Laravel framework controllers are used to write functions and act as a bridge between the models and the view, they can be used to retrieve and send data from the model to the view, create new entries within the database and other request handling logic.
Routes
Routes are used to define the url of pages and controller functions, they also over methods such as POST, GET, DELETE and more for handling data between the url request and controller.
JavaScript AJAX
Though not specifically related to the laravel framework javascript AJAX can be used to send data to and run controller functions in the background without directly going to the route of that function. This is useful for functions that need to be ran without redirecting the user.
Migrations
A migration file contains information about the database tables structure. Using the Migrate command in Terminal you can quickly set up, rollback, and reset tables within the database among other things in a matter of seconds.
Planning
Project Goals
My goals within this project were to gain and understanding of the Laravel framework and build a functioning web application using as many of the frameworks features as possible. This would provide me with a basis to continue learning more advanced aspects of the framework in the future
Project Tasks
Task 1 - Research and Learn
The time dedicated to task one allowed me to research and learn about the laravel framework, requiring the basic knowledge I needed to get started with the project.
Task 2 - Site Structure and Logic Planning
Task 2 was a short period dedicated to planning the site structure, file structure and logic. This would help speed up the development of the project as it gives a basic understanding of what is needed within the app during the set up phase.
Task 3 - Design
Within Task Three I designed the branding and frontend layout of the web application. Though I am a developer I feel it is important to dedicate some time to the design of project to ensure the quality of aspects such as visual style and User Experience through interface design.
Task 4 - Set Up
This task involved creating the basic parts of the application such as the project environment, additional files, assets and database structure. Completing this task provided me with the ability to quickly continue the rest of the development.
Task 5 - Frontend Templating
Task Five was dedicated to the development of front end styling based on my designs. I personally prefer to develop the layout and style before implementing functionality as it helps me to quickly navigate the site when testing functions.
Task 6 - Implementing Functionality
The largest task was dedicated to implementing the sites functionality. The reason for the large size is to allow for contingency in the case of being unable to get a function working or needed to perform further research to complete an aspect of functionality.
Task 7 - Feedback and Testing
Having never used laravel before I decided to save the majority of testing and feedback for the future. This was basically in place in order to implement any improvements or ideas from peers who commented on the site during its development.
Project Timeline
Process
Design
Branding
Colours
For the colours used within the Project Box Brand and Website Design I decided on a selection of greens. Within art and design the color green is said to reflect Growth, Positivity and Prosperity. This links into the purpose of Project Box as it is an environment for Designers to improve their skills (Growth), Share Ideas in and support each other (Positivity) and change the world for the better as many life changing ideas start with a design (Prosperity).
Font
The font used within the Project Box branding and Design is Roboto. I decided on this font as it looks smart and professional while also being easy to read with some pleasing design style to it.
Logo
With help from designer Jordan Harper we were able to land on the light bulb logo for Project Box. The light bulb is meant to symbolise inspiration while its line art design style(Jordan’s Specialty) is meant to symbolise creativity in that it is not perfectly curved or symmetrical.
User Interface and Layout
Low Fidelity Wireframes
I first began the website design by sketching a series of low fidelity wireframes this allowed me to quickly implement colour and produce high fidelity mockups in photoshop.
High Fidelity Wireframes
Below I have included the high fidelity Mockups I made and used when developing the frontend of the website. Some aspects of the design were changed during development to improve usability.
Development
Please Note: Development Section has been laid out in an order that is easier to read and flows better. Doesn’t necessarily reflect the order in which tasks were completed see Gantt Chart for a better understanding of project timeline and time management.
Site Structure and Logic
Before Starting a Project I like to to plan a few aspects such as how the user navigates the site, how the database is set up and how the app file structure is going to be laid out. This intern helps to improve the speed and efficiency of the set up phase.
Site Flow Chart
The Site Flow Chart shows the way the user can navigate through the sites pages along with the functions in between those pages.
File Structure
The Site Flow Chart shows the way the user can navigate through the sites pages along with the functions in between those pages.
Database Structure
The image below shows the planned structure of the database along with basic information of each table such as data types of the columns.
Set Up
Creating a Laravel Project
When starting my laravel project I first needed to install a range of development packages through the terminal command line. The first package I needed to install was composer, this is a dependency management tool for php based projects that allows you to install and update code packages and libraries through terminal.
Once composer was installed I needed to install Laravel globally. Installing this gives you access to all the commands used to create aspects of a Laravel project.
The final step towards creating a laravel project was to run a laravel command within the MAMP htdocs folder to create the basic project file. By running this command in the htdocs folder I am directly creating my project on my systems local host. The local host is required to emulate a server environment and run server side scripts written in php.
Adding Authentication
One of the most useful parts of Laravel is its “make::auth” command. This provides you with all the files needed to add multiple user functionality to your site. By running this command I was able to create the Migration, Model and functions that are used to handle registering users, logging users in creating user sessions in a matter of minutes.
Adding Backpack Administration Panel
Another package that can be implemented to a laravel project is BackPack. BackPack allows you to build a an administration/content management system for Laravel Websites. To add this package I ran the command below.
Database, Migrations and Models
The first step within setting up the website database is to connect the site to the database itself. To do this I first created a new database on my local host using phpMyAdmin. Then within the .env file of the project I changed the database connection details to match the details provided by MAMP.
After the database connection was set up I created a series of migration files using the database structure plan set previously. These files are created using the migration make command shown below.
These migration files were then ran using the terminal command below to create the tables within the database.
Below I have included the post table migration file to show how this code is set up, the other files follow the same syntax but swap the data to match those set in the database plan.
The final step was creating models for each of the tables being used within the application. To do this I ran the make model command to create each model I needed.
Routes, Controllers and Views
The main aspect within the frontend of a laravel project is the template. The frontend template within this project are comprised of layouts, includes and views. The Layouts refer to a section of the frontend that is used on multiple pages and usually contains things like html head data and navigation menus. The Views are essentially the content of each page and are pulled into the layouts using the blade system. Finally the includes are what I have used to create aspects of a page that loop through HTML markup. To create these files no commands are needed, I simply created a new file within my text editor and named it “filename.blade.php”. The “.blade” aspect allows the Blade templating system to recognize the file as part of the template and gives access to the Blade features. Below I have listed the views, layouts and includes and their purpose.
Includes
Views
Layouts
In order for my views to be displayed within the layout I needed to set up a range of routes in the web.php file. These routes as discussed in my research define the url for each of the pages and can be linked to a controller function, below is an annotated screen grab of all the routes set up within the application. Excluding routes created by the auth and backpack packages.
Finally I needed to create controllers that contained functions that linked to each of the routes. I broke my controllers into:
Frontend Templating
Below Is a breakdown of the code for the frontend template of the app including justification for code choices and any issues I came across while developing this aspect of the site. I have chosen to limit the amount I write about in this section as it is mainly comprised of basic HTML and CSS. Instead I am focusing on frontend functionality such as Blade Templating and JavaScript functionality.
Layouts
One of the first issues I came across when developing the website was having different layout styling on the logged in pages and login and register pages. Because my logged in layout has a selection of variables being passed into the views (see changing layout content in Implementing functionality section) Laravel would return an error as those variables were not being passed in or used on the sign up and login pages.
Because of this I created two layout pages with small differences between them. However I later found out that I could have used a blade if statement to hide and show content based on whether the user is logged in or not. Unfortunately I did not have time to implement this as I needed to get the core functionality complete.
One of the main frontend functions within the layouts is the switch from a normal listed navigation menu to a burger menu on mobile devices. This functionality is controlled with the JavaScript Jquery Below.
Finally I would like to explain the blade code at the bottom of the layout (shown below). The yield function pulls in the view required for each page.
Views
Continuing on from the previous section the first bit of code within a blade view dictates which layout is used on that page. The example below shows the code for the home page, as you can see this page extends the main “App” layout. On the pre logged in pages the “app” part of this code is switch out for “log” to extend the log layout.
You may also notice that the code is put in a section named content and the layouts page it yields a section called content. Within my app I have only used the one “content” section however in a more complex app you could have multiple sections within a view that are then yielded in different areas of the app.
I would also like to draw attention to the include function. I have made use of this to keep my code cleaner and separated into different parts. In this example I am including the posts HTML markup that loops through the posts(See Next Section “Includes”) passed into the page(See “Implementing Functionality: Creating, Displaying and Filtering Posts” Section).
Includes
The code below is the include for the posts displayed on the newsfeed page. This code is contained within a blade for each loop that retrieves the posts array passed into the page reverses them so the newest post is displayed at the top and converts each post within the array into a single variable, then for each post it will loop through the the code contained within the loop.
You may also notice the double curly brackets that contains something along the lines of “$post->id”. This is another blade function that retrieves specific data (post caption or image url for example) from the post that is being looped through and echos it as raw text.
Finally I would like to explain the If statement found within the section of code. Within the controller(See Implementing Functionality: Liking Posts Section) another array containing the ids of posts liked by the logged in user is passed through. This if statement is checking to see if the current post id matches any of the ids in the array. If it finds a match it will display a red heart icon to show the user that the post has been liked. If not it uses the default white heart that can be clicked to like said post.
Implementing Functionality
Changing Layout Content
One of the simplest functions I added was a series of variables passed into the home, projects and profiles view to change the content within the layout based on which page is being displayed. Firstly the page title, subtitle and hero image url are assigned to their own variable. Then using the compact method they are passed through to the page and called within the layout where necessary using {{ $variable }}. This code is repeated across the functions for loading the home, projects and profile pages. The example below is from the projects page function.
Creating and Displaying Posts
This was probably the first function were I ran into some issues, however I was still able to surpass these issues through online research.
The first part of the create post function handles form field validation. This code gets form fields from the request and sets it as a required field. If the user misses a field it will return to the page with an error message.
While writing the second part of the function, that lets a user create new posts. I discovered that I didn’t know how to allow users to upload a file and store it within the website for later use. After some research I discovered the File and Storage Facades that I could link into my posts controller. These facades offer a range of helpers that can be used to make storing and manipulating user uploaded files extremely easy.
The third part of this function simply gets the data from the form fields and inserts them into the database. A few exceptions include the the likes, user id, username and filename columns. These parts are not gathered from the form data instead for the username and user id columns we retrieve the information from the auth session.
The file name is generated using the getfilename() function that will generate a random unique string for each file uploaded.
The likes column is just set to zero, this was overlooked when creating the migrations, within the posts migration I had set the likes column to nullable rather than default zero. Because of this I needed to manually set the column to zero when a post is created otherwise the likes function would be unable to increment the value when creating a new like.
The fifth and final part of this function is a simple redirect that returns the user to the profile page.
When displaying posts there were two different ways I wanted to return them to the view. The first is all the posts for the newsfeed page. This was coded by adding the Posts Model to my homepage controller and using the code below. This simply request all the posts from the model and passes them into an array named posts then passes the array to the view using the “with->” method.
The second way is for displaying the posts on the profile page, in this instance I needed to retrieve the posts created by the logged in user to do this I wrote a query that selected all posts where the user_id column is equal to the id stored in the auth session.
Filtering Posts
On the homepage there is a form with a select input containing all the possible project types. When the user clicks the filter button they are redirected to a the filter function. The filter posts function is extremely similar to the function used when loading the home page however, the function is adapted to only display posts that are tagged with a certain project type. This is done by retrieve the data from the form and storing it in a variable named type. The function then runs a query that selects all the posts where the type is the same as the type stored in the variable.
Liking Posts
The liking posts function was probably the one I struggled with the most as it incorporated a range of different aspects each of which took time to research and find a way to implement them. This was due to the fact that this needed to be a function ran on the backend without redirecting the user to and from the page.
To start with I knew I would need to use ajax to send data to and call the function within my posts controller. This way the function can be ran without switching pages. I begin by creating the JavaScript file shown below. The file waits until it detects a click function on the like button and then gets the post id from the name attribute of the button, this was the only way I could think of to transfer the post id of the post into the js file. Not Sure if it is the correct method but it works how I intend for it to.
Next it runs the actual ajax function putting the post id variable into a data array and passing it to the like function url(Defined within the home page as shown below).
Finally the last piece of code hides the clicked like button and replaces it with the corresponding unlike button (I didn’t have time to incorporate an unlike function, so for now this button is just used to indicate that the post has been liked by the user).
The Second part of this function is the actual backend like function ran in the background. The first part of this function simply retrieves the data from the ajax request and stores it in a php variable for use within the rest of the function. The next line then uses the post id variable to find the post in the posts table and increment its like counter by 1. Finally the a new like is created within the like table storing the user id and post id so that we can track the likes and corresponding posts made by each user.
The final part of the function is used for passing through an array of the post ids that have been liked by the logged in user. This was surprisingly were I had the most trouble. Having never written a select query where I needed to retrieve just the post ids from the likes table where the user id was equal to the id stored in the auth session and then put them into and array I had no idea where to start. After days of trawling through the Laravel documentation, online resources and becoming increasingly frustrated I swallowed my pride and asked the “Code Gurus” as I like to call them on Stack Overflow.
As a result for the first time in my career as a web developer I was presented with a non offensive and incredibly useful reply from a Stack Overflow user. They suggested creating relationships between my models in order to share related data and make my queries easier to write, also providing examples of how to do this. Below is the query used to retrieve the data and an example of the relationship syntax used within the models.
Project Generator
As I ran out of time to incorporate the detailed briefs function through the backpack admin system I decided to include the JavaScript random design project generator from the original project box concept discussed at the start of this project. The first part of this script is a list of arrays containing business types, company names, and design projects. The second part is two variables containing additional text used when displaying the randomly generated projects. The final part is a function that when called (from a button click on the projects page) randomly selects one design project, company name, and business type from the arrays, before selecting a series of empty span tags within the page and inserting the selected information into the inner HTML of each tag.
Feedback and Testing
My original plan was to have the pre-alpha version of the site live intime to let peers do a thorough testing, however having ran out of time I was only able to incorporate some of the feedback given to me by peers who saw me working on the site.
Improved Landing/Welcome Page
Originally my landing page was extremely bland and boring. Because of this I spoke to designers Cain Mackenzie-Yapa and Silvia Bosoiu to gain some inspiration. They suggested using a large image background with a green overlay and white text. They also told me to make the login and sign up buttons larger and include the brands logo. Bellow are screenshots of the landing page before and after implementing their feedback.
Conclusion
Final Outcome
My final outcome for this project is the Project Box Social media website brought from concept to Pre Alpha Stage with all basic functionality and styling in place. Use the link below to view and use Project Box Pre Alpha Version. You can also view the code for this project using the link to my github repository.
View Project Box PreAlpha Online!
View The Project Box Code Base on GitHub
What I have Learnt
Throughout this project I have brought myself from having no knowledge of laravel to being able to set up a simple social media website incorporating a range of functions. Using the knowledge gained this semester I will be able to develop much more complex systems at a faster speed in semester two.
How I Will Continue With This Project
I plan to continue work on this project throughout semester two focusing on more in depth and complex functionality. My goal for semester two is to bring Project Box from pre alpha to final beta stage or initial release in time for the end of year show business plan pitch. Below I have Detailed the functionality required to bring Project Box to its initial release stage.
Additional Text
Special Thanks
Jordan Harper - Logo Design
Matthew Hampsey - Header Image Art
Cain Mackenzie-Yapa - Landing Page Feedback
Silvia Bosoiu - Landing Page Feedback
DigitalDrifter - Stack Overflow Question Reply
Research and Learning Materials Used
https://www.youtube.com/playlist?list=PLillGF-RfqbYhQsN5WMXy6VsDMKGadrJ-
https://laravel.com/docs/5.7/routing#view-routes
https://stackoverflow.com/questions/45997045/i-want-to-put-a-background-image-in-a-blade-from-a-laravel-project
https://stackoverflow.com/questions/38256539/how-and-where-can-store-images-with-laravel
https://stackoverflow.com/questions/18341792/how-to-pass-data-to-view-in-laravel
https://laracasts.com/discuss/channels/general-discussion/how-to-create-link-with-blade-templating
https://stackoverflow.com/questions/29739745/laravel-blade-passing-variable-with-string-through-include-causes-error
https://www.sitepoint.com/laravel-migrations/
https://itsolutionstuff.com/post/how-to-generate-uuid-in-laravel-5-example.html
https://blog.hashvel.com/posts/laravel-image-upload
https://stackoverflow.com/questions/53965998/laravel-5-7-database-query-returning-no-values