Есть ли способ, как я могу связать вместе HTML-страницы и обмениваться информацией между ними без базы данных? - PullRequest
Новая
       13

Есть ли способ, как я могу связать вместе HTML-страницы и обмениваться информацией между ними без базы данных?

0 голосов
/ 07 октября 2018

Привет (английский не мой родной язык, так что прости меня за любые ошибки),

Мне нужна помощь с моим кодом.Я работаю над сайтом для школьного проекта.Мне нужно сделать профессиональный сайт с HTML / CSS / PHP / JavaScript.Моя тема - видеоигры CS: GO.Основная цель сайта - дать информацию о том, как играть в карты / wapens и т. Д. Я бы не сказал, что я хорош в HTML, но я знаю, как делать такие вещи, как навигационное меню и видео / позиционирование в css.,

В настоящее время у меня есть индексный файл и около 30 отдельных файлов, содержащих информацию об игре.Я знаю, что могу использовать базу данных для этого, но это не цель этого задания.Почти каждый файл точно такой же, кроме информации / некоторых изображений.

Я хотел бы знать, есть ли способ, которым я могу иметь одну страницу, содержащую код для моего верхнего / навигационного меню / нижнего колонтитула, а другую простодля информации.Я могу сохранить его, как в настоящее время, но каждый раз, когда я редактирую что-то об имени / местоположении файла, я должен открывать каждый отдельный файл.Пример: когда у меня есть файл, связанный в моем меню навигации, и я меняю имя файла, скажем, он называется map1.html, и я меняю его на map_1.html.Я должен открыть и вручную изменить каждый файл.

Когда я провел собственное исследование, я нашел атрибут iframe.Но я не мог заставить его работать успешно.Так есть что-то еще, что я мог бы использовать?Может быть, что-то с JavaScript или PHP?У меня также нет опыта работы с JavaScript или php, поэтому, если вы разместите некоторый код, пожалуйста, объясните немного, как он работает и как я могу его использовать.

У меня в голове есть этот код:.Я знаю, что это не работает, но дает лучшее представление о том, почему я пытаюсь это сделать.В navigation-menu.html есть только код для меню навигации и css, ничего нет.Я ищу что-то подобное.Цель строки - скопировать все в файле navigation-menu.html и отобразить его.

Пример страницы.Я хотел бы иметь такие вещи, как, заголовок, нижний колонтитул, чтобы быть в отдельном файле.Просто для пояснений, класс тела, если для разных фонов в каждом файле 

<html>
<head>
    <!--Titel/Icon/CSS files-->
</head>
<header>
    <!--Banner/2 small images-->
</header>
<body class="GW-CT-AUG">
<ul id="navigatie_menu">
            <!--Other pages (history-about us-home(index.html) -->
    <li><a>Game Modes</a>
        <ul>
            <!--The different gamemodes-->
        </ul>
    </li>
    <li><a>Maps</a>
        <ul>
            <!--The different maps-->
        </ul>
    </li>
    <li><a>Wapens</a>
        <ul>
            <!--The different guns-->
        </ul>
    </li>
    <li><a>Equipment</a>
        <ul>
            <!--The different Equipment-->
        </ul>
    </li>           
</ul>
<center>
        <!--An images-->
    <p class="tekst">
        <!--Information about the game-->   
    </p>
</center>
</body>
<footer class="footer" id="footer-aug">
    <!--footer-->   
</footer>
</html>

Ответы [ 3 ]

0 голосов
/ 08 октября 2018

Вместо создания файла header и файла footer вы можете создать содержимое в другом файле.Сначала вы создаете файл, например index.html.Обратите внимание, что я добавил идентификатор ul_gamemodes и еще один ul_maps.

. В javascript функция readFile(file, parent) принимает 2 аргумента: файл, в котором находится содержимое (URL), и родительский элемент.div, куда вы хотите поместить содержимое из файла. 

<html>
<head>
    <!--Titel/Icon/CSS files-->
</head>
<header>
    <!--Banner/2 small images-->
</header>
<body class="GW-CT-AUG">
<ul id="navigatie_menu">
            <!--Other pages (history-about us-home(index.html) -->
    <li><a>Game Modes</a>
        <ul id="ul_gamemodes">
            <!--The different gamemodes-->
        </ul>
    </li>
    <li><a>Maps</a>
        <ul id="ul_maps">
            <!--The different maps-->
        </ul>
    </li>
    <li><a>Wapens</a>
        <ul>
            <!--The different guns-->
        </ul>
    </li>
    <li><a>Equipment</a>
        <ul>
            <!--The different Equipment-->
        </ul>
    </li>           
</ul>
<center>
        <!--An images-->
    <p class="tekst">
        <!--Information about the game-->   
    </p>
</center>

<footer class="footer" id="footer-aug">
    <!--footer-->   
</footer>


<script>
function readFile(file, parent){
    var myContent = new XMLHttpRequest();
    myContent.open("GET", file, false);
    myContent.onreadystatechange = function ()
    {
        if(myContent.readyState === 4)
        {
            if(myContent.status === 200 || myContent.status == 0)
            {
                var myText = myContent.responseText;
                console.log(myText);
              parent.innerHTML = myText
            }
        }
    }
    myContent.send(null);
}


readFile("gamemodes.txt", ul_gamemodes);
readFile("maps.txt", ul_maps);



</script>

</body>
</html>

Затем вы создаете файл с именем gamemodes.txt, куда вы помещаете содержимое, которое вы хотите поместить в #ul_gamemodes, и другой файл maps.txt куда вы помещаете контент, который хотите поместить в ul_maps.Обратите внимание, что в index.html вы читаете эти файлы: 

readFile("gamemodes.txt", ul_gamemodes);
readFile("maps.txt", ul_maps);

Теперь, когда вы открываете index.html, вы можете видеть содержимое этих двух файлов на месте.

Поскольку это не сработает в SO, вы можете открыть этот Codepen Project

0 голосов
/ 08 октября 2018

Другие ответы слишком усложняют его.

Если у вас есть доступный PHP, но вы не можете использовать базы данных, тогда вы можете делать то, что хотите, имея заголовок, нижний колонтитул и контент и просто include()-при необходимости в нужном месте.Многие из моих «статических» страниц на работе (ну, честно говоря, все они) выглядят примерно так: 

<?php include($_SERVER['DOCUMENT_ROOT']."/global-style/header.php"); ?>
<?php include($_SERVER['DOCUMENT_ROOT']."/this_app/header.php"); ?>
<?php include($_SERVER['DOCUMENT_ROOT']."/this_app/left_side.php"); ?>
<div id="main_content" class="main_content">
Regular HTML stuff goes here!
</div> <!-- end main_content -->
<?php include($_SERVER['DOCUMENT_ROOT']."/this_app/right_side.php"); ?>
<?php include($_SERVER['DOCUMENT_ROOT']."/global-style/footer.php"); ?>

Если вы можете использовать только чистый HTML, CSS и JavaScript, вы можете использовать <iframe>или выполните некоторые хитрости с помощью запросов JavaScript и http для загрузки содержимого из внешнего файла / URL-адреса в тег <div>.

iframe - https://www.w3schools.com/tags/tag_iframe.asp

, включите через javascript - https://www.w3schools.com/howto/howto_html_include.asp

Что касается ссылок и навигации, вы всегда можете использовать теги привязки или аргументы GET для URL-адреса, чтобы сохранить все «один файл» вне index.php или index.html или, если ничего не помогает, просто создайте файл менючтобы ввести с помощью старых добрых ссылок href в ваш файл содержимого с примененными колонтитулами.

0 голосов
/ 07 октября 2018

Почему бы вам не создать PHP-файл, в котором вы будете писать переменные вроде: 

$SESSION['example'] = echo "SOMETHING... SOMETHING... SOMETHING..."

и вызывать их в каждом файле?

Например:

Вы хотите создать div с логотипом CS: GO, затем написать и стилизовать его внешний вид, а затем ввести его в оператор echo.

следующим образом: 

echo "<div class='example'>LOGO OF CS:GO</div>";

Не забудьте вставить его в теги <?php ?> и ofc, чтобы начать сеанс:)

...