Membina Laman Web Pencari Filem menggunakan React

pengenalan

Dalam blog ini, kami akan melalui proses membina tapak web Movie Finder menggunakan React dan API OMDB. Laman web ini membenarkan pengguna menyemak imbas filem mengikut kategori seperti Avengers, Star Wars dan Siri, dan mencari filem menggunakan pertanyaan khusus. Setiap filem mempunyai halaman butirannya, menjadikannya mudah untuk meneroka lebih lanjut tentang filem kegemaran anda.

Gambaran Keseluruhan Projek

Tapak Web Pencari Filem membolehkan pengguna untuk:

• Semak imbas kategori seperti Avengers dan Star Wars.
• Cari filem mengikut kata kunci.
• Lihat maklumat filem terperinci (poster, genre, pengarah, pelakon dan banyak lagi).
• Navigasi dengan mudah melalui tapak web dengan reka bentuk moden yang bersih.

Ciri-ciri

• Ambil data secara dinamik menggunakan API OMDB.
• Reka bentuk responsif untuk pengalaman pengguna yang lebih baik.
• Fungsi carian yang memberikan hasil segera.
• Memuatkan penunjuk semasa data sedang diambil.
• Lihat butiran filem individu pada halaman yang berasingan.

Teknologi yang Digunakan

• React: Pustaka bahagian hadapan untuk membina komponen UI.
• Penghala React: Untuk navigasi dan penghalaan.
• Axios: Untuk membuat permintaan HTTP kepada API OMDB.
• OMDB API: Untuk mengambil butiran filem.
• CSS: Untuk menggayakan aplikasi.

Struktur Projek

Berikut ialah struktur direktori untuk projek:

movie-finder/
├── public/
├── src/
│   ├── components/
│   │   └── Navbar.js
│   │   └── Footer.js
│   ├── pages/
│   │   └── Home.js
│   │   └── Movies.js
│   │   └── Series.js
│   │   └── SearchResults.js
│   │   └── MovieDetail.js
│   └── App.js
│   └── App.css
└── package.json

Pemasangan

1. Klon repositori:
   

   git clone https://github.com/abhishekgurjar-in/movie-finder.git
   cd movie-finder
   

2. Pasang kebergantungan:
   

   npm install
   

3. Dapatkan kunci API anda daripada API OMDB.

4. Buat fail .env dalam akar projek dan tambah kunci API anda:
   

   REACT_APP_OMDB_API_KEY=yourapikey
   

5. Jalankan projek:
   

   npm start
   

Penggunaan

1. Halaman Utama

Halaman Utama mempamerkan dua kategori filem: Avengers dan Star Wars. Apabila pengguna mengklik pada kad filem, mereka diubah hala ke halaman filem terperinci.

Coretan Kod daripada Home.js:

import React, { useEffect, useState } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import Movies from "./Movies";
import Series from "./Series";

const Home = () => {
  const [avengersMovies, setAvengersMovies] = useState([]);
  const [starWarsMovies, setStarWarsMovies] = useState([]);
  const [loadingAvengers, setLoadingAvengers] = useState(true);
  const [loadingStarWars, setLoadingStarWars] = useState(true);
  const navigate = useNavigate();

  useEffect(() => {
    fetchMovies("Avengers", setAvengersMovies, setLoadingAvengers);
    fetchMovies("Star Wars", setStarWarsMovies, setLoadingStarWars);
  }, []);

  const fetchMovies = (query, setMovies, setLoading) => {
    axios
      .get(`http://www.omdbapi.com/?s=${query}&apikey=you_api_key`)
      .then((response) => {
        if (response.data.Search) {
          setMovies(response.data.Search);
        } else {
          setMovies([]); // Clear movies if no results
        }
      })
      .catch((error) => {
        console.error(`There was an error fetching the ${query} movies!`, error);
        setMovies([]); // Clear movies if there is an error
      })
      .finally(() => {
        setLoading(false);
      });
  };

  const handleCardClick = (id) => {
    navigate(`/movie/${id}`);
  };

  const renderMovies = (movies, loading) => (
    loading ? (
      <div classname="loader"><div classname="load"></div></div>
    ) : (
      <div classname="cards">
        {movies.length > 0 ? (
          movies.map((movie) => (
            <div key="{movie.imdbID}" classname="card" onclick="{()"> handleCardClick(movie.imdbID)}>
              <img src="%7Bmovie.Poster%7D" alt="{movie.Title}">
              <h2 id="movie-Title">{movie.Title}</h2>
            </div>
          ))
        ) : (
          <p>No movies found.</p>
        )}
      </div>
    )
  );

  return (
    
      <div classname="home">
        <div classname="movie-category">
          <h4 id="Avengers-Movies">Avengers Movies</h4>
          {renderMovies(avengersMovies, loadingAvengers)}
        </div>
        <br>
        <br>
        <div classname="movie-category">
          <h4 id="Star-Wars-Movies">Star Wars Movies</h4>
          {renderMovies(starWarsMovies, loadingStarWars)}
        </div>
      </div>
      <movies></movies>
      <series></series>
    >
  );
};

export default Home;

2. Fungsi Carian

Pengguna boleh mencari mana-mana filem menggunakan bar carian di bahagian atas tapak web. Hasil carian diambil daripada API OMDB berdasarkan pertanyaan pengguna.

Snippet Kod daripada SearchResults.js:

import React, { useEffect, useState } from "react";
import axios from "axios";
import { useParams, useNavigate } from "react-router-dom";

const SearchResults = () => {
  const [movies, setMovies] = useState([]);
  const [loading, setLoading] = useState(false);
  const { query } = useParams();
  const navigate = useNavigate(); // Add this line to use navigate

  useEffect(() => {
    if (query) {
      setLoading(true);  // Set loading to true before starting the fetch
      axios
        .get(`http://www.omdbapi.com/?s=${query}&apikey=your_api_key`)
        .then((response) => {
          if (response.data.Search) {
            setMovies(response.data.Search);
          } else {
            setMovies([]); // Clear movies if no results
          }
        })
        .catch((error) => {
          console.error("There was an error fetching the movie data!", error);
        })
        .finally(() => {
          setLoading(false);  // Set loading to false once fetch is complete
        });
    }
  }, [query]);

  const handleCardClick = (id) => {
    navigate(`/movie/${id}`); // Navigate to movie detail page
  };

  return (
    <div classname="search-results">
      <h4 id="Search-Results-for-query">Search Results for "{query}"</h4>
      {loading ? (
        <div classname="loader"><div classname="load"></div></div>  // Loader
      ) : (
        <div classname="cards">
          {movies.length > 0 ? (
            movies.map((movie) => (
              <div key="{movie.imdbID}" classname="card" onclick="{()"> handleCardClick(movie.imdbID)}>
                <img src="%7Bmovie.Poster%7D" alt="{movie.Title}">
                <h2 id="movie-Title">{movie.Title}</h2>
              </div>
            ))
          ) : (
            <p>No results found.</p>
          )}
        </div>
      )}
    </div>
  );
};

export default SearchResults;

3. Halaman Perincian Filem

Apabila pengguna mengklik pada filem, mereka diubah hala ke halaman butiran filem. Halaman ini menunjukkan tajuk filem, poster, plot, pelakon dan banyak lagi.

Snippet Kod daripada MovieDetail.js:

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useParams } from 'react-router-dom';

const MovieDetail = () => {
  const [movie, setMovie] = useState(null);
  const [loading, setLoading] = useState(true);
  const { id } = useParams();

  useEffect(() => {
    axios.get(`http://www.omdbapi.com/?i=${id}&apikey=your_api_key`)
      .then((response) => {
        setMovie(response.data);
      })
      .catch((error) => {
        console.error("There was an error fetching the movie details!", error);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [id]);

  if (loading) return <div classname="loader">
    <div classname="load"></div>
  </div>;
  if (!movie) return <div classname="loader">No movie data found!</div>;

  return (
    <div classname="movie-detail">

<div classname="detail-box">
<h1 id="movie-Title">{movie.Title}</h1>
<p><strong>Year:</strong> {movie.Year}</p>
      <p><strong>Rating:</strong> {movie.imdbRating}</p>
      <p><strong>Genre:</strong> {movie.Genre}</p>
      <p><strong>Director:</strong> {movie.Director}</p>
      <p><strong>Actors:</strong> {movie.Actors}</p>
      <p><strong>Plot:</strong> {movie.Plot}</p>
      <p><strong>Runtime:</strong> {movie.Runtime}</p>
      <p><strong>Language:</strong> {movie.Language}</p>
      <p><strong>Country:</strong> {movie.Country}</p>
      <p><strong>Awards:</strong> {movie.Awards}</p>
</div>
    <div classname="img-box">
    <img src="%7Bmovie.Poster%7D" alt="{movie.Title}">
    </div>
    </div>
  );
};

export default MovieDetail;

4. Filem dan Halaman Siri

Halaman

Movies.js dan Series.js masing-masing menyenaraikan filem dan siri TV.

Snippet Kod daripada Movies.js:

import React, { useEffect, useState } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";

const Movies = () => {
  const [movies, setMovies] = useState([]);
  const navigate = useNavigate();

  useEffect(() => {
    axios
      .get(`http://www.omdbapi.com/?s=Avengers&type=movie&apikey=${process.env.REACT_APP_OMDB_API_KEY}`)
      .then(response => setMovies(response.data.Search || []))
      .catch(error => console.error(error));
  }, []);

  const handleCardClick = (id) => {
    navigate(`/detail/${id}`);
  };

  return (
    <div classname="movies">
      <h2 id="Movies">Movies</h2>
      <div classname="cards">
        {movies.map(movie => (
          <div key="{movie.imdbID}" classname="card" onclick="{()"> handleCardClick(movie.imdbID)}>
            <img src="%7Bmovie.Poster%7D" alt="{movie.Title}">
            <h3 id="movie-Title">{movie.Title}</h3>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Movies;

Snippet Kod daripada Series.js:

import React, { useEffect, useState } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";

const Series = () => {
  const [series, setSeries] = useState([]);
  const navigate = useNavigate();

  useEffect(() => {
    axios
      .get(`http://www.omdbapi.com/?s=Star Wars&type=series&apikey=${process.env.REACT_APP_OMDB_API_KEY}`)
      .then(response => setSeries(response.data.Search || []))
      .catch(error => console.error(error));
  }, []);

  const handleCardClick = (id) => {
    navigate(`/detail/${id}`);
  };

  return (
    <div classname="series">
      <h2 id="TV-Series">TV Series</h2>
      <div classname="cards">
        {series.map(show => (
          <div key="{show.imdbID}" classname="card" onclick="{()"> handleCardClick(show.imdbID)}>
            <img src="%7Bshow.Poster%7D" alt="{show.Title}">
            <h3 id="show-Title">{show.Title}</h3>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Series;

5. Komponen Navbar

Komponen Navbar membolehkan pengguna menavigasi antara halaman yang berbeza dan melakukan carian.

Navbar.js dikemas kini

import React, { useState } from "react";
import { NavLink, Link } from "react-router-dom";

const Navbar = () => {
  const [searchQuery, setSearchQuery] = useState("");

  const handleSearch = (event) => {
    if (event.key === 'Enter' && searchQuery.trim()) {
      document.getElementById('search-link').click();
    }
  };

  return (
    <div classname="navbar">
      <div classname="logo">
        <h1 id="Movie-Finder">Movie Finder</h1>
      </div>

      <div classname="page-list">
        <navlink to="/">
          <h4 id="Home">Home</h4>
        </navlink>
        <navlink to="/movies">
          <h4 id="Movies">Movies</h4>
        </navlink>
        <navlink to="/series">
          <h4 id="TV-Series">TV Series</h4>
        </navlink>
      </div>
      <div classname="search-box">
        <input type="text" placeholder="Search for movies or series" value="{searchQuery}" onchange="{(e)"> setSearchQuery(e.target.value)}
          onKeyDown={handleSearch}
        />
        <link to="{`/search/${searchQuery}`}" id="search-link">
          <button>Search</button>
        
      </div>
    </div>
  );
};

export default Navbar;

6. Komponen Pengaki

Komponen Footer menyediakan mesej footer yang ringkas.

Footer.js

import React from 'react';

const Footer = () => {
  return (
    <div classname="footer">
      Made with <span>❤️</span> by Abhishek Gurjar
    </div>
  );
};

export default Footer;

*{
  box-sizing: border-box;
}
body{
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}
.navbar {
  padding-inline: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: red;
}
.search-btn{
  background-color: red;
}
.logo h1{
  font-size: 25px;
  color:black;
  }
.page-list {
  display: flex;
  align-items: center;
  gap: 40px;
}

.page-list a{
  color: white;
  text-decoration: none;
  font-size: 20px;
}
.page-list a:hover{
color: black;
}
.page-list a.active{
  color: black;
}
.search-box{
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  background-color:white;
  color: gray;
  width: 250px;
  height: 40px;
  border-radius: 50px;
  overflow: hidden;
}
.search-box input{
  width: 200px;
  height: 40px;
  margin-left: 10px;
  border: none;
  outline: none;

}
.home{
  margin-block: 40px;
  margin-inline: 60px;

}
.home h4{
  font-size: 16px;
}


.movies{
  margin-block: 40px;
  margin-inline: 60px;

}
.movies h4{
  font-size: 16px;
}
.cards{
  display: flex;
flex-wrap: wrap;
  align-items:center ;
  justify-content: space-between;
  gap: 10px;
}
.card{
  width:200px;
  height:360px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.card img{
  width: 200px;
  height: 290px;
  object-fit: cover;
}
.card h2{
  margin: 10px;
  font-size: 16px;
text-align: center;
}

.series{
  margin-block: 40px;
  margin-inline: 60px;
}
.series h4{
  font-size: 16px;
}
.home{
  margin-block: 40px;
  margin-inline: 60px;

}
.search-results{
  margin-block: 40px;
  margin-inline: 60px;
}
.search-results h4{
  font-size: 16px;
}

.loader{
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* HTML: <div class="loader"></div> */
.load {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff1900;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}


.movie-detail {
  margin-block: 40px;
  margin-inline: 60px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
img-box{
  width: 50%;
}
.movie-detail img {
  border-radius: 10px;
width: 330px;
 height: auto;
 object-fit: cover;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.detail-box{
  width: 50%;
}
.movie-detail p {
  font-size: 18px;
  margin: 10px 0;
}

.movie-detail a {
  display: inline-block;
  margin-top: 20px;
  color: #007bff;
  text-decoration: none;
}

.movie-detail a:hover {
  text-decoration: underline;
}


.footer{
  width: 100%;
  background-color: red;
  text-align: center;
  color: white;
  padding: 20px;
}

Demo Langsung

Anda boleh melihat demo langsung tapak web Movie Finder di sini.

Kesimpulan

Dalam blog ini, kami mempelajari cara membuat tapak web Movie Finder menggunakan React, React Router dan Axios. Projek ini menunjukkan cara berinteraksi dengan API awam, mengurus keadaan dalam React dan mencipta pengalaman menyemak imbas filem yang ringkas tetapi berfungsi.

Jangan ragu untuk menyesuaikan reka bentuk dan menambah lebih banyak ciri, seperti ulasan pengguna atau rating filem, untuk menjadikannya lebih dinamik!

---

Kredit

• OMDB API
• Bertindak balas
• Penghala Reaksi

Pengarang

Abhishek Gurjar ialah pembangun web berdedikasi yang bersemangat untuk mencipta aplikasi web yang praktikal dan berfungsi. Lihat lebih banyak projek beliau di GitHub.

Atas ialah kandungan terperinci Membina Laman Web Pencari Filem menggunakan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!