Inside the Project: The Movie Db

This article will outline the design, implementation and testing of The Movie Db, a project I designed and developed in my second year of college. To conclude, I will give my final thoughts on how I thought the project went as a whole.

📐 Design

This project was designed using Bootstrap CSS, custom CSS and SCSS. The goal was to have an easy to use lookup table and view/edit functionality for a movie database.

The table on the main page allows for easy sorting and searching of movies. You can sort by title, genre, release date, total runtime and movie rating. There is also a search field to allow for easy filtering of all movies in the database. This was achieved with the use of the DataTables Bootstrap add-on. This also allowed for the easy use of pagination. This means the user can decide how many movie listings are displayed on screen at once. They can choose between 10, 25, 50 or 100.

The add and edit forms are fairly similar in design, allowing the user to enter movie data that is them validated before being sent to the database. Movie posters and trailers are added as links and then embedded using custom code.

I spent most of my time on this project making sure the ‘view movie’ page was pixel perfect. This page required its own functions as there was more than just data output required. More details on these functions can be seen in the implementation section of this article.

Once I was happy with the visual design, I started designing the database. I used a MySQL database (hosted locally) for this project.

🛠️ Implementation

A MySQL database was used to store this project’s back-end data.
The Bootstrap framework along with custom CSS and SCSS was used to implement the project’s visual design.
PHP was used as the scripting language to retrieve the data from the database and display it in the browser.
HTML was used to structure each of the web pages.
The movie poster image was stored as a variable (url from an internet source) and embedded as an image on screen.

<img 
     src="<?= $movie->poster; ?>" class="poster" 
     alt="<?= $movie->title; ?> Poster NOT FOUND"
>

The movie star rating was stored as a variable and output with star icons instead of a number.

<?php
	if($movie->starRating == 5){
    	echo("★★★★★");
    } else if($movie->starRating == 4){
      	echo("★★★★");
    } else if($movie->starRating == 3){
      	echo("★★★");
    } else if($movie->starRating == 2){
      	echo("★★");
    } else if($movie->starRating == 1){
      	echo("★");
    } else {
      	echo("Star Rating N/A");
    }
?>

The movie trailer was stored as a variable with the YouTube video url. This was then put through a function to create a substring of the YouTube video id to be included in the YouTube video embed code.

<iframe width="560" height="315"
src="https://www.youtube.com/embed/<?php echo
substr($movie->trailer, 32); ?>" frameborder="0"
allowfullscreen></iframe>

These are just three code snippets from this project. You can view all of this project’s code on GitHub by clicking here.

🧪 Testing

This project was built on the Bootstrap 4.0 framework. To test, edit and debug the design, I used the Google Chrome DevTools. This gave me the tools to know where everything was laid out on the webpage. I could inspect any element on the page and see its dimensions and all of its properties. e.g. font size, padding, margin, height, width etc.

To debug and test the back-end of the project I used PHP debugging methods. I echoed out the INPUT_POST array as well as the movie object array. I did this using pre tags.

I had an issue with the edit form. When I hit ‘submit’ with data validation errors, it gave me an invalid id exception. This was because when require ‘edit.php’ was called, an id wasn’t passed to the $id variable. This was because the id wasn’t displayed in the page url. i.e. http://localhost/htdocs/moviedb/movies/update.php.

I fixed this by allowing the id to be not set using: !isset($id). If the id variable isn’t set, I set is using the code below.

Now I only throw an exception error if the id in the database is false or null. This now passes require ‘edit.php’ the value for $id and allows the user to edit movie details if there is a validation error.

🤔 Final thoughts

Overall, I learned a lot more about PHP from this project. I learned how to work with SCSS and custom CSS to take my ideas and develop them into a front-end design. At the time, I was still unsure about PHP development as it was new to me, so this project helped me get a greater understanding of how it fits into a web design/development project. The final submission had a few issues with the form, but overall I feel it was a success because of how much I learned in the process.

🚀 Showcase

You can view a showcase of this project by going to this sites home page, or by clicking here.