What's new

How to make collumn 1 and 2 in PHP

J

J P

Journeyman
Joined
Jun 1, 2023
Posts
34
Reaction
0
Points
24
I just need my Vehicle list will appear in the right side. Do you have any idea? Thakyou

PHP: 
<?php
    if(!isset($_SESSION))
    {
        session_start();
    }
    $connection= mysqli_connect('localhost','root','','vehicle management');


    $username= $_SESSION['username'];
    //echo $username;
    
    $query= "SELECT  `first_name`, `last_name`, `email`, `unumber` FROM `user` WHERE username='$username'";
    $result= mysqli_query($connection,$query);
    
    $row= mysqli_fetch_assoc($result);
    //$name= $row['first_name']." ". $row['last_name'];
   // echo $name;
?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Booking</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <link rel="stylesheet" href="css/wickedpicker.min.css">
    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
     <link rel="stylesheet" href="sweetalert2/sweetalert2.css">
    <script src="sweetalert2/sweetalert2.min.js"></script>
    
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="js/wickedpicker.min.js"></script>
    <!-- <link rel="stylesheet" href="animate.css"> -->
    <link rel="stylesheet" href="style.css">
</head>

<style>
    .navbar-fixed-top.scrolled {
   background-color: ghostwhite;
  transition: background-color 200ms linear;
}   
</style>

<body>
    <?php include 'navbar.php'; ?>
    <br>
    <div class="container">
        <div class="row">
            <div class="page-header">
            <br>
                <h1 style="text-align:left;">Booking</h1>
                 <?php //echo $msg; ?>
            </div>
            <div class="col-md-0 "></div>
            <div class="col-md-6">
                <form class="animated bounce" action="bookingaction.php" method="post">
                  
                    <div class="input-group">
                      <span class="input-group-addon"><b>Name</b></span>
                      <input id="name" type="text" class="form-control" name="name" value="<?php echo $row['first_name']." ". $row['last_name']; ?>"  required>
                    </div>
                    <br>
                    <div class="input-group">
                      <span class="input-group-addon"><b>Department</b></span>
                      <input id="department" type="text" class="form-control" name="department" placeholder="Department" required>
                    </div>
                    <br>
                    <div class="input-group">
                      <span class="input-group-addon"><b>Vehicle Type</b></span> &nbsp;
                      <label><input type="radio" name="type" value="car">Car</label> &nbsp;
                      <label><input type="radio" name="type" value="van">Van</label>
                    </div>
                    <br>
                    <div class="input-group">
                      <span class="input-group-addon"><b>Date of Requirement</b></span>
                      <input id="req_date" type="text" class="form-control" name="req_date" placeholder="Day the car is needed" required>
                      <input type="text" name="req_time" id="req_time" class="form-control"/>
                      
                    </div>
                    
                    <script>
                      $( function() {
                        $( "#req_date" ).datepicker();
                        $("#req_time").wickedpicker();
                        
                      } );
                        
                        
                        
                    </script>
                    <br>
                    
                    <div class="input-group">
                      <span class="input-group-addon"><b>Date of Return</b></span>
                      <input id="return_date" type="text" class="form-control" name="return_date" placeholder="Day the car is returned" required>
                      <input type="text" name="return_time" id="return_time" class="form-control"/>
                    </div>
                    
                    <script>
                      $( function() {
                        $( "#return_date" ).datepicker();
                        $( "#return_time" ).wickedpicker();
                      } );
                    </script>
                    <br>
                    
                    <div class="input-group">
                      <span class="input-group-addon"><b>Destination</b></span>
                      <input id="destination" type="text" class="form-control" name="destination" placeholder="Car destination" required>
                    </div>
                    <br>
                    
                    <div class="input-group">
                      <span class="input-group-addon"><b>Pickup Point</b></span>
                      <input id="pickup" type="text" class="form-control" name="pickup" placeholder="Pickup location">
                    </div>
                    <br>
                    
                    <div class="input-group">
                      <span class="input-group-addon"><b>Reason for booking</b></span>
                      <input id="reason" type="text" class="form-control" name="reason" placeholder="Reason of booking the vehicle">
                    </div>
                    <br>
                    
                    <div class="input-group">
                      <span class="input-group-addon"><b>Email</b></span>
                      <input id="email" type="email" class="form-control" name="email" value="<?php echo $row['email']; ?>" required>
                    </div>
                    <br>
                    
                    <div class="input-group">
                      <span class="input-group-addon"><b>Mobile</b></span>
                      <input id="mobile" type="text" class="form-control" name="mobile" value="<?php echo $row['unumber']; ?>" required>
                    </div>
                    <br>
                    
                    <input type="hidden" name="username" value="<?php echo $username; ?>">
                    
                    <div class="input-group">
                        <input type="submit" name="submit" class="btn btn-success">
                    </div>
                    
                </form>
                <?php
    $connection= mysqli_connect("localhost","root","","vehicle management");

    $sql= "SELECT * FROM `vehicle`";
    $res=mysqli_query($connection,$sql);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>List of Drivers</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <!-- <link rel="stylesheet" href="animate.css"> -->
    <link rel="stylesheet" href="style.css">
    
</head>

<body  >
 
   <div id="myDiv">
 
   <?php include 'navbar.php'; ?>
   <br><br><br>
   <div class="container">
      <?php
        if(mysqli_num_rows($res)>0){ ?>
    
      <div class="container">
         <div class="row">
             <div class="col-md-6"></div>
             <div class="col-md-6 foo">
                 <div class="page-header">
                    <h1 class="animated bounceIn" style="text-align: center;">Vehicle List</h1>     
                  </div>
                  <table class="table">
                    <thead>
                        <th>Vehicle Picture</th>
                        <th>Vehicle Registration No</th>
                    </thead> 

                    <?php while($row=mysqli_fetch_assoc($res)) {  ?>
                    <tbody>
                        <tr>
                            <td><img height="75px" width="100px" src="vehicle picture/<?php echo $row["veh_photo"]; ?>" alt="dp"></td>

                            <td><a href="busprofile.php?busid=<?php echo $row["veh_id"]; ?>"> <?php echo $row["veh_reg"] ?></a></td>
                        </tr>
                    </tbody>
                <?php } }?>
                </table>
             </div>
             <div class="col-md-3"></div>
         </div>
          
      </div> 
      
   </div>
    </div>
    
 <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
 
 
  <script>
        window.sr = ScrollReveal();
        sr.reveal('.foo', { duration: 800 });
        sr.reveal('.foo1', { duration: 800,origin: 'top'});
    </script>
      

  
    
</body>

            </div>
            <div class="col-md-3"></div>
        </div>
    </div>
    
<script>
    $(function () {
  $(document).scroll(function () {
    var $nav = $(".navbar-fixed-top");
    $a= $(".navbar-fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $a.height());
  });
});
    
</script> 
</body>
</html>
Capture.JPG
 

Attachments

To make your Vehicle list appear on the right side, you need to adjust the Bootstrap grid classes in your HTML code. Currently, your Vehicle list is displayed in a column with a class of col-md-6, which makes it take up half of the width of the row. To move it to the right side, you can change the column class to col-md-6 col-md-offset-3. This will make the Vehicle list take up 50% of the row width and offset it by 25% to the right.

Here's the updated portion of your code with the column class modified:

HTML: 
<div class="col-md-6 col-md-offset-3 foo">
    <div class="page-header">
        <h1 class="animated bounceIn" style="text-align: center;">Vehicle List</h1>
    </div>
    <table class="table">
        <thead>
            <th>Vehicle Picture</th>
            <th>Vehicle Registration No</th>
        </thead>
        <?php while($row = mysqli_fetch_assoc($res)) { ?>
            <tbody>
                <tr>
                    <td><img height="75px" width="100px" src="vehicle picture/<?php echo $row["veh_photo"]; ?>" alt="dp"></td>
                    <td><a href="busprofile.php?busid=<?php echo $row["veh_id"]; ?>"><?php echo $row["veh_reg"] ?></a></td>
                </tr>
            </tbody>
        <?php } ?>
    </table>
</div>

By using col-md-6 col-md-offset-3, the Vehicle list should now be on the right side of the row. You can further adjust the column classes based on your layout requirements and responsiveness needs.
 
sa frontend na yan ts, gamit kang bootstrap tapos gawin mo yang sinend ng bot
ganto sana structure

HTML: 
<div class="row">
    <div class="col-6">
        left side contents lagay mo dito
    </div>
    <div class="col-6">
        dito mo lagay yung sa right side
    </div>
</div>
 

Similar threads

Popular Tags

android api app arduino bot c c++ capstone capstone project code coding coding and programming css database developer development error help how how to html in java javascript language laravel mag mysql need patulong php program programmer programming programming language project python question react sql system thesis tutorial udemy vb.net visual basic web web development website with

About this Thread

  • 2
    Replies
  • 77
    Views
  • 3
    Participants
Last reply from:
0x0adr

New Topics

Popular On This Forum

Online statistics

Members online
540
Guests online
5,642
Total visitors
6,182
Back
Top