Ticket Management System Passenger Portal | Part 04| Notification and Online Payment

Client Portal Notification & Online Payment

Overview

This Code uses to design the page of the Notification as well as the Online Payment 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 notification page and online payment page. You Can add a manual payment system.

---

Related Topic

Profile & Booking Dashboard

Html Code:

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

<div class = "row my-3" >

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

<div class = "card" >

<div class = "card-body" >

<div class = "alert alert-success alert-dismissible" >

<button type = "button" class = "close" data dismiss = "alert">&times;</button>

<strong> Message! </strong>

</div>

</div>

</div>

</div>

</div>

</div>

Output:

Notification view

Notification Collapse view

 Online Payment:

<div id = "online_payment_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" >

<div class = "row" >

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

<div class = "card" >

<div class = "card-body" >

<div class = "row" >

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

<div class = "form-group" >

<label for = "ticket_id_pay"> Enter Ticket ID </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" > validation </div>

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

<div class = "form-group" >

<label for = "account_no" > Enter A/C # </label>

<input type = "text" name = "" id = "account_no" class = "form-control"

placeholder = "" aria-describedby = "helpId" >

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

</div>

</div>

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

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

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

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

Output:

Online Payment Collapse view

Online Payment view