Ticket Management System Passenger Portal | Part 05 | Cancel Ticket and Route

 

Client Portal Cancel Ticket & Route 

Overview

This Code uses to design the page of the cancel tickets as well as the route page. Create two HTML files and paste code. Remember that you need to paste the code of the master page. Then paste the code of the cancel ticket page and route page.

---

Related Topic

Profile & Booking Notification & Online Payment

<div id = "cancel_ticket_section" class = "col-md-12 display-none" >

<div class = "row" >

<div class = "col-md-12 p-0" >

<div class = "card" >

<div class = "card-header bg-grey-500" >

<strong> New Ticket List </strong>

</div>

<div class = "card-body p-0 my-3" >

<div class = "col-md-12 p-0" >

<table class = "table border w-100" >

<thead class = "thead-inverse border" >

<tr>

<td class = "border w-25" > Ticket ID </td>

<td class = "border w-25" > </td>

<td class = "border w-25" > Name </td>

<td class = "border w-25" > </td>

</tr>

</thead>

<tbody>

<tr>

<td class = "border w-25" scope = "row" > Date </td>

<td class = "border w-25"> </td>

<td class = "border w-25"> Time </td>

<td class = "border w-25"> </td>

</tr>

<tr>

<td class = "border w-25" scope = "row"> Veh # </td>

<td class = "border w-25"> </td>

<td class = "border w-25"> Seat # </td>

<td class = "border w-25"> </td>

</tr>

<tr>

<td class = "border w-25" scope = "row"> From </td>

<td class = "border w-25"> </td>

<td class = "border w-25"> To </td>

<td class = "border w-25"> </td>

</tr>

</tbody>

</table>

</div>

</div>

</div>

</div>

<div class = "col-md-12 p-0 my-3" >

<div class = "card" >

<div class = "card-header" >

<strong class = "card-title"> Cancel Ticket </strong>

</div>

<div class = "card-body" >

<div class = "row p-0" >

<div class = "col-md-6" >

<div class = "form-group" >

<label for = "ticket_id"> Enter Ticket ID </label>

<input id = "ticket_id" clasS = "form-control" type = "text" name = "" >

</div>

</div>

<div class = "col-md-6" > Validation </div>

<div class = "col-md-6" >

<button class = "btn btn-success float-right w-25" > Submit </button>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

 Output:

Cancel Ticket Collapse View

Cancel Ticket View

Route:

<div id = "route_section" class = "col-md-12 display-none" >

<div class = "row" >

<div class = "col-md-12 p-0 my-3" >

<div class = "card" >

<div class = "card-header bg-grey-500" >

<strong> Route List </strong>

</div>

</div>

</div>

<div class = "col-md-12 my-3 p-0" >

<table class = "table table-hover border border-dark w-100" >

<thead class = "thead-inverse bg-blue-grey-300 border-dark" >

<tr>

<th class = "border border-dark width-15per" > # </th>

<th class = "border border-dark width-15per" > Veh # </th>

<th class = "border border-dark w-25" > From </th>

<th class = "border border-dark w-25" > To </th>

<th class = "border border-dark w-25" > Time </th>

</tr>

</thead>

<tbody>

<tr>

<td class = "border border-dark width-15per" scope = "row" > </td>

<td class = "border border-dark width-15per" > </td>

<td class = "border border-dark w-25" > </td>

<td class = "border border-dark w-25" > </td>

<td class = "border border-dark w-25" > </td>

</tr>

</tbody>

</table>

</div>

</div>

</div>

  Output:

Route Collapse View

Route View