Front-end 12307 ticketing website developed based on Bootstrap

Database 2023-12-27 17:31:02 views: null

1. Problem description of 12307 online ticketing website design

Content and functional requirements

The online ticketing website must include at least the following pages: home page, hotel information page, air ticket information page, train ticket information page, etc.

Specifically include:

The homepage should have a navigation menu bar, search bar, hotel, air tickets, train tickets and other information.

The hotel information page should have an introduction to the hotel information.

The air ticket information page must have air ticket information introduction.

The train ticket information page should have an introduction to train ticket information.

2. Related uses of Bootstrap

Getting Started Template

Make sure your pages are set up using the latest page design and development standards. That is, use the HTML5 doctype and include a tag that sets the viewport  <meta> for correct responsive layout behavior. When these requirements are put together, your page should look like this:

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>

    <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04" crossorigin="anonymous"></script>
    -->
  </body>
</html>

3. Design and implementation of 12307 online ticketing website

1. Website planning

The whole thing is implemented through the Bootsrap framework. Each page needs to have a navigation bar. The homepage can use the form form in the div to quickly jump to the train tickets or air tickets that need to be purchased, combined with the carousel image, and combined with pictures and text to display For travel plans with discounts, use hyperlinks to link to new pages, and use tables in the frame combined with hyperlinks to display official announcements. The bottom uses a frame to implement the layout of filing and copyright.

Part of the code display:

 <nav class="navbar navbar-expand-lg navbar-light bg-light"><span class="border border-info">
        <a class="navbar-brand" href="index.html">12307在线购票</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button></span>
      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto"><span class="border border-info">
            <li class="nav-item active">
              <a class="nav-link" href="train.html">火车票 <span class="sr-only">(current)</span></a>
            </li></span><span class="border border-info">
            <li class="nav-item">
              <a class="nav-link" href="aeroplane.html">机票</a>
            </li></span><span class="border border-info">
            <li class="nav-item">
              <a class="nav-link" href="groggery.html">酒店服务</a>
            </li></span><span class="border border-info">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                账号设置
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="login.html">登录</a>
                <a class="dropdown-item" href="zuce.html">注册</a>
            </li></span>
            
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search for require" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
          </form>
        </div>
      </nav>

      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="image/lunbo-1.png" class="d-block w-100" alt="..." width="100%" height="500px">
          </div>
          <div class="carousel-item">
            <img src="image/lunbo-2.png" class="d-block w-100" alt="..." width="100%" height="500px">
          </div>
          <div class="carousel-item">
            <img src="image/lunbo-3.png" class="d-block w-100" alt="..." width="100%" height="500px">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </button>
      </div>

2. Design and implementation of web page for purchasing train tickets

There is a navigation bar with a home page, and then a form is used to obtain data, and then the train ticket data is displayed through the span tag in the table below by retrieving the background data (not yet implemented), and the user can choose to purchase it.

Part of the code display:

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">顺序</th>
      <th scope="col">车次</th>
      <th scope="col">出发时间-到站时间</th>
      <th scope="col">出发站-终点站</th>
      <th scope="col">是否有座位</th>
      <th scope="col">备注</th>
      <th scope="col">购票</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>K1406</td>
      <td>2023/6/30 8:20-2023/6/32 9:20</td>
      <td>长春西站-成都东站</td>
      <td>硬座*6</td>
      <td></td>
      <td><button style="background-color: aquamarine;">购买</button></td>
    </tr
  </tbody>
</table>
</div><br><br>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

3. Design and implementation of web page for purchasing flight tickets

There is a navigation bar on the home page, and then the from form is used to obtain data, and then the backend data is retrieved and the air ticket data is displayed through the span tag in the table below. The user chooses to purchase, and at the same time, a table is made to chart the The article combines to display discounted travel tickets.

Part of the code display:

<nav class="navbar navbar-expand-lg navbar-light bg-light"><span class="border border-info">
      <a class="navbar-brand" href="index.html">12307在线购票</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button></span>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto"><span class="border border-info">
          <li class="nav-item active">
            <a class="nav-link" href="train.html">火车票<span class="sr-only">(current)</span></a>
          </li></span><span class="border border-info">
          <li class="nav-item">
            <a class="nav-link" href="aeroplane.html">机票</a>
          </li></span><span class="border border-info">
          <li class="nav-item">
            <a class="nav-link" href="groggery.html">酒店服务</a>
          </li></span><span class="border border-info">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
              账号设置
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="login.html">登录</a>
              <a class="dropdown-item" href="zuce.html">注册</a>
          </li></span>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search for require" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
      </div>
    </nav>


    <br><br> 
    <center>
  <div style="height: 100px;width: 90%;border:solid #aeaeae;background-color: #b5edff;">
  <div style="height: 100px;width: 100px; position:absolute;left: 110px;"><br>
  <input type="radio" name="piao">单程<br><input type="radio" name="piao">往返
  </div>
  <div style="height: 100px;width: 1100px; position:absolute;left: 210px;top: 120px; font-size: 16px;color: #737373;">
  <br>出发地&nbsp;&nbsp;<input type="text" style="border: none;" value="长春">&nbsp;&nbsp;&nbsp;&nbsp;
  目的地&nbsp;&nbsp;<input type="text" style="border: none;">&nbsp;&nbsp;&nbsp;&nbsp;
  出发日期&nbsp;<input type="date" style="border: none;">&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" name="x1">学生<input type="radio" name="x1">成人&nbsp;&nbsp;&nbsp;&nbsp;
    起飞时间<input type="time">&nbsp;&nbsp;
    <input type="button" onclick="f()" value="查询票务" style="width: 80px; height: 30px; background-color: rgb(29, 195, 255);border: none;border-radius: 5px;">
  </div>
  </div>
  </center>
  <br>
  
  
  
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">顺序</th>
        <th scope="col">航班</th>
        <th scope="col">出发时间-到站时间</th>
        <th scope="col">出发站-终点站</th>
        <th scope="col">是否有座位</th>
        <th scope="col">备注</th>
        <th scope="col">购票</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>川551406</td>
        <td>2023/6/30 8:20-2023/6/32 9:20</td>
        <td>长春龙嘉国际机场-成都双流国际机场</td>
        <td>商务舱*6</td>
        <td></td>
        <td><button style="background-color: aquamarine;">购买</button></td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>川504502</td>
        <td>2023/6/30 8:20-2023/6/32 9:14</td>
        <td>广州白云机场-成都双流国际机场</td>
        <td>候补</td>
        <td></td>
        <td><button style="background-color: rgb(127, 246, 255);">候补</button></td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>川969117</td>
        <td>2023/6/30 7:40-2023/6/32 9:14</td>
        <td>达州河市机场-长春龙嘉国际机场</td>
        <td>候补</td>
        <td></td>
        <td><button style="background-color: rgb(127, 246, 255);">候补</button></td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>南航85436</td>
        <td>2023/6/29 8:20-2023/6/31 6:14</td>
        <td>成都龙泉机场-上海国际机场</td>
        <td>经济舱*3</td>
        <td></td>
        <td><button style="background-color: aquamarine;">购买</button></td>
      </tr>
      <tr>
        <th scope="row">5</th>
        <td>南航854402</td>
        <td>2023/7/1 16:10-2023/7/1 19:48</td>
        <td>长春龙嘉国际机场-杭州国际机场</td>
        <td>无票</td>
        <td></td>
        <td><button>购买</button></td>
      </tr>
      <tr>
        <th scope="row">6</th>
        <td>川852502</td>
        <td>2023/6/30 8:40-2023/6/32 9:52</td>
        <td>深圳国际机场-成都双流机场</td>
        <td>经济舱*14</td>
        <td></td>
        <td><button style="background-color: aquamarine;">购买</button></td>
      </tr>
      <tr>
        <th scope="row">7</th>
        <td>京895342</td>
        <td>2023/6/29 8:01-2023/6/30 19:6</td>
        <td>北京国际机场-成都双流国际机场</td>
        <td>经济舱*16</td>
        <td></td>
        <td><button style="background-color: aquamarine;">购买</button></td>
      </tr>
    </tbody>
  </table>
  </div>

<br><br>
<center>
<table >
<tr >
  <td class="table-active"width="500px"height="60px" colspan="2" align="center"><p style="color: #5c5c5c;">周末省心游</p></td>
</tr>
<tr>
  <td class="table-primary"width="500px"height="40px">航班</td>
  <td class="table-primary"width="500px"height="40px">费用</td>
</tr>
<tr>
  <td class="table-secondary"width="500px"height="40px"><img src="image/air-1.jpg" width="150px">长春->南宁</td>
  <td class="table-secondary"width="500px"height="40px">¥540起</td>
</tr>
  <tr>
  <td class="table-success"width="500px"height="40px"><img src="image/air-2.jpg" width="150px">长春->深圳</td>
  <td class="table-success"width="500px"height="40px">¥580起</td>
</tr>
<tr>
  <td class="table-danger"width="500px"height="40px"><img src="image/air-3.jpg" width="150px">长春->上海</td>
  <td class="table-danger"width="500px"height="40px">¥640起</td>
</tr>
<tr>
  <td class="table-warning"width="500px"height="40px"><img src="image/air-4.jpg" width="150px">长春->杭州</td>
  <td class="table-warning"width="500px"height="40px">¥440起</td>
</tr>
<tr>
  <td class="table-info"width="500px"height="40px"><img src="image/air-5.jpg" width="150px">长春->呼和浩特</td>
  <td class="table-info"width="500px"height="40px">¥520起</td>
</tr>
<tr>
  <td class="table-light"width="500px"height="40px"><img src="image/air-6.jpg" width="150px">长春->成都</td>
  <td class="table-light"width="500px"height="40px">¥520起</td>
</tr>
<tr>
  <td class="table-dark"width="500px"height="40px"><img src="image/air-7.jpg" width="150px">长春->北京</td>
  <td class="table-dark"width="500px"height="40px">¥550起</td>
</tr>
</table>
</center>


  <br><br>
  <div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

4. Design and implementation of hotel information and hotel reservation pages

It has a navigation bar on the homepage and combines it with a pseudo-class selector to realize image scaling on the hotel display page. A form was also written to obtain the user's information submission for hotel reservations, and the data was directly transmitted to the selected hotel. Then combine it with carousel pictures to display the hotel.

Part of the code display:

<div>
  <form action="jd-cg.html">
    <table class="table table-hover">
      <thead>
        <tr>
          <th colspan="2">入住申请表单</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">酒店名称(全称)*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">申请酒店位置(精确至区县)*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">入住者姓名*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">入住者身份证类型*</th>
          <td><select>
            <option value="0">中国大陆居民身份证</option>
            <option value="1">中华人民共和国护照</option>
            <option value="2">香港特别行政区护照</option>
            <option value="3">澳门特别行政区护照</option>
          </select></td>
        </tr>
        <tr>
          <th scope="row">入住者身份证号码*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">联系方式*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">入住时间*</th>
          <td><input type="date">&nbsp;&nbsp;&nbsp;<input type="time"></td>
        </tr>
        <tr>
          <th scope="row">入住时长*(居住市场大于8天请与客服联系)</th>
          <td>
            <select>
              <option value="0">1</option>
              <option value="1">2</option>
              <option value="2">3</option>
              <option value="3">4</option>
              <option value="0">5</option>
              <option value="1">6</option>
              <option value="2">7</option>
              <option value="3">8</option>
            </select>天
          </td>
        </tr>
        <tr>
          <th scope="row">邮箱(非必填项)</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <center>
          <td colspan="2"><input type="submit" value="提交" style="border: solid rgb(94, 94, 94); border-radius: 3px;width: 100px;height: 40px;"></td>
        </center>
        </tr>
      </tbody>
    </table>
  </form>
</div>


<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image/jdl-1.jpg" class="d-block w-100" alt="..." width="100%" height="500px">
      <div class="carousel-caption d-none d-md-block">
        <h5>成都人民公园朵唯酒店</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="image/jdl-2.jpg" class="d-block w-100" alt="..."  width="100%" height="500px">
      <div class="carousel-caption d-none d-md-block">
        <h5>长春伴这有山附属酒店</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="image/jdl-3.jpg" class="d-block w-100" alt="..."  width="100%" height="500px">
      <div class="carousel-caption d-none d-md-block">
        <h5>成都大学附属酒店</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>

5. Design and implementation of login and registration pages

The navigation bar with the homepage uses css to adjust the style, and combines the technology in JavaScript to verify the registration information.

Part of the code display:

<script>
      function validateForm() {
  // 获取表单元素的值
  var username = document.getElementById(username).value;
  var password = document.getElementById(username).value;

  // 校验用户名：长度为 3 至 20 个字符
  if (username.length < 3 || username.length > 20) {
    alert("用户名必须在3到20个字符之间");
    return false;
  }

  // 校验密码：长度至少为 8 个字符
  if (password.length < 8) {
    alert("密码长度必须至少为8个字符");
    return false;
  }


  // 所有校验均通过，可以提交表单
  return true;
}
    </script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light"><span class="border border-info">
      <a class="navbar-brand" href="index.html">12307在线购票</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button></span>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto"><span class="border border-info">
          <li class="nav-item active">
            <a class="nav-link" href="train.html">火车票<span class="sr-only">(current)</span></a>
          </li></span><span class="border border-info">
          <li class="nav-item">
            <a class="nav-link" href="aeroplane.html">机票</a>
          </li></span><span class="border border-info">
          <li class="nav-item">
            <a class="nav-link" href="groggery.html">酒店服务</a>
          </li></span><span class="border border-info">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
              账号设置
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="login.html">登录</a>
              <a class="dropdown-item" href="zuce.html">注册</a>
          </li></span>
          
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search for require" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
      </div>
    </nav>

<div class="y--2">
    <!-- <div class="anniu"> -->
      <br><br><br><br>
      <center>
      <div class="bai">
      <div class="qq1">
      <div class="qq2">&nbsp;&nbsp;&nbsp;中铁12307</div>
      </div>
      <form action="login-cg.html" method="post" onsubmit="return validateForm()">
    <h1>登录</h1><br>
    请输入账号：<br>
    <input type="text" id="username" size="37px" maxlength="12"><br>
    请输入密码：<br>
    <input type="password" id="password" size="37px" maxlength="20"><br>
    <input type="checkbox" name="a1">记住密码？
    <br>
   <!-- <input type="submit" value="注册" id="f1">&nbsp;&nbsp;&nbsp; -->
      <input type="submit" value="登录" id="f2">
      </form>
      </div>	
      </center>
  <!-- </div> -->

6. Other pages of the website

4. Thoughts and feelings

Due to the rush of production time, the online ticket purchase website can basically meet the user's requirements, and adds login and registration pages on top of the requirements of the guide. At the same time, the registration form can be verified through JavaScript.

Guess you like

Origin blog.csdn.net/qq_74140417/article/details/134262565
Recommended
Ranking
Solve the problem that the Chinese display of the drawing using python matplotlib under the Linux system is displayed as a box
[Conference Call for Papers] The 5th International Conference on Civil Engineering, Environmental Resources and Energy Materials (CCESEM 2023)
4-yl Fast Fourier Transform
DataGirdView interlaced display color
[Docker implements test deployment CI/CD----Dingding alarm after the build is successful (7)]
[Asp.net core series] 6 the complete structure of a project in actual combat
The new version of OpenCenterV3 management background
Why can box plots detect outliers and what is the principle?
[Switch] jumbo frame Introduction
C++对象移动（3）——移动构造函数
Daily
More
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)

Code World

© 2018 codetd.com