Я искал веб-сайт, на котором я мог бы искать лучшие фильмы любого актера / актрисы, но не мог найти ни одного конкретного фильма, который предлагал бы то, что я хотел. Мне пришлось погуглить актера / актрису, затем найти его / ее фильмы, затем найти рейтинг каждого отдельного фильма и затем сравнить их. Это было неэффективно… поэтому я решил сделать для этого сайт.
Я нашел данные фильма с IMDB на kaggle. CSV содержит около 85 тысяч фильмов и более 175 тысяч актеров. CSV включает в себя все, что мне нужно, от названия фильма, имени актеров, его рейтинга IMDB и многого другого. Простая фильтрация по строке содержит со столбцом актеров, отсортированным по рейтингу, дала бы желаемый результат. Самое интересное - сделать из этого веб-сайт…
Ниже я расскажу о создании HTML и JavaScript, необходимых для работы веб-сайта.
HTML
Для создания веб-сайта я использовал Visual Studio Code (однако с этой работой справится любое программное обеспечение). Как только вы наберете ! + tab появится базовый шаблон html:
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8"> <meta name=”viewport” content=”width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Первым шагом было добавление ссылки начальной загрузки, чтобы визуально улучшить веб-сайт и сделать его более удобным для пользователя. Этот шаг не является обязательным, но без него веб-сайт будет выглядеть так, как будто он был создан в 90-х годах.
Чтобы иметь возможность использовать бутстрап, я добавил это в шапку:
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”>
… Готово! Теперь я могу использовать бутстрап.
Я разделил ‹body› на две части: ввод и вывод. Ниже приведена часть ввода:
<body> <div class=”container”> <div class=”row”> <div class=”col-md-12"> <h1 class=>Find Movies!</h1> <h2 class=>Enter the name of an actor/actress to see his/her best movies!</h2> <form id=”form”> <input class=”form-control” id=”user-input” placeholder=”Enter actor/actress…”> <button id=”button” class=”btn btn-secondary”>Find Movies!</button> </form>
Первые 3 ‹div› для container, row и col-md-12 - это просто структура начальной загрузки для выровняйте содержимое в контейнере. Затем я создал заголовок, используя ‹h1›, и подзаголовок, используя ‹h2›.
Затем наступает важная часть. Я использовал ‹форму› с идентификатором (обратите внимание, что идентификаторы и классы важны для ссылки на файл JavaScript или стиль начальной загрузки). Внутри формы у меня есть ‹input› с классом для начальной загрузки, идентификатором для JavaScript и заполнителем для отображения на веб-сайте. Наконец, у меня есть ‹кнопка› с идентификатором для JavaScript и класс для начальной загрузки с некоторым текстом для отображения на веб-сайте.
Ниже представлена выходная часть:
<table class="table" cellpadding="10"> <thead> <tr> <th scope="col">#</th> <th scope="col">Movie</th> <th scope="col">Rating</th> <th scope="col">Year</th> <th scope="col">Description</th> </tr> </thead> <tbody> </div> </div> </div>
Я создал ‹table› с небольшим отступом (чтобы он выглядел лучше). Затем я создал ‹thead›, в котором создаются заголовки столбцов. После этого шага мне понадобилась строка для всех заголовков, отсюда ‹tr›, а затем все ‹th› для каждого столбца. Затем я закрыл ‹thead› и запустил ‹tbody›, где и будет отображаться результат. Наконец, я просто закрываю 3 элемента ‹div› из контейнера, row и col-md-12 от прежде.
Каркас сайта готов! С этого момента сайт должен выглядеть так:
Сравните с тем, как это выглядит без начальной загрузки:
Это знаменует конец HTML-части веб-сайта. Конечно, на данном этапе сайт вообще ничего не делает. Ему все еще нужен файл JavaScript, чтобы стать полезным.
JavaScript
Я использовал JavaScript для загрузки CSV, получения пользовательского ввода, фильтрации CSV и отображения результатов.
Требуется файл .js. Я назвал его app.js и сохранил в папке рядом с html- и CSV-файлами.
Я использовал D3, невероятно полезную библиотеку JavaScript для управления документами на основе данных. Мне нужно было добавить скрипт в заголовок html, чтобы использовать D3:
<script src=”https://d3js.org/d3.v5.min.js"></script>
Все зависит от данных из CSV, поэтому первое, что нужно сделать, - это использовать D3 для чтения CSV, а затем применить функцию:
d3.csv(“movies.csv”).then(function (data) {
var movies = data;
var button = d3.select(“#button”);
var form = d3.select(“#form”);
button.on(“click”, runEnter);
form.on(“submit”, runEnter);
Я создал 3 переменные: movies, который ссылался на CSV, button, который ссылался на кнопку в html, и form, который ссылался на форму в HTML. Использование button.on («щелчок», runEnter) и form.on («submit», runEnter) позволяет пользователю либо нажать кнопку на нашем веб-сайте, либо нажать клавишу возврата, и javascript запустит функцию runEnter.
Теперь мы можем определить нашу функцию runEnter, которую я объясняю более подробно, поскольку это самая важная часть:
// Defining the function
function runEnter() {
// This line of code selects the <tbody> from the html and clears it. If this is not used, then the results would appear on top of the previous result.
d3.select(“tbody”).html(“”)
// This code is needed to prevent the page from reloading.
d3.event.preventDefault();
// This code will get the user's input from what the user will type in the html <input> since we assigned it the "user-input" id. It will get the value and store it in our inputValue variable
var inputValue = d3.select(“#user-input”).property("value");
// This code will filter the movies looking at the actors column. It will store the values when there is a match from the text sequence the user entered and the text from our actors column from the CSV data.
var filteredMovies =
movies.filter(movies => movies.actors.includes(inputValue));
// This was the easiest approach I found to sort the results by a different column in descending order. I had to include a new script in my head to use the _.sortBy
This is the script:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
var output = _.sortBy(filteredMovies, ‘avg_vote’).reverse()
// Once I had all the values in my output variable, all I needed was to loop through them and add them to the table one by one. This was done using d3, where I inserted the value for each one of the columns I wanted using the necessary html to fit each table row.
for (var i = 0; i < filteredMovies.length; i++) {
d3.select(“tbody”).insert(“tr”).html(
“<td>” + [i+1] + ”</td>” +
”<td>” + (output[i][‘original_title’])+”</a>”+“</td>” +
”<td>” + (output[i][‘avg_vote’])+”</td>” +
”<td>” + (output[i][‘year’])+”</td>” +
”<td>” + (output[i][‘description’])+”</td” ) }
};
});
Это все, что касается кодирования! Чтобы сделать сайт работоспособным, все, что осталось, это добавить скрипт в html сайта (я добавил его в шапку):
<script src=”app.js”></script>
Вы можете добавить много стиля, используя CSS или загрузив шаблоны и добавив свой код, чтобы ваш сайт выглядел так, как вы хотите!
Исход
Вы можете увидеть и использовать мою окончательную версию ЗДЕСЬ.
