Cara Membuat Tombol Loadmore Menggunakan Ajax pada PHP

March 12, 2019

4 Comments

Cara Membuat Tombol Loadmore Menggunakan Ajax pada PHP – Setelah sebelumnya saya membahas tentang Cara Menampilkan Data Pada Card Dinamis dari Database MySQL pada PHP, pada kali ini kita akan menambahkan tombol load more/showmore. Karena jika pada contoh sebelumnya ada 1000 artikel maka akan ditampilkan semua, hal itu tentu akan memberatkan aplikasi kita. Namun beda halnya dengan jika kita menambahkan loadmore, misal kita hanya menampilkan 12 artikel dan jika klik tombol load maka akan muncul 12 artikel lagi. Tentu agak sedikit berbeda dengan tutorial sebelumnya karena kita juga akan menggunakan ajax. Caranya adalah seperti berikut.

Membuat Database MySQL

1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.

2. Buat tabel untuk mengetesnya dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go

CREATE TABLE `tbl_artikel`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `judul` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `deskripsi` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `tag` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `foto` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `penulis` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `tgl_input` datetime(0) NOT NULL,
  PRIMARY KEY (`id`) USING BTREE
)

CREATE TABLE `tbl_artikel` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`judul` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`deskripsi` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`tag` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`foto` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`penulis` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,

`tgl_input` datetime(0) NOT NULL,

PRIMARY KEY (`id`) USING BTREE

)

3. Kemudian daripada sobat memasukkan datanya satu-persatu maka sobat bisa jalankan perintah query dibawah

INSERT INTO `tbl_artikel` VALUES (1, 'Cara Membuat Autocomplete/Suggestion dengan Plugin pada PHP', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (2, 'Cara Membuat Autocomplete dengan Ajax dari Database pada PHP', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (3, 'Membuat Upload dan Resize/Compress Gambar denga Ajax pada PHP', 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (4, 'Cara Membuat Pagination Menggunakan Ajax Tanpa Loading pada PHP', 'Lorem ipsum dolor sit amet', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (5, 'Cara Membuat Pagination dengan Database MySQL pada PHP', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (6, 'Cara Mengupload Gambar dengan Ajax dan Menyimpan ke Database PHP', 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (7, 'Cara Membuat Upload File Dengan Progressbar Menggunakan Ajax pada PHP', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (8, 'Cara Membuat Scrollspy pada Bootstrap 4', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (9, 'Cara Membuat Corousel/Slider Image Responsive Menggunakan Bootstrap 4', 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (10, 'Cara membuat Crop and Upload Menggunakan Ajax pada PHP', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (11, 'Simple Pagination Pada Bootstrap 4', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (12, 'Membuat Progress Bar dengan Bootstrap 4', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (13, 'Membuat Border Menggunakan Bootstrap 4', 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (14, 'Cara Membuat Convert Format Rupiah Pada PHP dan Javascript', 'Lorem ipsum dolor sit amet', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (15, 'Membuat Navbar dengan Bootstrap 4 dengan Mudah', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (16, 'Memasang Text Editor Summernote WYSIHTML5 dengan Mudah', 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (17, 'Membuat Nav Menggunakan Bootstrap 4 Dengan Mudah', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (18, 'Cara Membuat Komentar Bertingkat dari Database Menggunakan Ajax Pada PHP', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (19, 'Membuat Nested Media Object pada Bootstrap 4', 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');
INSERT INTO `tbl_artikel` VALUES (20, 'CRUD Enkripsi / Deskripsi dengan Base64 pada PHP – Part 3 Edit dan Hapus Data', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (1, 'Cara Membuat Autocomplete/Suggestion dengan Plugin pada PHP', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (2, 'Cara Membuat Autocomplete dengan Ajax dari Database pada PHP', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (3, 'Membuat Upload dan Resize/Compress Gambar denga Ajax pada PHP', 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (4, 'Cara Membuat Pagination Menggunakan Ajax Tanpa Loading pada PHP', 'Lorem ipsum dolor sit amet', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (5, 'Cara Membuat Pagination dengan Database MySQL pada PHP', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (6, 'Cara Mengupload Gambar dengan Ajax dan Menyimpan ke Database PHP', 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (7, 'Cara Membuat Upload File Dengan Progressbar Menggunakan Ajax pada PHP', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (8, 'Cara Membuat Scrollspy pada Bootstrap 4', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (9, 'Cara Membuat Corousel/Slider Image Responsive Menggunakan Bootstrap 4', 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (10, 'Cara membuat Crop and Upload Menggunakan Ajax pada PHP', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (11, 'Simple Pagination Pada Bootstrap 4', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (12, 'Membuat Progress Bar dengan Bootstrap 4', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (13, 'Membuat Border Menggunakan Bootstrap 4', 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (14, 'Cara Membuat Convert Format Rupiah Pada PHP dan Javascript', 'Lorem ipsum dolor sit amet', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (15, 'Membuat Navbar dengan Bootstrap 4 dengan Mudah', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (16, 'Memasang Text Editor Summernote WYSIHTML5 dengan Mudah', 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (17, 'Membuat Nav Menggunakan Bootstrap 4 Dengan Mudah', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (18, 'Cara Membuat Komentar Bertingkat dari Database Menggunakan Ajax Pada PHP', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (19, 'Membuat Nested Media Object pada Bootstrap 4', 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

INSERT INTO `tbl_artikel` VALUES (20, 'CRUD Enkripsi / Deskripsi dengan Base64 pada PHP – Part 3 Edit dan Hapus Data', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 'dewan komputer', 'artikel1.png', 'Dewan', '2019-01-23 01:02:02');

Pada contoh gambarnya semua saya samakan yaitu artikel1.png jadi sobat harus menambahkan file dengan nama tersebut agar gambarnya muncul pada card.

Cara Menampilkan Data dan Membuat Load More

Berikut adalah cara menampilkan card dari database MySQL dan membuat tombol loadmore/showmore

1. Pertama tentunya seperti biasa kita membuat file koneksi.php yang berfungsi untuk menyambungkan dengan database dan isikan dengan script dibawah

<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_dewankomputer');

// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>

<?php

define('HOST','localhost');

define('USER','root');

define('PASS','');

define('DB1', 'db_dewankomputer');

// Buat Koneksinya

$db1 = new mysqli(HOST, USER, PASS, DB1);

2. Selanjutnya buat file index.php, dan masukkan kode cssnya karena untuk membuat card kita menggunakan bootstrap dan menggunakan ajax untuk loadmorenya maka wajib hukumnya kita untuk memasukkan kode dibawah pada tag <head>

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

1 2	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Karena untuk keperluan demo jadi saya menggunakan css dan js online, namun jika sobat ingin menggunakannya untuk keperluan development maka sobat harus mendownloadnya terlebih dahulu karena nanti tidak akan jalan jika dalam keadaan offline atau sobat bisa mendownloadnya bersama dengan project ini di akhir postingan.

3. Masih di index.php kita buat tampilan untuk cardnya saat pertama kali halaman load, pada contoh saya hanya menampilkan 4 data. Kode nya adalah seperti berikut

<nav class="navbar navbar-dark bg-primary">
  <a class="navbar-brand text-white" href="index.php">
    Dewan Komputer
  </a>
</nav>

<div class="container">
    <h2 align="center">Membuat Load More Menggunakan Ajax</h2>
    <div class="row" id="load_data">
      <?php
        $query = "SELECT count(*) AS jumlah FROM tbl_artikel";
        $dewan1 = $db1->prepare($query);
        $dewan1->execute();
        $res1 = $dewan1->get_result();
        $row = $res1->fetch_assoc();
        $jumlah = $row['jumlah'];

        $query = "SELECT * FROM tbl_artikel ORDER BY id ASC LIMIT 4";
        $dewan1 = $db1->prepare($query);
        $dewan1->execute();
        $res1 = $dewan1->get_result();
        while ($row = $res1->fetch_assoc()) {
          $id = $row["id"];
          $foto = $row["foto"];
          $tgl_input = $row["tgl_input"];
          $judul = $row["judul"];
          if (strlen($judul) > 60) {
            $judul = substr($judul, 0, 60) . "...";
          }
          $deskripsi = $row["deskripsi"];
          if (strlen($deskripsi) > 100) {
            $deskripsi = substr($deskripsi, 0, 100) . "...";
          }
      ?>
        <div class="col-sm-3 mb-3">
          <div class="card">
            <img src="<?php echo $foto; ?>" class="card-img-top" alt="gambar">
            <div class="card-body">
              <h5 class="card-title"><?php echo $judul; ?></h5>
              <p class="card-text"><?php echo $deskripsi; ?></p>
            </div>
            <div class="card-footer">
                <small class="text-muted">Post on <?php echo $tgl_input; ?></small>
              </div>
          </div>
        </div>
      <?php } ?>

      <?php if ($jumlah>4) { ?>
        <div id="remove_row" class="col-sm-2 offset-sm-5 mb-5">
          <button type="button" name="btn_more" data-id="<?php echo $id; ?>" id="btn_more" class="btn btn-success form-control">Load More</button>
        </div>
      <?php } ?>
    </div>
</div>

<div class="text-center mt-5">© <?php echo date('Y'); ?> Copyright:
    <a href="https://dewankomputer.com/"> Dewan Komputer</a>
</div>

Dewan Komputer

</a>

</nav>

<h2 align="center">Membuat Load More Menggunakan Ajax</h2>

<?php

$query = "SELECT count(*) AS jumlah FROM tbl_artikel";

$dewan1 = $db1->prepare($query);

$dewan1->execute();

$res1 = $dewan1->get_result();

$row = $res1->fetch_assoc();

$jumlah = $row['jumlah'];

$query = "SELECT * FROM tbl_artikel ORDER BY id ASC LIMIT 4";

$dewan1 = $db1->prepare($query);

$dewan1->execute();

$res1 = $dewan1->get_result();

while ($row = $res1->fetch_assoc()) {

$id = $row["id"];

$foto = $row["foto"];

$tgl_input = $row["tgl_input"];

$judul = $row["judul"];

if (strlen($judul) > 60) {

$judul = substr($judul, 0, 60) . "...";

}

$deskripsi = $row["deskripsi"];

if (strlen($deskripsi) > 100) {

$deskripsi = substr($deskripsi, 0, 100) . "...";

}

<img src="<?php echo $foto; ?>" class="card-img-top" alt="gambar">

</div>

</div>

<?php } ?>

<?php if ($jumlah>4) { ?>

<button type="button" name="btn_more" data-id="<?php echo $id; ?>" id="btn_more" class="btn btn-success form-control">Load More</button>

</div>

<?php } ?>

</div>

<div class="text-center mt-5">© <?php echo date('Y'); ?> Copyright:

<a href="https://dewankomputer.com/"> Dewan Komputer</a>

</div>

4. Untuk menjalankan menjalankan tombol load morenya kita perlu kode javascript dan ajaxnya. Scriptnya adalah seperti dibawah dan dimasukkan pada index.php pada tag <body> paling bawah

<script>
   $(document).ready(function(){
      $(document).on('click', '#btn_more', function(){
         var last_id = $(this).data("id");
         $('#btn_more').html("Loading...");
         $.ajax({
            url:"load_data.php",
            method:"POST",
            data:{last_id:last_id},
            dataType:"text",
            success:function(data){  
              $('#remove_row').remove();
              $('#load_data').append(data);
            }
         });
      });
   });
  </script>

$(document).ready(function(){

$(document).on('click', '#btn_more', function(){

var last_id = $(this).data("id");

$('#btn_more').html("Loading...");

$.ajax({

url:"load_data.php",

method:"POST",

data:{last_id:last_id},

dataType:"text",

success:function(data){

$('#remove_row').remove();

$('#load_data').append(data);

}

});

</script>

5. Kemudian buat file load_data.php yang berisi kode untuk menampilkan data selanjutnya berupa card juga. Isikan load_data.php dengan script dibawah

<?php
include 'koneksi.php';

$output='';

$query = "SELECT count(*) AS jumlah FROM tbl_artikel WHERE id > ".$_POST['last_id']."";
$dewan1 = $db1->prepare($query);
$dewan1->execute();
$res1 = $dewan1->get_result();
$row = $res1->fetch_assoc();
$jumlah = $row['jumlah'];


$query = "SELECT * FROM tbl_artikel WHERE id > ".$_POST['last_id']." ORDER BY id ASC LIMIT 4";
$dewan1 = $db1->prepare($query);
$dewan1->execute();
$res1 = $dewan1->get_result();
if($res1->num_rows > 0){
     while ($row = $res1->fetch_assoc()) {
          $id = $row["id"];
          $foto = $row["foto"];
          $tgl_input = $row["tgl_input"];
          $judul = $row["judul"];
          if (strlen($judul) > 60) {
               $judul = substr($judul, 0, 60) . "...";
          }
          $deskripsi = $row["deskripsi"];
          if (strlen($deskripsi) > 100) {
               $deskripsi = substr($deskripsi, 0, 100) . "...";
          }

          $output .= '<div class="col-sm-3 mb-3">
            <div class="card">
              <img src="'.$foto.'" class="card-img-top" alt="gambar">
              <div class="card-body">
                <h5 class="card-title">'.$judul.'</h5>
                <p class="card-text">'.$deskripsi.'</p>
              </div>
              <div class="card-footer">
               <small class="text-muted">Post on '.$tgl_input.'</small>
              </div>
            </div>
          </div>';
     }
     if ($jumlah > 4) {
          $output .= '<div align="center" id="remove_row" class="col-sm-2 offset-sm-5 mb-5"><button type="button" name="btn_more" data-id="'. $id .'" id="btn_more" class="btn btn-success form-control">Load More</button></div>';
     }
     echo $output;
}  
?>

<?php

include 'koneksi.php';

$output='';

$query = "SELECT count(*) AS jumlah FROM tbl_artikel WHERE id > ".$_POST['last_id']."";

$dewan1 = $db1->prepare($query);

$dewan1->execute();

$res1 = $dewan1->get_result();

$row = $res1->fetch_assoc();

$jumlah = $row['jumlah'];

$query = "SELECT * FROM tbl_artikel WHERE id > ".$_POST['last_id']." ORDER BY id ASC LIMIT 4";

$dewan1 = $db1->prepare($query);

$dewan1->execute();

$res1 = $dewan1->get_result();

if($res1->num_rows > 0){

while ($row = $res1->fetch_assoc()) {

$id = $row["id"];

$foto = $row["foto"];

$tgl_input = $row["tgl_input"];

$judul = $row["judul"];

if (strlen($judul) > 60) {

$judul = substr($judul, 0, 60) . "...";

}

$deskripsi = $row["deskripsi"];

if (strlen($deskripsi) > 100) {

$deskripsi = substr($deskripsi, 0, 100) . "...";

}

$output .= '<div class="col-sm-3 mb-3">

<h5 class="card-title">'.$judul.'</h5>

<p class="card-text">'.$deskripsi.'</p>

</div>

<small class="text-muted">Post on '.$tgl_input.'</small>

</div>

</div>';

}

if ($jumlah > 4) {

$output .= '<div align="center" id="remove_row" class="col-sm-2 offset-sm-5 mb-5"><button type="button" name="btn_more" data-id="'. $id .'" id="btn_more" class="btn btn-success form-control">Load More</button></div>';

}

echo $output;

}

Pada saat load data saya juga hanya menampilkan 4 card, jika sobat ingin menambahknya sobat hanya mengubah limit pada querynya.

6. Jika sobat jalankan kode diatas sudah bisa namun ada masalah lagi jika ada 1 judul atau deskripsi yang sangat pendek maka tinggi dari card tidak sama sehingga terlihat tidak rapi. Oleh karena itu kita perlu menambahkan cssnya lagi yang bisa sobat buat pada file style.css atau bisa sobat masukkan pada tag <head> pada file index.php kode dibawah ini

<style type="text/css">
  .card-title{
    min-height: 100px;
  }
  .card-text {
    min-height: 120px;
  }
</style>

.card-title{

min-height: 100px;

}

.card-text {

min-height: 120px;

}

</style>

Begitulah cara kita membuat card sama tinggi sehingga lebih rapi.

7. Kemudian jalankan project dan akan muncul tampilan seperti dibawah

Jika sobat klik Load More pasti akan muncul lagi 4 card. Pada contoh diatas untuk manempilkan selengkapnya kita berdasarkan event click. Namun kita juga bisa membuatnya data akan terload saat pengguna scroll dan sudah mencapai halaman paling bawah maka secara otomatis akan muncul beberapa data. Namun itu akan saya bahas pada postingan saya selanjutnya. Cara ini tentunya ada kekurangannya juga loh.. coba bayangkan jika data ada 1000 dan yang dilihat ada di halaman 50 maka pengguna harus klik load more 50 kali beda dengan pagination pengguna bisa langsung klik halaman 50 atau jika belum muncul bisa ganti url menjadi page=50. Namun untuk mensiasatinya tenntu kita perlu menambahkan menu search yang mana sudah saya bahas bedanya pada postingan sebelumnya data ditampilkan pada tabel dan ini ditampilkan pada card. Dan karena kita menggunakan bootstrap tentunya card diatas menjadi responsive design mengikuti lebar layarnya.

Sekian postingan saya tentang Cara Membuat Tombol Loadmore Menggunakan Ajax pada PHP. Jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah dan apabila ada kesalahan saya mohon maaf. Kunjungi postingan saya lainnya untuk menambah wawasan sobat.

Cara Membuat Pagination Menggunakan Ajax Tanpa Loading pada PHP

Cara Membuat Pagination pada Card View PHP

Cara Membuat Auto Load More saat Scroll pada PHP

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..