CƠ HỘI ĐẦU TƯ TRONG LỊCH SỬ KHÔNG THỂ BỎ QUA?

HƯỚNG DẪN TOÀN TẬP ĐẦU TƯ VỚI THỊ TRƯỜNG BITCOIN 2020

>> Xem tại đây <<

Trang chủ / PHP cơ bản / Hướng dẫn tạo trang quản lý thành viên PHP – thiết kế giao diện (phần 1)

Hướng dẫn tạo trang quản lý thành viên PHP – thiết kế giao diện (phần 1)

Ở các bài trước, hướng dẫn tạo trang đăng ký, trang đăng nhập, mình đã hướng dẫn các bạn chi tiết các bước cho ra đời trang đăng ký  và trang đăng nhập trong PHP là như thế nào. Trong bài viết hôm nay mình sẽ tiếp tục hướng dẫn các bạn tạo trang quản lý thành viên với dữ liệu có trong database, bao gồm các chức năng thêm, xóa, sửa thành viên khi họ đã đăng ký ở bài trước.

1. Tạo cơ sở dữ liệu

Ở đây mình tiếp tục sử dụng lại bảng users đã tạo ở trong trang đăng ký

CREATE DATABASE IF NOT EXISTS `kungfuphp` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `kungfuphp`;

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(30) NOT NULL,
  `password` varchar(30) NOT NULL,
  `name` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Bảng users trên còn thiếu 1 thành phần quan trọng đó là phân quyền. Do đó để thuận tiện trong việc phân quyền cho thành viên, mình sẽ thêm 1 cột level ( kiểu tynyint ).

Để thêm cột level, các bạn vào phpmyadmin, ấn vào mục SQL và chạy đoạn code sau :

ALTER TABLE  `users` ADD  `level` TINYINT NOT NULL AFTER  `email` ;

mysql alter

Đoạn code trên mang ý nghĩa là “chỉnh sửa bảng users, thêm cột level với kiểu dữ liệu là tinyint“.

2. Hướng dẫn sử dụng bootstrap

Trong các bài viết trước, nếu để ý các bạn sẽ thấy mình có tạo 1 thư mục đặt tên là bootstrap.

thư mục chính php

Thư mục này mình sẽ dùng để chứa twitter bootstrap lấy từ trang http://getbootstrap.com/ . Nếu bạn vẫn chưa hiểu rõ bootstrap là gì các bạn có thể lên google để tự tìm hiểu rõ hơn. Ở đây mình sẽ tóm tắt sơ cho các bạn nắm tổng quát. Như các bạn đã biết, thay vì 1 trang web bạn sẽ phải code css để có thể design lên 1 giao diện website hoàn chỉnh, thì twitter boostrap chính là 1 front-end framework đã xây dựng sẵn “mẫu” css cho bạn. Tùy vào mục đích sử dụng, bạn sẽ sử dụng bootstrap để tạo nên trang web riêng cho mình. 1 trong những đặc điểm nổi bật của bootstrap chính là tính năng responsive (co dãn). Với tính năng này website của bạn sẽ có thể co dãn với các kích thước màng hình khác nhau, từ di động đến tablet, laptop,… mà không cần phải xây dựng nhiều phiên bản website dành riêng cho mỗi kích cỡ màng hình. Giúp tiết kiệm thời gian và chi phí. Bạn có thể tham khảo thêm chi tiết hơn ở đây : http://getbootstrap.com/

Giải thích cũng đã xong, giờ vào vấn đề chính nào. Vào địa chỉ http://getbootstrap.com/getting-started/#download các bạn ấn vào nút Download bootstrap để tải gói bootstrap về, giải nén ra và copy toàn bộ thư mục css, font, js vào thư mục bootstrap mà chúng ta đã tạo sẵn.

bootstrap

3. Tạo trang quản lý thành viên

a. Thiết kế giao diện

Trong thư mục my_website, tại thư mục con tên là admin, các bạn tạo file quan-ly-thanh-vien.php dành cho mục đích quản lý thêm, xóa, cập nhật thành viên.

quản lý thành viên

Trong file quan-ly-thanh-vien.php các bạn gõ code như sau để thiết kế lên giao diện quản lý thành viên :

<html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Quản lý thành viên</title>

    <!-- Bootstrap core CSS -->
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">

  </head>

  <body>
    <div class="container">
      <div class="row">
        <h3> Quản lý thành viên</h3>
        <table class="table">
          <caption>Danh sách thành viên đã đăng ký</caption>
          <thead>
            <tr>
              <th>STT</th>
              <th>Tên đăng nhập</th>
              <th>Họ tên</th>
              <th>Địa chỉ email</th>
              <th>Cấp độ</th>
              <th>Hành động</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>teo123</td>
              <td>Huynh Van Teo</td>
              <td>huynhvanteo@gmail.com</td>
              <td>Thành viên</td>
              <td><a href="chinh-sua-thanh-vien.php?id=1">Sửa</a> <a href="xoa-thanh-vien.php?id=1">Xóa</a></td>
            </tr>
            <tr>
              <th scope="row">1</th>
              <td>tuan123</td>
              <td>Huynh Van Tuan</td>
              <td>huynhvantuan@gmail.com</td>
              <td>Quản trị viên</td>
              <td><a href="chinh-sua-thanh-vien.php?id=2">Sửa</a> <a href="xoa-thanh-vien.php?id=2">Xóa</a></td>
            </tr>
            <tr>
              <th scope="row">1</th>
              <td>ti123</td>
              <td>Huynh Van Ti</td>
              <td>huynhvanti@gmail.com</td>
              <td>Thành viên</td>
              <td><a href="chinh-sua-thanh-vien.php?id=3">Sửa</a> <a href="xoa-thanh-vien.php?id=3">Xóa</a></td>
            </tr>
          </tbody>
        </table>
      </div>

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  

</body></html>

Các bạn lưu ý các dòng bên dưới, chúng ta gọi tới các file bootstrap.min.css, bootstrap.min.js để sử dụng twiter boostrap, và jquery.min.js để sử dụng thư viện jquery.

<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script> <script src="../bootstrap/js/bootstrap.min.js"></script>

Vào trình duyệt, gõ địa chỉ http://localhost/my_website/admin/quan-ly-thanh-vien.php , bạn sẽ thấy giao diện như sau :

danh sách thành viên

Bài viết cũng khá dài, mình tạm dừng ở đây, và sẽ tiếp tục trong phần 2. Đến đây các bạn có thắc mắc hay câu hỏi gì thì để lại comment bên dưới, nếu bài viết hay thì hãy share cho các bạn khác cũng học nhé. Thân

 

Có ích

câu lệnh điều kiện

Các bước đưa website chạy trên host thật

Trong trường hợp chúng ta đã có source code của 1 website ứng ý, chạy …


Bình luận trực tiếp ↓

9 bình luận

  1. Avatar

    anh cho em hỏi chút, ở chỗ thẻ caption, em làm theo như trong code mẫu nhưng chỗ “danh sách thành viên” nó cứ ở cuối bảng ạ

  2. Avatar

    van khong duoc ban oi

  3. Avatar

    Ủa bạn ơi cho mình hỏi trước đó bạn đã tạo trang quan_ly_thanh_vien.php roi sao giờ bạn lại tạo khác đi và bỏ mất phần code PHP trước luôn hả

  4. Avatar

    Giải thích giúp mình 4 dòng đầu tiên trong file quản lý thành viên dùng để làm gì vậy???

  5. Avatar

    Bạn ơi, cho mình hỏi?
    Mình thêm dòng ALTER TABLE `users` ADD `level` TINYINT NOT NULL AFTER `email` ; vào rồi nhưng ở cột level đó nó lại mặc định là 0 chứ không phải là 1 hoặc 2 là sao nhỉ? Làm sao để sửa cột đó có giá trị từ 1?
    Thanks you 🙂

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *