Catatan Laravel Multipurpose 6

Menambahkan manage users

Catatan sebelumnya

Part 5

Langkah menambahkan manage user

1. Buat users component dengan nama Users.vue
2. Tambahkan route /users pada vue router
3. Tambahkan route-link ke /users pada sidebar
4. Masukan tabel pada component Users
5. Masukan modal pada component Users

Snippet tabel

<div class="row mt-4">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Users Table</h3>
        <div class="card-tools">
          <button class="btn btn-success"
            data-toggle="modal" data-target="#addNewModal">
            Add New
            <i class="fa fa-user-plus"></i>
          </button>
        </div>
      </div>
      <!-- /.card-header -->
      <div class="card-body table-responsive p-0">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Email</th>
              <th>Type</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>183</td>
              <td>John Doe</td>
              <td>11-7-2014</td>
              <td>Approved</td>
              <td>
                <a href="#">
                  <i class="fa fa-edit text-blue"></i>
                </a>
                /
                <a href="#">
                  <i class="fa fa-trash text-red"></i>
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- /.card-body -->
    </div>
    <!-- /.card -->
  </div>
</div>

Snippet modal

<!-- Modal -->
<div class="modal fade"
  id="addNewModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="addNewModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered"
    role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addNewModalLabel">
          Add New
        </h5>
        <button type="button" class="close"
          data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button"
          class="btn btn-danger"
          data-dismiss="modal">Close</button>
        <button type="button"
          class="btn btn-primary">Create</button>
      </div>
    </div>
  </div>
</div>

Catatan selanjutnya

part 7