Ticket Management System Passenger Portal | Part 03 | Profile and Booking

Client Portal Profile & Booking 

Overview

The profile page will be able to show client or passenger basic information. While the Booking page can be used to book a seat. You can add a new feature within. First of all, you need to copy the code of the master page and paste it into separate files. then paste this code in the mention area.

---

Related Topic

Dashboard

Html Code:

<div id = "profile_section" class = "col-md-12 display-none p-0" >

<table class = "table border" >

<tr>

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

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

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

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

</tr>

<tr>

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

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

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

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

</tr>

<tr>

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

<td class = "w-75 border" colspan = "4" > </td>

</tr>

<tr>

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

<td class = "w-75 border" colspan = "4" > </td>

</tr>

</table>

</div>

Output: 

Profile View

Profile Collapse View

Booking

<div id = "booking_section" class = "col-md-12 display-none p-0" >

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

<div class = "card" >

<div class = "card-body" >

<div class = "row" >

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

<div class = "form-group" >

<label for = "ticket_id_pay" > Select Date </label>

<input type = "text" name = "" id = "ticket_id_pay" class = "form-control" placeholder = "" aria-describedby = "helpId" >

<small id = "helpId" class = "text-muted" > Validation < /small>

</div>

</div>

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

</div>

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

<div class = "form-group" >

<label for = "ticket_id_pay" > Select Time </label>

<input type = "text" name = "" id = "ticket_id_pay" class = "form-control" placeholder = "" aria-describedby = "helpId" >

<small id = "helpId" class = "text-muted"> Validation </small>

</div>

</div>

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

 

</div>

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

<div class = "form-group" >

<label for = "ticket_id_pay" > From </label>

<input type = "text" name = "" id = "ticket_id_pay" class = "form-control" placeholder = "" aria-describedby = "helpId" >

<small id = "helpId" class = "text-muted"> Validation </small>

</div>

</div>

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

 

</div >

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

<div class = "form-group" >

<label for = "ticket_id_pay" > To </label>

<input type = "text" name = "" id = "ticket_id_pay" class = "form-control" placeholder = "" aria-describedby = "helpId" >

<small id = "helpId" class = "text-muted"> Validation </small>

</div>

</div>

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

 

</div>

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

<div class = "form-group" >

<label for = "ticket_id_pay"> Payment </label>

<input type = "text" name = "" id = "ticket_id_pay" class = "form-control" placeholder = "" aria-describedby = "helpId" >

<small id = "helpId" class = "text-muted" > Validation </small>

</div>

</div>

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

 

</div>

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

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

</div>

</div>

</div>

</div>

</div>

</div>

Output: 

Booking Collapse View

Booking View