Scribd
Upload
16 views5 pages

Integ Final Project

The final project for the ITP07 course at Universidad de Dagupan involves creating a web application called 'Movie Explorer' that integrates with the TMDb API to fetch and display movie data, implement search tracking, and allow user ratings. Students are required to use HTML, CSS, JavaScript, PHP, and MySQL to build a responsive interface and manage a database for storing search history and ratings. The project includes specific requirements for functionality, technical specifications, and documentation for submission.

Uploaded by

rak.chris14
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views5 pages

Integ Final Project

The final project for the ITP07 course at Universidad de Dagupan involves creating a web application called 'Movie Explorer' that integrates with the TMDb API to fetch and display movie data, implement search tracking, and allow user ratings. Students are required to use HTML, CSS, JavaScript, PHP, and MySQL to build a responsive interface and manage a database for storing search history and ratings. The project includes specific requirements for functionality, technical specifications, and documentation for submission.

Uploaded by

rak.chris14
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

UNIVERSIDAD DE DAGUPAN

SCHOOL OF INFORMATION TECHNOLOGY EDUCATION


ITP07 | INTEGRATIVE PROGRAMMING AND TECHNOLOGIES
FINAL PROJECT
Name : _______________________________________
Year, Course & blk : _________________________
Subject : _______________________________________ SCORE
Date : _______________________________________ :
Final Project | Movie Explorer: API-Based Web App with Ratings and Search
Tracking

Objective:
By the end of this project, students will be able to:
1. Integrate a third-party API to fetch and display movie data dynamically.
2. Implement search tracking and rating features with database support.
3. Perform cURL-based operations (fetching, storing, displaying data).
4. Create a responsive and interactive web interface using HTML and CSS.
5. Store and retrieve search history and user-generated content via PHP and MySQL.

Instructions:
1. General Overview:
 Develop a web application that allows users to search for movies using an API (TMDb
API).
 The application will:
o Fetch and display movie information.
o View details like poster, title, release date, genre, and overview.
o Track and store search queries in a database.
o Display the Top 5 Most Searched Movies based on frequency.

2.TMDb API Details:


 Sign up at: https://www.themoviedb.org/
 Get your API key from: https://developer.themoviedb.org/docs
 Use the Search API Endpoint:
https://api.themoviedb.org/3/search/movie?
api_key=YOUR_API_KEY&query=QUERY
 Use the Movie Details Endpoint to fetch full details using movie ID:
https://api.themoviedb.org/3/movie/MOVIE_ID?api_key=YOUR_API_KEY

2. Frontend Requirements:
 Use HTML, CSS, JavaScript, and jQuery.
 Integrate cURL and PDO mysql to fetch and update data asynchronously.
 Display search results dynamically on the page.

3. Functional Requirements:
 Search and Display:
 User enters a movie title.
 Application sends an API request using cURL to TMDb API.
 Display movie info: title, release date, poster, overview, rating, and genres.
 Track Searches:
 Save each searched movie in the database (movies table).
 Increment search_count every time the same movie is searched again or if you
have better way to do it, it’s your call.

 Top 5 Most Searched Movies:

Semester: 1st Sem Academic Year: 2024-20205


On a separate page, display a list of the 5 most searched movies based on
search_count.
 Rating System: (Bonus)
 Allow users to give a 1–5 star rating.
 Store each rating in the ratings table.
 Display the average rating beside each movie.
4. Technical Specifications:
 Frontend: HTML and CSS.
 Backend: PHP with MySQL database.
 Database Tables:
o movies(movie_id, title, search_count, poster_url)
o ratings(rating_id, movie_id, rating_value, created_at)
 API Used: TMDb API
 cURL and MySQL Operations:
o Fetch movie data (GET from TMDb)
o Submit new search (POST to server)
o Add rating (POST)
o Retrieve Top 5 Searched (GET from server/database)

Key Changes for TMDb

API Call Example:


const apiKey = "YOUR_TMDB_API_KEY";
const query = "Inception";
const url = `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=$
{query}`;

Poster URL Format:


Use the image base URL from TMDb:
https://image.tmdb.org/t/p/w500${poster_path}

Genre Info:
To get genre names, you may need to fetch from:
https://api.themoviedb.org/3/genre/movie/list?api_key=YOUR_API_KEY

5. Submission Requirements:
 Softcopy:
o Codebase in .zip file
o Documentation (PDF/Word)
o Submit via email: jelson@jelsonlanto.com
 Hardcopy:
o Printed documentation with screenshots and code samples
Documentation Format
Title Page
 Project Title: Movie Explorer: API-Based Web App with Ratings and Search Tracking
 Course and Section: (Insert course name and section)
 Group Name and Members:
o Name 1 (Role)
o Name 2 (Role)
o Name 3 (Role)
 Submission Date: (Insert date)

Table of Contents
1. Project Overview
2. Features

Semester: 1st Sem Academic Year: 2024-20205


3. Tools and Technologies Used
4. System Design and Implementation
o API Integration
o Database Schema
o Frontend & cURL Logic
5. User Interface
6. Challenges and Solutions
7. Future Improvements
8. Appendices

1. Project Overview
 Purpose: To build a functional and interactive web application using AJAX and an
external movie API.
 Summary of Features:
o Dynamic search via API
o Database integration for storing searches and ratings
o User rating system
o Top 5 search leaderboard
2. Features
 Real-time search from movie API
 Stores searched movies and counts frequency
 Allows 1–5 star rating of movies
 Shows Top 5 Most Searched movies
 User feedback and loading indicators
 Visual transitions for updates
3. Tools and Technologies Used
 Languages: HTML, CSS, JavaScript, PHP
 Libraries: jQuery, Bootstrap (optional)
 API: OMDb API
 Database: MySQL
 Editor: VS Code / Sublime Text
 Optional Tools: Figma/Adobe XD for UI design
4. System Design and Implementation
4.1 API Integration
 GET:
o Retrieves movie details for display
4.2 Database Schema
 movies: movie_id, title, search_count, poster_url
 ratings: rating_id, movie_id, rating_value, created_at
4.3 Frontend & cURL Logic
 Use cURL and PDO database to:
o Fetch movie info from API
o Insert/update movie in database
o Submit rating and fetch average
o Retrieve and display Top 5 list
4.4 CRUD Operations (Code Examples)
 GET movie from API using AJAX
 POST search info to movies table
 POST rating to ratings table
 GET Top 5 movies based on search_count
5. User Interface
 Include screenshots with labels:
o Search bar and movie display
o Rating system
o Top 5 Most Searched section
6. Challenges and Solutions

Semester: 1st Sem Academic Year: 2024-20205


 API connection issues → Resolved by checking CORS and API key usage
 Duplicate movie entries → Solved using unique constraint and conditional
INSERT/UPDATE
7. Future Improvements
 Add user authentication for personal ratings
 Include genres/tags filtering
 Implement pagination for search results
 Mobile-first UI optimization
8. Appendices
 API Key management guide
 SQL script for database creation
 Additional resources used

Rubrics for Evaluating the Final Project


Criteria Excellent Proficient Satisfactory Needs Scor
Improvement e

Functional All CRUD Most CRUD CRUD operations Few or no CRUD


Completeness operations are operations work implemented, but operations work
implemented with minor issues. some major correctly.
correctly; no features missing or
bugs; smooth buggy.
execution.

User Interface UI is visually UI is functional and UI is basic with UI is poorly


Design appealing, highly visually acceptable; minimal effort in designed, difficult
intuitive, and some design; lacks to use, or
responsive; clear responsiveness animations or incomplete.
animations and issues or limited responsiveness.
feedback. animations.

AJAX AJAX calls are AJAX calls are Basic AJAX Little to no AJAX
Integration implemented mostly correct; integration: some integration;
efficiently; minor issues with operations rely on synchronous
seamless handling or display page reloads; error operations
asynchronous of asynchronous handling missing or dominate.
operations; operations. minimal.
proper error
handling.

Code Quality Code is clean, Code is readable Code lacks proper Code is poorly
and well-documented, and moderately structure or written,
Organization and follows best organized; minor comments; evident unstructured, and
practices; documentation areas of lacks comments
excellent use of issues. redundancy or poor or readability.
modularity. practices.

Documentatio Comprehensive Documentation Documentation is Documentation is


n and Effort and well- covers most incomplete or minimal, poorly
organized aspects; minor missing important written, or
documentation; omissions or sections; lacks missing entirely.
includes all organizational screenshots or
required sections issues. clear explanations.
with visuals.

PREPARED BY:

JELSON V. LANTO

Semester: 1st Sem Academic Year: 2024-20205


SITE, FACULTY

Semester: 1st Sem Academic Year: 2024-20205

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy