Hướng dẫn how to create a dashboard in php? - làm thế nào để tạo một bảng điều khiển trong php?

Mã Bootstrap PHP ngụ ý việc tạo ra một bootstrapper xử lý tất cả các yêu cầu động được thực hiện cho máy chủ và áp dụng hệ thống MVC để trong tương lai bạn có thể thay đổi chức năng cho từng ứng dụng hoặc thành phần duy nhất mà không thay đổi toàn bộ. Bootstrap giúp bạn thiết kế các trang web nhanh hơn và dễ dàng hơn, bao gồm các mẫu thiết kế dựa trên HTML và CSS.

Các mẫu php bootstrap làm cho khách hàng ít phức tạp hơn để xây dựng các ứng dụng web phức tạp và hấp dẫn. PHP yêu cầu một máy chủ cục bộ để chạy mã PHP. Các nhà thiết kế sử dụng bootstrap với PHP có thể tận hưởng tất cả những lợi ích này.

Khoảng 18 triệu trang web đã sử dụng khung Bootstrap vào cuối năm 2018. Một số lượng ngày càng tăng các trang web đã bắt đầu sử dụng khuôn khổ vào năm 2019 và các con số đã tăng lên kể từ đó. Trong thực tế, Bootstrap đã trở thành sự lựa chọn yêu thích hàng đầu của các kỹ sư khi xây dựng các ứng dụng web hấp dẫn.

Bảng điều khiển PHP là một công cụ trực quan đơn hoặc đa tab có thể được tích hợp trong các dự án PHP. Thông thường, đây là các ứng dụng dựa trên trình duyệt được xây dựng như một thành phần có thể tùy chỉnh của các dự án lớn hơn. Bảng điều khiển PHP được thiết kế để chấp nhận dữ liệu thô từ các thành phần khác của các dự án và sau đó trình bày nó ở các định dạng khác nhau. Các bảng điều khiển này thường được xây dựng bằng cách sử dụng JS vì sự tích hợp tuyệt vời (và mượt mà) giữa PHP và JavaScript.

Đó là lý do tại sao trong hướng dẫn này, tôi sẽ sử dụng bootstrap để trình diễn ý tưởng về bảng điều khiển PHP.

Điều kiện tiên quyết

Đối với hướng dẫn này, tôi giả sử rằng bạn có ứng dụng PHP được cài đặt trên máy chủ web. Thiết lập của tôi là:

• Php 7.1
• Mysql
• Bootstrap 4

Để đảm bảo rằng tôi không bị phân tâm bởi các vấn đề cấp độ máy chủ, tôi đã quyết định lưu trữ ứng dụng của mình trên nền tảng lưu trữ php của Cloudways vì tôi nhận được một ngăn xếp lưu trữ được tối ưu hóa cao và không có rắc rối quản lý máy chủ. Bạn có thể thử Cloudways miễn phí bằng cách đăng nhập cho một tài khoản.

Về ứng dụng

Tôi sẽ tạo một ứng dụng đơn giản để quản lý bán hàng. Nó chứa một bảng điều khiển nơi người dùng có thể xem các số liệu thống kê bán hàng và duy trì dữ liệu về sản phẩm và thêm sản phẩm mới. Người dùng cũng có thể đăng ký để đăng nhập vào bảng điều khiển. sales management. It contains a dashboard where the users can see the sales stats and maintain the data about the Products and add new Products. Users could also register for logging into the dashboard.

Bản dựng UI bảng điều khiển quản trị viên

Tôi đã sử dụng mẫu quản trị viên Bootstrap 4 miễn phí có sẵn trên GitHub. Mẫu có mã được viết tốt và tất cả các thành phần phù hợp cho các hướng dẫn này. Mẫu có một thiết kế gọn gàng, thanh lịch và đơn giản. Tuy nhiên, tôi dự định tùy chỉnh mẫu một chút để làm cho nó duy nhất cho ứng dụng của tôi.

Tạo các biểu mẫu

Mẫu bảng quản trị đi kèm với đầy đủ các biểu mẫu UI bao gồm đăng ký và đăng nhập.

Đối với mục đích xác thực, tôi chỉ cần sử dụng xác thực HTML5 và xác thực PHP tùy chỉnh.Html5 Validation and Custom PHP Validation.

Ngừng lãng phí thời gian vào máy chủ

Cloudways xử lý quản lý máy chủ cho bạn để bạn có thể tập trung vào việc tạo các ứng dụng tuyệt vời và giữ cho khách hàng của bạn hài lòng.

Mẫu đăng ký

Các biểu mẫu để đăng ký người dùng đã có sẵn. Tôi sẽ chỉ thay đổi tên trường và cập nhật phương thức và hành động:

 

 

 

 

 

 

 

 

 

 

 

 





 


   


     
Register an Account

     


       


         

         


           


             


               Username

               

             

           

         

         


           Email address

           

         

         


           


             


               Password

               

             

            


               Confirm Password

               

             

           

         

          Register

       

       


         Login Page

       

       

     

   

 

 

 

 

 

 

Dưới đây là mẫu đăng ký trông như thế nào sau khi sửa đổi ở trên:

mẫu đăng nhập

Tiếp theo, đối với biểu mẫu đăng nhập, hãy sử dụng mã sau:

 

 

 

 

 

 

 

 

 

 

 

 





 


   


     
Login

     


       


          

         


           Username

           

         

         


           Password

           

         

         


           


             

                Remember Password

           

         

         Login

       

       


         Register an Account

      

       

     

   

 

 

 

 

 

 

Đây là cách mẫu đăng nhập trông như thế nào:

Thiết lập kết nối cơ sở dữ liệu

Vì tôi đang ở trên Cloudways, tôi có thể dễ dàng truy cập chi tiết cơ sở dữ liệu MySQL trong tab Chi tiết truy cập:

Tạo ba bảng trong cơ sở dữ liệu, người dùng, sản phẩm, sales_stats.users, products, sales_stats.

Sử dụng các truy vấn SQL sau để tạo các bảng:

Bảng người dùng

CREATE TABLE `users` (

`id` int(11) NOT NULL,

`username` varchar(100) NOT NULL,

`email` varchar(100) NOT NULL,

`password` varchar(100) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Bảng sản phẩm

CREATE TABLE `products` (

`product_id` int(22) NOT NULL,

`product_name` varchar(22) NOT NULL,

`product_price` int(22) NOT NULL,

`product_cat` varchar(22) NOT NULL,

`product_details` varchar(22) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Bảng bán hàng

CREATE TABLE `sales_stats` (

`id` int(22) NOT NULL,

`sales` int(22) NOT NULL,

`month` varchar(25) NOT NULL,

`pending_orders` int(55) NOT NULL,

`revenue` int(55) NOT NULL,

`Vistors` int(55) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Nhấp vào Trình quản lý cơ sở dữ liệu trên nền tảng Cloudways và kiểm tra DBName và các thông tin đăng nhập khác. Tiếp theo, hãy tạo tệp server.php và dán mã sau trong đó:server.php and paste the following code in it:

Sự đăng ký
// REGISTER USER

if (isset($_POST['reg_user'])) {

// receive all input values from the form

$username = mysqli_real_escape_string($db, $_POST['username']);

$email = mysqli_real_escape_string($db, $_POST['email']);

$password_1 = mysqli_real_escape_string($db, $_POST['password_1']);

$password_2 = mysqli_real_escape_string($db, $_POST['password_2']);

// form validation: ensure that the form is correctly filled ...

// by adding (array_push()) corresponding error unto $errors array

if (empty($username)) { array_push($errors, "Username is required"); }

if (empty($email)) { array_push($errors, "Email is required"); }

if (empty($password_1)) { array_push($errors, "Password is required"); }

if ($password_1 != $password_2) {

array_push($errors, "The two passwords do not match");

}

// first check the database to make sure

// a user does not already exist with the same username and/or email

$user_check_query = "SELECT * FROM users WHERE username='$username' OR email='$email' LIMIT 1";

$result = mysqli_query($db, $user_check_query);

$user = mysqli_fetch_assoc($result);

if ($user) { // if user exists

if ($user['username'] === $username) {

array_push($errors, "Username already exists");

}

if ($user['email'] === $email) {

array_push($errors, "email already exists");

}

}
ins
// Finally, register user if there are no errors in the form

if (count($errors) == 0) {

$password = md5($password_1);//encrypt the password before saving in the database

echo $password ;

$query = "INSERT INTO users(username, email, password)

VALUES('$username', '$email', '$password')";

mysqli_query($db, $query);

$_SESSION['username'] = $username;

$_SESSION['success'] = "You are now logged in";

header('location: login.php');

}

}

// ...
Đăng nhập
// LOGIN USER

if (isset($_POST['login_user'])) {

$username = mysqli_real_escape_string($db, $_POST['username']);

$password = mysqli_real_escape_string($db, $_POST['password']);

if (empty($username)) {

array_push($errors, "Username is required");

}

if (empty($password)) {

array_push($errors, "Password is required");

}

if (count($errors) == 0) {

$password = md5($password);

$query = "SELECT * FROM users WHERE username='$username' AND password='$password'";

$results = mysqli_query($db, $query);

if (mysqli_num_rows($results) == 1) {

$_SESSION['username'] = $username;

$_SESSION['success'] = "You are now logged in";

header('location: index.php');

}else {

array_push($errors, "Wrong username/password combination");

}

}

}?>
Đối với các lỗi, hãy tạo tệp mới với tên của lỗi.php và dán mã sau trong đó:errors.php and paste the following code in it:
 0) : ?>











Tạo trang sản phẩm
Tiếp theo, tạo trang sản phẩm.php và dán mã sau trong đó:product.php page and paste the following code in it:

















































Dashboard



Product Page







Create Product 









Product Name







Product Price







Product Catgory







Product Details





Submit

































Ready to Leave?



×





Select "Logout" below if you are ready to end your current session.



Cancel

Logout



























Chèn sản phẩm vào cơ sở dữ liệu
Tiếp theo, tôi sẽ tạo tệp pserver.php trong thư mục gốc và dán mã sau trong đó:pserver.php file in the root folder and paste the following code in it:







 

 

 

 

 

 

 

 

 

 

 

 





 


   


     
Login

     


       


          

         


           Username

           

         

         


           Password

           

         

         


           


             

                Remember Password

           

         

         Login

       

       


         Register an Account

      

       

     

   

 

 

 

 

 

 





0
Trực quan hóa dữ liệu
Tôi cần phải điền vào dữ liệu bootstrap từ các bảng tương ứng trong cơ sở dữ liệu. Kết nối DataTable với cơ sở dữ liệu.
Mã sau đây có thể được sử dụng để điền vào DataTable Bootstrap. Hãy để cập nhật mã bảng với mã sau:







 

 

 

 

 

 

 

 

 

 

 

 





 


   


     
Login

     


       


          

         


           Username

           

         

         


           Password

           

         

         


           


             

                Remember Password

           

         

         Login

       

       


         Register an Account

      

       

     

   

 

 

 

 

 

 





1
Đây là cách bảng trông giống như sau mã trên:
Tiếp theo, tôi sẽ sử dụng dữ liệu trong cơ sở dữ liệu và trực quan hóa nó trong bảng điều khiển quản trị PHP dưới dạng biểu đồ dòng:
Như bạn có thể thấy, đỉnh của bảng điều khiển được chiếm bởi bốn thẻ hiển thị khách truy cập hàng tháng, doanh thu, đơn đặt hàng mới và vé mới. Dữ liệu cho các thẻ này được lấy từ cơ sở dữ liệu thông qua một truy vấn chọn đơn giản.SELECT query.



Thiết lập bảng điều khiển
Dưới đây là mã hoàn chỉnh cho chế độ xem bảng điều khiển mà bạn cần đặt vào index.php:index.php:







 

 

 

 

 

 

 

 

 

 

 

 





 


   


     
Login

     


       


          

         


           Username

           

         

         


           Password

           

         

         


           


             

                Remember Password

           

         

         Login

       

       


         Register an Account

      

       

     

   

 

 

 

 

 

 





2
Sự kết luận
Bây giờ chúng tôi có một ứng dụng với Bootstrap 4 và PHP mà bạn có thể sử dụng để thêm sản phẩm vào cơ sở dữ liệu. Tất cả các dữ liệu được duy trì trong các bảng và các số liệu dữ liệu quan trọng nhất được hiển thị thông qua các thẻ ở trên cùng và biểu đồ dòng. Như bạn có thể thấy, ứng dụng dựa trên mẫu bảng điều khiển PHP được tùy chỉnh để phù hợp với các yêu cầu của thiết kế ứng dụng. Bạn cũng có thể sử dụng mẫu quản trị viên PHP để tạo một quản trị viên trông dễ chịu hơn cho ứng dụng.application with Bootstrap 4 and PHP that you can use to add products into a database. All the data is maintained in the tables, and the most important data metrics are shown through cards at the top and the line
charts. As you can see, the app is based on a PHP dashboard template that was customized to fit the requirements of the app design. You could also use a PHP admin template to create a more pleasing-looking admin for the app. 
Ứng dụng này cũng có thể được triển khai bằng API trong đó bạn không phải trộn mã HTML và PHP. Dữ liệu sẽ được thêm hoặc lấy từ cơ sở dữ liệu bằng API.
Bootstrap có phải là CSS không?
Bootstrap là một khung CSS nguồn mở được thiết kế để phối hợp với sự phát triển web đáp ứng, di động và đầu tiên. Nó chứa thiết kế dựa trên CSS- và JavaScript cho kiểu chữ, biểu mẫu, nút và các thành phần giao diện khác.
Chia sẻ ý kiến ​​của bạn trong phần bình luận. Nhận xét ngay bây giờ COMMENT NOW
Chia sẻ bài viết này
Đánh giá của khách hàng tại

“Couldways Hosting có một trong những dịch vụ khách hàng tốt nhất và tốc độ lưu trữ”
Sanjit C [Nhà phát triển trang web]
 Pardeep Kumar
 Pardeep là một người quản lý cộng đồng PHP tại Cloudways - một nền tảng lưu trữ PHP được quản lý. Anh ấy thích làm việc trên nền tảng nguồn mở, khung và làm việc trên các ý tưởng mới. Bạn có thể gửi email cho anh ấy tại [Email & NBSP; được bảo vệ]
 

			
Bảng điều khiển PHP là gì?
			
Bảng điều khiển PHP là một công cụ trực quan đơn hoặc đa tab có thể được tích hợp trong các dự án PHP.Thông thường, đây là các ứng dụng dựa trên trình duyệt được xây dựng như một thành phần có thể tùy chỉnh của các dự án lớn hơn.a single or multi-tab visualization tool that can be integrated within PHP projects. Usually, these are browser-based applications that are built as a customizable component of larger projects.
		
			
Bảng quản trị PHP là gì?
			
PHPMyAdmin là một công cụ phần mềm miễn phí được viết bằng PHP, nhằm xử lý việc quản lý MySQL qua web.PHPMyAdmin hỗ trợ một loạt các hoạt động trên MySQL và Mariadb.a free software tool written in PHP, intended to handle the administration of MySQL over the Web. phpMyAdmin supports a wide range of operations on MySQL and MariaDB.
		
			
Bảng điều khiển HTML là gì?
			
Bảng điều khiển là một tập hợp các trang đại diện cho tất cả thông tin mà chủ sở hữu trang web cần biết trong thời gian thực để họ có thể đưa ra quyết định sáng suốt về trang web và doanh nghiệp của họ.a set of pages that represent all the information a site owner needs to know in real time so they can make informed decisions about their website and business.
		
			
Làm cách nào để tạo một bảng điều khiển đơn giản bằng cách sử dụng bootstrap trong 5 phút?
			
Cách xây dựng bảng điều khiển với hướng dẫn Bootstrap..
 
Tạo mẫu khởi động ..
 
Tạo một thanh hải quân ..
 
Kiểu tùy chỉnh ..
 
Tạo một menu bên ..
 
Tạo một phần bảng ..
 
Tạo phần thẻ ..
 
Conclusion..