Design Dashboard Page

In this tutorial, we are going to learn how to design dashboard.


Step 1 : Open your dashboard and create table design for user details.


<table class="table table-striped" style="margin-top: 20px;">
      <td>Kailash Singh</td>
      <td>[email protected]</td>
        <button class="btn btn-success">Active</button>
        <button class="btn btn-warning">Edit</button>
        <button class="btn btn-danger">Delete</button>



Step 2 : Create add user button above the user table.

<button class="btn btn-primary">Add User Data</button>


Step 3 : Now we wll write the code of modal popup on the add user button. With the help  of which we will create a form in a popup so that we can submit user details.

a ) Code add in button 

<button class="btn btn-primary" style="float: right;" data-toggle="modal" data-target="#myModal">Add User Data</button>


b) Create model popup design.

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" style="float: left;">Add User Data</h4>
        <div class="modal-body">
          <div class="form-group">
            <label>Name : </label>
            <input type="text" name="name" placeholder="Enter Name" class="form-control">
             <label>Email : </label>
            <input type="text" name="email" placeholder="Enter Email" class="form-control">
             <label>Password : </label>
            <input type="text" name="password" placeholder="Enter Password" class="form-control">
            <label>Status : </label>
            <select class="form-control">
              <option value="">---Select Status---</option>
              <option value="1">Active</option>
              <option value="0">Inactive</option>
            <button type="submit" class="btn btn-primary">Add User</button>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>



Note : You have to keep in mind that in the button we created the data target, we have passed the ID. That Id must match the ID of the modal popup.

Result :

Source Code:

Codeigniter tutorial for beginners

In this project. We are providing you, how to create small project in Codeign....

Source Code