Front-end 12307 ticketing website developed based on Bootstrap

1. 12307Problem description of 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 for correct responsive layout behavior. When these requirements are put together, your page should look like this:

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

    <!-- Bootstrap CSS file -->
    <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 files are optional. Just choose one of the two suggestions below! -->

    <!-- Option 1: jQuery and Bootstrap integration package (Popper integrated) -->
    <script src="//i2.wp.com/cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C + OGpamoFVy38MVBnE + IbbVYUew + OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="//i2.wp.com/cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA + E0F3zPr + JQQtQ82gQ1HPY3QIVtztV u" crossorigin="anonymous"></script>

    <!-- Option 2: Popper and Bootstrap JS plug-ins are independent -->
    <!--
    <script src="//i2.wp.com/cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C + OGpamoFVy38MVBnE + IbbVYUew + OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="//i2.wp.com/cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU + 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="//i2.wp.com/cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL + GlRQEKIpYR04" crossorigin= "anonymous"></script>
    -->
  </body>
</html>

3.12307Online ticketing website design and implementation< /strong>

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 Online ticket purchase</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">Train tickets <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">Air tickets</a> </li></span><span class="border border-info"> <li class="nav-item"> <a class="nav-link" href="groggery.html">Hotel Services</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"> Account Settings </a> <div class="dropdown-menu"> <a class="dropdown-item" href="login.html">Login</a> <a class="dropdown-item" href="zuce.html">Register</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">Search</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 train ticket purchase webpage

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">order</th> <th scope="col">Train number</th> <th scope="col">Departure time-arrival time</th> <th scope="col">Departure station-Terminal station</th> <th scope="col">Are there seats</th> <th scope="col">Remarks</th> <th scope="col">Purchase tickets</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>Changchun West Railway Station-Chengdu East Railway Station</td> <td>Hard seat*6</td> <td></td> <td><button style="background-color: aquamarine;">Buy</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"> & amp;times;</span> </button> </div>

3. Design and implementation of flight ticket purchase webpage

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 Online ticket purchase</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">Train tickets<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">Air tickets</a> </li></span><span class="border border-info"> <li class="nav-item"> <a class="nav-link" href="groggery.html">Hotel Services</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"> Account Settings </a> <div class="dropdown-menu"> <a class="dropdown-item" href="login.html">Login</a> <a class="dropdown-item" href="zuce.html">Register</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">Search</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">One way<br><input type="radio" name="piao">Round trip </div> <div style="height: 100px;width: 1100px; position:absolute;left: 210px;top: 120px; font-size: 16px;color: #737373;"> <br>Departure place& amp;nbsp; & amp;nbsp;<input type="text" style="border: none;" value="Changchun"> & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp ;nbsp; Destination & amp;nbsp; & amp;nbsp;<input type="text" style="border: none;"> & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; Departure date & amp;nbsp;<input type="date" style="border: none;"> & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; <input type="radio" name="x1">Student<input type="radio" name="x1">Adult & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; Departure time<input type="time"> & amp;nbsp; & amp;nbsp; <input type="button" onclick="f()" value="Check Ticketing" 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">order</th> <th scope="col">Flights</th> <th scope="col">Departure time-arrival time</th> <th scope="col">Departure station-Terminal station</th> <th scope="col">Are there seats</th> <th scope="col">Remarks</th> <th scope="col">Purchase tickets</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Chuan 551406</td> <td>2023/6/30 8:20-2023/6/32 9:20</td> <td>Changchun Longjia International Airport-Chengdu Shuangliu International Airport</td> <td>Business Class*6</td> <td></td> <td><button style="background-color: aquamarine;">Buy</button></td> </tr> <tr> <th scope="row">2</th> <td>Chuan504502</td> <td>2023/6/30 8:20-2023/6/32 9:14</td> <td>Guangzhou Baiyun Airport-Chengdu Shuangliu International Airport</td> <td>Alternate</td> <td></td> <td><button style="background-color: rgb(127, 246, 255);">Alternate</button></td> </tr> <tr> <th scope="row">3</th> <td>Chuan969117</td> <td>2023/6/30 7:40-2023/6/32 9:14</td> <td>Dazhou Heshi Airport-Changchun Longjia International Airport</td> <td>Alternate</td> <td></td> <td><button style="background-color: rgb(127, 246, 255);">Alternate</button></td> </tr> <tr> <th scope="row">4</th> <td>China Southern Airlines 85436</td> <td>2023/6/29 8:20-2023/6/31 6:14</td> <td>Chengdu Longquan Airport-Shanghai International Airport</td> <td>Economy class*3</td> <td></td> <td><button style="background-color: aquamarine;">Buy</button></td> </tr> <tr> <th scope="row">5</th> <td>China Southern Airlines 854402</td> <td>2023/7/1 16:10-2023/7/1 19:48</td> <td>Changchun Longjia International Airport-Hangzhou International Airport</td> <td>No ticket</td> <td></td> <td><button>Buy</button></td> </tr> <tr> <th scope="row">6</th> <td>Chuan852502</td> <td>2023/6/30 8:40-2023/6/32 9:52</td> <td>Shenzhen International Airport-Chengdu Shuangliu Airport</td> <td>Economy class*14</td> <td></td> <td><button style="background-color: aquamarine;">Buy</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>Beijing International Airport-Chengdu Shuangliu International Airport</td> <td>Economy class*16</td> <td></td> <td><button style="background-color: aquamarine;">Buy</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;">A worry-free weekend trip</p></td> </tr> <tr> <td class="table-primary"width="500px"height="40px">Flights</td> <td class="table-primary"width="500px"height="40px">Cost</td> </tr> <tr> <td class="table-secondary"width="500px"height="40px"><img src="image/air-1.jpg" width="150px">Changchun->Nanning</td> <td class="table-secondary"width="500px"height="40px">From ￥540</td> </tr> <tr> <td class="table-success"width="500px"height="40px"><img src="image/air-2.jpg" width="150px">Changchun->Shenzhen</td> <td class="table-success"width="500px"height="40px">From ￥580</td> </tr> <tr> <td class="table-danger"width="500px"height="40px"><img src="image/air-3.jpg" width="150px">Changchun->Shanghai</td> <td class="table-danger"width="500px"height="40px">Starting from ￥640</td> </tr> <tr> <td class="table-warning"width="500px"height="40px"><img src="image/air-4.jpg" width="150px">Changchun->Hangzhou</td> <td class="table-warning"width="500px"height="40px">￥440 and up</td> </tr> <tr> <td class="table-info"width="500px"height="40px"><img src="image/air-5.jpg" width="150px">Changchun->Hohhot</td> <td class="table-info"width="500px"height="40px">From ￥520</td> </tr> <tr> <td class="table-light"width="500px"height="40px"><img src="image/air-6.jpg" width="150px">Changchun->Chengdu</td> <td class="table-light"width="500px"height="40px">From ￥520</td> </tr> <tr> <td class="table-dark"width="500px"height="40px"><img src="image/air-7.jpg" width="150px">Changchun->Beijing</td> <td class="table-dark"width="500px"height="40px">From ￥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"> & amp;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">Check-in application form</th> </tr> </thead> <tbody> <tr> <th scope="row">Hotel name (full name)*</th> <td><input type="text"></td> </tr> <tr> <th scope="row">Apply for hotel location (accurate to district and county)*</th> <td><input type="text"></td> </tr> <tr> <th scope="row">Resident’s name*</th> <td><input type="text"></td> </tr> <tr> <th scope="row">Resident ID card type*</th> <td><select> <option value="0">Mainland China Resident ID Card</option> <option value="1">Passport of the People's Republic of China</option> <option value="2">Hong Kong SAR Passport</option> <option value="3">Macau SAR Passport</option> </select></td> </tr> <tr> <th scope="row">Resident ID number*</th> <td><input type="text"></td> </tr> <tr> <th scope="row">Contact information*</th> <td><input type="text"></td> </tr> <tr> <th scope="row">Check-in time*</th> <td><input type="date"> & amp;nbsp; & amp;nbsp; & amp;nbsp;<input type="time"></td> </tr> <tr> <th scope="row">Length of stay* (please contact customer service for more than 8 days)</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>days </td> </tr> <tr> <th scope="row">Email (optional)</th> <td><input type="text"></td> </tr> <tr> <center> <td colspan="2"><input type="submit" value="Submit" 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>Chengdu People's Park Duowei Hotel</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>Changchun Banzayoushan Hotel</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>Chengdu University Affiliated Hotel</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() { // Get the value of the form element var username = document.getElementById(username).value; var password = document.getElementById(username).value; // Verify username: length is 3 to 20 characters if (username.length < 3 || username.length > 20) { alert("Username must be between 3 and 20 characters"); return false; } // Verification password: at least 8 characters in length if (password.length < 8) { alert("Password length must be at least 8 characters"); return false; } // All verifications passed and the form can be submitted 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 Online ticket purchase</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">Train tickets<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">Air tickets</a> </li></span><span class="border border-info"> <li class="nav-item"> <a class="nav-link" href="groggery.html">Hotel Services</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"> Account Settings </a> <div class="dropdown-menu"> <a class="dropdown-item" href="login.html">Login</a> <a class="dropdown-item" href="zuce.html">Register</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">Search</button> </form> </div> </nav> <div class="y--2">  <br><br><br><br> <center> <div class="bai"> <div class="qq1"> <div class="qq2"> & amp;nbsp; & amp;nbsp; & amp;nbsp;China Railway 12307</div> </div> <form action="login-cg.html" method="post" onsubmit="return validateForm()"> <h1>Login</h1><br> Please input Username:<br> <input type="text" id="username" size="37px" maxlength="12"><br> Please enter password:<br> <input type="password" id="password" size="37px" maxlength="20"><br> <input type="checkbox" name="a1">Remember password? <br>  <input type="submit" value="Login" id="f2"> </form> </div> </center> 

6. Other pages of the website

4. Experiences 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.