├── .gitignore ├── _config.yml ├── upload ├── Koala.jpg ├── Jellyfish.jpg ├── Penguins.jpg ├── Hydrangeas.jpg ├── Lighthouse.jpg └── Chrysanthemum.jpg ├── template ├── content.php ├── footer.php └── header.php ├── view ├── home.php ├── delete.php ├── getRow.php ├── multipleDelete.php ├── form.php ├── record.php └── saveUpdate.php ├── asset ├── custom.css └── action.js ├── config └── db.php ├── index.php ├── crud_review_2018.sql └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /upload/Koala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reyven90/crud-php-ajax/HEAD/upload/Koala.jpg -------------------------------------------------------------------------------- /upload/Jellyfish.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reyven90/crud-php-ajax/HEAD/upload/Jellyfish.jpg -------------------------------------------------------------------------------- /upload/Penguins.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reyven90/crud-php-ajax/HEAD/upload/Penguins.jpg -------------------------------------------------------------------------------- /upload/Hydrangeas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reyven90/crud-php-ajax/HEAD/upload/Hydrangeas.jpg -------------------------------------------------------------------------------- /upload/Lighthouse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reyven90/crud-php-ajax/HEAD/upload/Lighthouse.jpg -------------------------------------------------------------------------------- /upload/Chrysanthemum.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reyven90/crud-php-ajax/HEAD/upload/Chrysanthemum.jpg -------------------------------------------------------------------------------- /template/content.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /template/footer.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /view/home.php: -------------------------------------------------------------------------------- 1 |

Home

2 | Add Entry 3 | Record recordList 4 |

-------------------------------------------------------------------------------- /template/header.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Home 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /view/delete.php: -------------------------------------------------------------------------------- 1 | 2 | query("DELETE FROM employee WHERE emp_id = '".$emp_id."'"); 5 | if($sql){ 6 | echo json_encode(array("response" => "success" )); 7 | } 8 | } 9 | ?> -------------------------------------------------------------------------------- /view/getRow.php: -------------------------------------------------------------------------------- 1 | 2 | query("SELECT * FROM employee WHERE emp_id = '".$emp_id."' "); 5 | if($sql){ 6 | echo json_encode(array($sql->fetch(PDO::FETCH_ASSOC))); 7 | } 8 | } 9 | ?> -------------------------------------------------------------------------------- /asset/custom.css: -------------------------------------------------------------------------------- 1 | .pagination li{ 2 | display: inline-block; 3 | padding: 5px 6px; 4 | } 5 | 6 | .pagination li a{ 7 | text-decoration: none; 8 | color:#000; 9 | } 10 | 11 | .pagination li a:hover{ 12 | color:red; 13 | } 14 | 15 | .active{ 16 | color:red; 17 | } 18 | 19 | .disabled{ 20 | cursor: not-allowed; 21 | color:#ccc; 22 | } -------------------------------------------------------------------------------- /view/multipleDelete.php: -------------------------------------------------------------------------------- 1 | 2 | query("DELETE FROM employee WHERE emp_id = '".$id."' "); 6 | // if ($sql) { 7 | // echo json_encode(array("response" => "success")); 8 | // } 9 | } 10 | } 11 | ?> -------------------------------------------------------------------------------- /config/db.php: -------------------------------------------------------------------------------- 1 | setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION); 13 | }catch(PDOException $e){ 14 | echo "no db found".$e->getMessage(); 15 | } 16 | 17 | ?> 18 | -------------------------------------------------------------------------------- /view/form.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /crud_review_2018.sql: -------------------------------------------------------------------------------- 1 | -- phpMyAdmin SQL Dump 2 | -- version 4.7.7 3 | -- https://www.phpmyadmin.net/ 4 | -- 5 | -- Host: 127.0.0.1 6 | -- Generation Time: Mar 15, 2018 at 07:08 PM 7 | -- Server version: 10.1.30-MariaDB 8 | -- PHP Version: 7.2.2 9 | 10 | SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; 11 | SET AUTOCOMMIT = 0; 12 | START TRANSACTION; 13 | SET time_zone = "+00:00"; 14 | 15 | 16 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; 17 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; 18 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; 19 | /*!40101 SET NAMES utf8mb4 */; 20 | 21 | -- 22 | -- Database: `crud_review_2018` 23 | -- 24 | 25 | -- -------------------------------------------------------- 26 | 27 | -- 28 | -- Table structure for table `employee` 29 | -- 30 | 31 | CREATE TABLE `employee` ( 32 | `emp_id` int(11) NOT NULL, 33 | `firstname` varchar(200) NOT NULL, 34 | `lastname` varchar(200) NOT NULL, 35 | `address` varchar(200) NOT NULL, 36 | `image_name` varchar(100) NOT NULL 37 | ) ENGINE=InnoDB DEFAULT CHARSET=latin1; 38 | 39 | -- 40 | -- Dumping data for table `employee` 41 | -- 42 | 43 | INSERT INTO `employee` (`emp_id`, `firstname`, `lastname`, `address`, `image_name`) VALUES 44 | (30, 'randy', 'inso', 'bankal', 'Hydrangeas.jpg'), 45 | (32, 'johny', 'bravo', 'atlanta', 'Penguins.jpg'), 46 | (33, 'james', 'harden', 'dubai', 'Koala.jpg'), 47 | (34, 'carlo', 'pinote', 'casia', 'Lighthouse.jpg'), 48 | (35, 'randy', 'pinote', 'casia', 'Lighthouse.jpg'), 49 | (36, 'bryle', 'apaz', 'casia', 'Lighthouse.jpg'), 50 | (37, 'john ', 'tumulak', 'bankal', 'Chrysanthemum.jpg'), 51 | (38, 'mean', 'engracial', 'bankal', 'Penguins.jpg'); 52 | 53 | -- 54 | -- Indexes for dumped tables 55 | -- 56 | 57 | -- 58 | -- Indexes for table `employee` 59 | -- 60 | ALTER TABLE `employee` 61 | ADD PRIMARY KEY (`emp_id`); 62 | 63 | -- 64 | -- AUTO_INCREMENT for dumped tables 65 | -- 66 | 67 | -- 68 | -- AUTO_INCREMENT for table `employee` 69 | -- 70 | ALTER TABLE `employee` 71 | MODIFY `emp_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=39; 72 | COMMIT; 73 | 74 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; 75 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; 76 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; 77 | -------------------------------------------------------------------------------- /view/record.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | query("SELECT COUNT(*) FROM employee"); 9 | $total = $r->fetchColumn(); 10 | $page = ($total/$limit); 11 | 12 | if(isset($id) && !empty($id)){ 13 | $id = $id; 14 | $start = ($id - 1) * $limit; 15 | }else{ 16 | $id = 1; 17 | } 18 | ?> 19 | 20 | 23 | query($sql); ?> 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | rowCount() > 0 ){ ?> 35 | fetch(PDO::FETCH_OBJ);$i++){ ?> 36 | 37 | 38 | 39 | 40 | 41 | 42 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 |

#	Image	Fullname	Address
	emp_id ?>		firstname.','.$row->lastname) ?>	address ?>	43 \| View \| 44 \| Delete 45 \|
No Record Found

55 |

Prev
".$i."
Next

84 | 85 | Delete Selected -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PHP-AJAX-CRUD + FILE UPLOAD + PAGINATION + MULTIPLE DELETE with CHECKBOX 2 | 3 | This is a simple CRUD Application for PHP AJAX with the following functionality . 4 | 5 | - Create, Update, Delete 6 | - Pagination 7 | - File upload 8 | - multiple delete with checkbox 9 | 10 | 11 | ### Folder Structure 12 | ```php 13 | ├── assets/ 14 | ├── action.js -- your action js 15 | ├── custom.css -- your custom css 16 | ├── jquery-3.1.1.min -- jquery library 17 | ├── config/ -- your db connection 18 | ├── template/ 19 | ├── header.php 20 | ├── content.php 21 | ├── foorter.php 22 | ├── upload/ -- your stoarage for images 23 | ├── view / -- your pages 24 | ├── index.php -- your simple route logic 25 | 26 | ``` 27 | 28 | 29 | #### SQL 30 | Create database and copy paste SQL Code below. 31 | ```sql 32 | -- phpMyAdmin SQL Dump 33 | -- version 4.7.7 34 | -- https://www.phpmyadmin.net/ 35 | -- 36 | -- Host: 127.0.0.1 37 | -- Generation Time: Mar 19, 2018 at 11:35 AM 38 | -- Server version: 10.1.30-MariaDB 39 | -- PHP Version: 7.2.2 40 | 41 | SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; 42 | SET AUTOCOMMIT = 0; 43 | START TRANSACTION; 44 | SET time_zone = "+00:00"; 45 | 46 | 47 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; 48 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; 49 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; 50 | /*!40101 SET NAMES utf8mb4 */; 51 | 52 | -- 53 | -- Database: `crud_review_2018` 54 | -- 55 | 56 | -- -------------------------------------------------------- 57 | 58 | -- 59 | -- Table structure for table `employee` 60 | -- 61 | 62 | CREATE TABLE `employee` ( 63 | `emp_id` int(11) NOT NULL, 64 | `firstname` varchar(200) NOT NULL, 65 | `lastname` varchar(200) NOT NULL, 66 | `address` varchar(200) NOT NULL, 67 | `image_name` varchar(100) NOT NULL 68 | ) ENGINE=InnoDB DEFAULT CHARSET=latin1; 69 | 70 | -- 71 | -- Dumping data for table `employee` 72 | -- 73 | 74 | INSERT INTO `employee` (`emp_id`, `firstname`, `lastname`, `address`, `image_name`) VALUES 75 | (32, 'johnysd', 'bravo', 'atlanta', 'Penguins.jpg'), 76 | (37, 'john ', 'tumulak', 'bankal', 'Chrysanthemum.jpg'); 77 | 78 | -- 79 | -- Indexes for dumped tables 80 | -- 81 | 82 | -- 83 | -- Indexes for table `employee` 84 | -- 85 | ALTER TABLE `employee` 86 | ADD PRIMARY KEY (`emp_id`); 87 | 88 | -- 89 | -- AUTO_INCREMENT for dumped tables 90 | -- 91 | 92 | -- 93 | -- AUTO_INCREMENT for table `employee` 94 | -- 95 | ALTER TABLE `employee` 96 | MODIFY `emp_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=38; 97 | COMMIT; 98 | 99 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; 100 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; 101 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; 102 | ``` 103 | ### db.php 104 | Create database connection 105 | ```php 106 | 107 | setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 118 | 119 | } catch (PDOException $e) { 120 | echo "Connection Failed:" . $e->getMessage(); 121 | die(); 122 | } 123 | 124 | ?> 125 | 126 | ``` 127 | 128 | 129 | ### just download to checkout the full details https://github.com/reyven90/php-ajax-login 130 | 131 | ### more question just pm me on facebook https://www.facebook.com/jay.romantiko 132 | 133 | ### thank you for following Goodbless :-) 134 | -------------------------------------------------------------------------------- /view/saveUpdate.php: -------------------------------------------------------------------------------- 1 | 2 | query("SELECT * FROM employee WHERE firstname = '".$fname."' AND lastname = '".$lname."' "); 15 | if($validate->rowCount() > 0){ 16 | $response = array("response" => "exist", "message" => "nothing change "); 17 | }else{ 18 | if(isset($name) && !empty($name)){ 19 | if(in_array($extension,$valid_format)){ 20 | if($size <= $max){ 21 | if(move_uploaded_file($tmp_name, $location.$name)){ 22 | $sql = $db->query("UPDATE employee SET firstname = '".$fname."', lastname = '".$lname."', address = '".$addr."', image_name = '".$name."' WHERE emp_id = '".$emp_id."'"); 23 | if($sql){ 24 | $response = array("response" => "success", "message" => "successfully change !"); 25 | } 26 | }else{ 27 | $response = array("response" => "error", "message" => "uploading error please review your code :-)"); 28 | } 29 | }else{ 30 | $response = array("response" => "size", "message" => "file too big please choose file 2mb !"); 31 | } 32 | }else{ 33 | $response = array("response" => "invalid", "message" => "invalid format "); 34 | } 35 | }else { 36 | $response = array("response" => "empty", "message" => "please choose file!"); 37 | } 38 | } 39 | }else{ 40 | $validate = $db->query("SELECT * FROM employee WHERE firstname = '".$fname."' AND lastname = '".$lname."' "); 41 | if($validate->rowCount() > 0){ 42 | $response = array("response" => "exist", "message" => "already exist"); 43 | }else{ 44 | if(isset($name) && !empty($name)){ 45 | if(in_array($extension,$valid_format)){ 46 | if($size <= $max){ 47 | if(move_uploaded_file($tmp_name, $location.$name)){ 48 | $sql = $db->query("INSERT INTO employee(firstname,lastname,address,image_name)VALUES('".$fname."','".$lname."','".$addr."','".$name."')"); 49 | if($sql){ 50 | $response = array("response" => "success", "message" => "successfully save !"); 51 | } 52 | }else{ 53 | $response = array("response" => "error", "message" => "uploading error please review your code :-)"); 54 | } 55 | }else{ 56 | $response = array("response" => "size", "message" => "file too big please choose file 2mb !"); 57 | } 58 | }else{ 59 | $response = array("response" => "invalid", "message" => "invalid format "); 60 | } 61 | }else { 62 | $response = array("response" => "empty", "message" => "please choose file!"); 63 | } 64 | } 65 | } 66 | echo json_encode($response); 67 | ?> -------------------------------------------------------------------------------- /asset/action.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | loadForm = function(){ 3 | $("#loadcontent").hide().fadeIn(1000).load("view/form.php"); 4 | $("#addForm").hide(); 5 | $("#recordList").show(); 6 | } 7 | 8 | loadRecord = function(){ 9 | $("#loadcontent").hide().fadeIn(1000).load("view/record.php"); 10 | $("#addForm").show(); 11 | $("#recordList").hide(); 12 | } 13 | 14 | $(document).on("click","#addForm",function(){ 15 | loadForm(); 16 | }); 17 | 18 | $(document).on("click","#recordList",function(){ 19 | loadRecord(); 20 | }); 21 | 22 | 23 | $(document).on("submit","#employeeFormId",function(){ 24 | if(confirm("Are you sure you want to save this entry")){ 25 | $.ajax({ 26 | type:'post', 27 | url:'view/saveUpdate.php', 28 | data:new FormData(this), 29 | contentType:false, 30 | processData:false, 31 | dataType:'json', 32 | beforeSend:function(data){ 33 | console.log(data); 34 | }, 35 | success:function(data){ 36 | if(data.response == 'update'){ 37 | alert(data.message); 38 | } 39 | 40 | else if(data.response == 'insert'){ 41 | alert(data.message); 42 | } 43 | 44 | else if(data.response == 'empty'){ 45 | alert(data.message); 46 | } 47 | 48 | else if(data.response == 'invalid'){ 49 | alert(data.message); 50 | } 51 | 52 | else if(data.response == 'size'){ 53 | alert(data.message); 54 | } 55 | 56 | else if(data.response == 'success'){ 57 | alert(data.message); 58 | } 59 | 60 | else if(data.response == 'exist'){ 61 | alert(data.message); 62 | } 63 | 64 | 65 | 66 | console.log(data); 67 | }, 68 | error:function(status,error){ 69 | alert(status.error); 70 | } 71 | }); 72 | 73 | return false; 74 | }else{ 75 | return false; 76 | } 77 | }); 78 | 79 | $(document).on("click","#page-link",function(){ 80 | var id = $(this).data("id"); 81 | $.ajax({ 82 | type:'post', 83 | url:'view/record.php', 84 | data:{id:id}, 85 | dataType:'html', 86 | beforeSend:function(data){ 87 | console.log(data); 88 | }, 89 | success:function(data){ 90 | $("#loadcontent").html(data); 91 | console.log(data); 92 | }, 93 | error:function(status,error){ 94 | alert(status.error); 95 | } 96 | }); 97 | }); 98 | 99 | $(document).on("click","#deleteData",function(){ 100 | if(confirm("Are you sure you want delete")){ 101 | var emp_id = $(this).data("id"); 102 | $.ajax({ 103 | type:'post', 104 | url:'view/delete.php', 105 | data:{emp_id:emp_id}, 106 | dataType:'json', 107 | beforeSend:function(data){ 108 | console.log(data); 109 | }, 110 | success:function(data){ 111 | if(data.response == 'success'){ 112 | $("tr#"+emp_id+'').css({"background":"#ccc"}); 113 | $("tr#"+emp_id+'').fadeOut(); 114 | } 115 | console.log(data); 116 | }, 117 | error:function(status,error){ 118 | alert(status.error); 119 | } 120 | }); 121 | }else{ 122 | return false; 123 | } 124 | 125 | }); 126 | 127 | $(document).on("click","#viewData",function(){ 128 | var emp_id = $(this).data("id"); 129 | $.ajax({ 130 | type:'post', 131 | url:'view/getRow.php', 132 | data:{emp_id:emp_id}, 133 | dataType:'json', 134 | beforeSend:function(data){ 135 | loadForm(); 136 | console.log(data); 137 | }, 138 | success:function(data){ 139 | $("input[name='emp_id']").val(data[0].emp_id); 140 | $("input[name='fname']").val(data[0].firstname); 141 | $("input[name='lname']").val(data[0].lastname); 142 | $("input[name='addr']").val(data[0].address); 143 | console.log(data); 144 | }, 145 | error:function(status,error){ 146 | alert(status.error); 147 | } 148 | }); 149 | }); 150 | 151 | $(document).on("click","#multipleDelete",function(){ 152 | var emp_id = []; 153 | 154 | $(":checkbox:checked").each(function(i){ 155 | emp_id[i] = $(this).val(); 156 | }); 157 | 158 | if(emp_id.length == 0){ 159 | alert("please select item !!! "); 160 | }else{ 161 | if(confirm("Are you sure you want delete this item")){ 162 | $.ajax({ 163 | type:'post', 164 | url:'view/multipleDelete.php', 165 | data:{emp_id:emp_id}, 166 | 167 | beforeSend:function(data){ 168 | console.log(data); 169 | }, 170 | success:function(data){ 171 | 172 | for(i=0;i