微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何使用 Drupal 8 和 Bootstrap 表单生成文件?

如何解决如何使用 Drupal 8 和 Bootstrap 表单生成文件?

我不知道从哪里开始。

我用 HTML、CSS 和 JS(它也是一个 PWA)创建了一个小型网站。

我使用 Bootstrap 在 Drupal 中创建了一个表单。

我希望用户填写表单中要求的信息,并使用他们的信息生成站点文件(该信息应替换小网站上的信息)。如果可能,在 ZIP 存档中。我不想将此信息存储在数据库中。

我该怎么做?是复杂还是模块简单?

用户单击“生成”并下载 ZIP 存档。它应该包含一个带有网站文件的 www 文件夹和一个带有表单信息备份的 YAML 文件(用于可能的更新)。

如果可能,那将是理想的功能

我在 Drupal 8 上创建了一个带有 Bootstrap 表单的页面。它直接编码在一个 TWIG 文件中。这是表单页面

https://www.s1biose.com/fr/generator-website

我创建了一个小型网站。以下是文件

https://github.com/S1BIOSE/E-business-Card

在这里开始了一个模块:

https://github.com/S1BIOSE/generator_website

这里是表单的 TWIG 文件内容

<div class="card mb-5 overflow-hidden shadow rounded bg-white">
  <div class="card-body">

    <form class="border-bottom border-dark mb-3">
      <legend>Préremplir le formulaire</legend>
      <div class="mb-3">
        <input class="form-control" type="file" id="formFile">
        <small id="helpFile" class="form-text">Importez votre fichier de sauvegarde YAML.</small>
      </div>
      <div class="mb-4">
        <button type="submit" class="btn btn-secondary">Importer</button>
      </div>
    </form>

    <form>
      <div class="alert alert-warning" role="alert">
        Toutes les informations que vous allez saisir sur ce formulaire seront affichées publiquement sur votre site web. Il s'agit des informations de votre entreprise,pas vos informations personnelles.
      </div>

      <legend>Générateur de site web</legend>
      <div class="mb-3">
        <label for="inputTitle" class="form-label">Nom de l'entreprise</label>
        <input type="text" class="form-control is-invalid" id="inputTitle" required>
        <div class="invalid-Feedback">
          Ce champ est requis.
        </div>
        <small id="helpTitle" class="form-text">Entrez le nom de votre entreprise.</small>
      </div>
      <div class="mb-3">
        <label for="textareaDescription" class="form-label">Présentation de l'entreprise</label>
        <textarea class="form-control is-invalid" id="textareaDescription" rows="5" required></textarea>
        <div class="invalid-Feedback">
          Ce champ est requis.
        </div>
        <small id="helpDescription" class="form-text">Entrez une description de votre entreprise.</small>
      </div>

      <div class="mb-3">
        <label for="inputSocialNetwork1" class="form-label">Réseau social 1</label>
        <input type="text" class="form-control is-invalid" id="inputSocialNetwork1" required>
        <div class="invalid-Feedback">
          Ce champ est requis.
        </div>
        <small id="helpSocialNetwork1" class="form-text">Entrez l'url de votre page sur les réseaux sociaux.</small>
      </div>
      <div class="mb-3">
        <label for="inputSocialNetwork2" class="form-label">Réseau social 2</label>
        <input type="text" class="form-control" id="inputSocialNetwork2">
        <small id="helpSocialNetwork2" class="form-text">Entrez l'url de votre page sur les réseaux sociaux.</small>
      </div>
      <div class="mb-3">
        <label for="inputSocialNetwork3" class="form-label">Réseau social 3</label>
        <input type="text" class="form-control" id="inputSocialNetwork3">
        <small id="helpSocialNetwork3" class="form-text">Entrez l'url de votre page sur les réseaux sociaux.</small>
      </div>
      <div class="mb-3">
        <label for="inputWebsite1" class="form-label">Marketplace 1</label>
        <input type="text" class="form-control is-invalid" id="inputWebsite1" required>
        <div class="invalid-Feedback">
          Ce champ est requis.
        </div>
        <small id="helpWebsite1" class="form-text">Entrez l'url de votre boutique sur les marketplaces.</small>
      </div>
      <div class="mb-3">
        <label for="inputWebsite2" class="form-label">Marketplace 2</label>
        <input type="text" class="form-control" id="inputWebsite2">
        <small id="helpWebsite2" class="form-text">Entrez l'url de votre boutique sur les marketplaces.</small>
      </div>
      <div class="mb-3">
        <label for="inputWebsite3" class="form-label">Marketplace 3</label>
        <input type="text" class="form-control" id="inputWebsite3">
        <small id="helpWebsite3" class="form-text">Entrez l'url de votre boutique sur les marketplaces.</small>
      </div>

      <div class="mb-3">
        <label for="inputEmail" class="form-label">Adresse email</label>
        <input type="email" class="form-control is-invalid" id="inputEmail" required>
        <div class="invalid-Feedback">
          Ce champ est requis.
        </div>
        <small id="helpEmail" class="form-text">Entrez l'adresse email de votre entreprise.</small>
      </div>
      <div class="row">
        <div class="col-12 mb-3">
          <label for="inputAddress" class="form-label">Adresse</label>
          <input type="text" class="form-control is-invalid" id="inputAddress" required>
          <div class="invalid-Feedback">
            Ce champ est requis.
          </div>
        </div>
        <div class="col-12 mb-3">
          <label for="inputAddress2" class="form-label">Adresse 2</label>
          <input type="text" class="form-control" id="inputAddress2">
        </div>
        <div class="col-md-2 mb-3">
          <label for="inputZip" class="form-label">Code postal</label>
          <input type="text" class="form-control is-invalid" id="inputZip" required>
          <div class="invalid-Feedback">
            Ce champ est requis.
          </div>
        </div>
        <div class="col-md-6 mb-3">
          <label for="inputCity" class="form-label">Ville</label>
          <input type="text" class="form-control is-invalid" id="inputCity" required>
          <div class="invalid-Feedback">
            Ce champ est requis.
          </div>
        </div>
        <div class="col-md-4 mb-3">
          <label for="inputState" class="form-label">Pays</label>
          <input type="text" class="form-control is-invalid" id="inputState" required>
          <div class="invalid-Feedback">
            Ce champ est requis.
          </div>
        </div>
      </div>
      <div class="mb-3">
        <label for="inputPhone" class="form-label">Téléphone</label>
        <input type="text" class="form-control" id="inputPhone">
        <small id="helpPhone" class="form-text">Entrez le numéro de téléphone de votre entreprise.</small>
      </div>
      <div class="mb-3">
        <label for="inputSiret" class="form-label">SIRET</label>
        <input type="text" class="form-control is-invalid" id="inputSiret" required>
        <div class="invalid-Feedback">
          Ce champ est requis.
        </div>
        <small id="helpSiret" class="form-text">Entrez le numéro de SIRET de votre entreprise.</small>
      </div>

      <div class="mb-3">
        <label for="inputFeed" class="form-label">Fil d'actualité</label>
        <input type="text" class="form-control" id="inputFeed">
        <small id="helpFeed" class="form-text">Entrez l'url de votre Flux RSS sur la plateforme S1BIOSE.</small>
      </div>

      <button type="submit" class="btn btn-primary">Générer</button>
    </form>

  </div>
</div>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。