
Ventana Modal Bootstrap
En esta ocasión quiero compartir unos scripts php que nos servirán como guía a la hora que necesitemos enviar datos cargados dinámicamente a una ventana modal Bootstrap; para este ejemplo haremos un CRUD, pero prestaremos atención especial a como enviar los datos dinámicos a la ventana modal.
Antes de empezar a echaremos un vistazo a la estructura de carpetas y archivos.
Cabe mencionar que para hacer este tutorial me he basado en el siguiente post:
Paginación con PHP, MySQL, jQuery, Ajax y Bootstrap
En donde se recupera un listado de registros de una base de datos MySQL y se pagina usando jQuery Ajax, siempre utilizando bootstrap para el diseño.
Bien ahora procedamos con la explicación código de cada uno de los archivos mostrados en la imagen anterior.
countries.sql
Este archivo contiene las instrucciones sql para la creación de una tabla llamada countries. Para poder visualizar correctamente los datos que son mostrados en este tutorial , es necesario crear una base de datos , luego importar el archivo countries.sql a nuestra base de datos que hemos creado.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 |
-- phpMyAdmin SQL Dump -- version 4.2.11 -- http://www.phpmyadmin.net -- -- Servidor: 127.0.0.1 -- Tiempo de generación: 12-06-2015 a las 19:06:10 -- Versión del servidor: 5.6.21 -- Versión de PHP: 5.6.3 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */; -- -- Base de datos: `test` -- -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla `countries` -- CREATE TABLE IF NOT EXISTS `countries` ( `id` int(5) NOT NULL, `countryCode` char(2) NOT NULL DEFAULT '', `countryName` varchar(45) NOT NULL DEFAULT '', `currencyCode` char(3) DEFAULT NULL, `capital` varchar(30) DEFAULT NULL, `continentName` varchar(15) DEFAULT NULL ) ENGINE=MyISAM AUTO_INCREMENT=251 DEFAULT CHARSET=utf8; -- -- Volcado de datos para la tabla `countries` -- INSERT INTO `countries` (`id`, `countryCode`, `countryName`, `currencyCode`, `capital`, `continentName`) VALUES (1, 'AD', 'Andorra', 'EUR', 'Andorra la Vella', 'Europe'), (2, 'AE', 'United Arab Emirates', 'AED', 'Abu Dhabi', 'Asia'), (3, 'AF', 'Afghanistan', 'AFN', 'Kabul', 'Asia'), (4, 'AG', 'Antigua and Barbuda', 'XCD', 'St. John''s', 'North America'), (5, 'AI', 'Anguilla', 'XCD', 'The Valley', 'North America'), (6, 'AL', 'Albania', 'ALL', 'Tirana', 'Europe'), (7, 'AM', 'Armenia', 'AMD', 'Yerevan', 'Asia'), (8, 'AO', 'Angola', 'AOA', 'Luanda', 'Africa'), (9, 'AQ', 'Antarctica', '', '', 'Antarctica'), (10, 'AR', 'Argentina', 'ARS', 'Buenos Aires', 'South America'), (11, 'AS', 'American Samoa', 'USD', 'Pago Pago', 'Oceania'), (12, 'AT', 'Austria', 'EUR', 'Vienna', 'Europe'), (13, 'AU', 'Australia', 'AUD', 'Canberra', 'Oceania'), (14, 'AW', 'Aruba', 'AWG', 'Oranjestad', 'North America'), (15, 'AX', 'Åland', 'EUR', 'Mariehamn', 'Europe'), (16, 'AZ', 'Azerbaijan', 'AZN', 'Baku', 'Asia'), (17, 'BA', 'Bosnia and Herzegovina', 'BAM', 'Sarajevo', 'Europe'), (18, 'BB', 'Barbados', 'BBD', 'Bridgetown', 'North America'), (19, 'BD', 'Bangladesh', 'BDT', 'Dhaka', 'Asia'), (20, 'BE', 'Belgium', 'EUR', 'Brussels', 'Europe'), (21, 'BF', 'Burkina Faso', 'XOF', 'Ouagadougou', 'Africa'), (22, 'BG', 'Bulgaria', 'BGN', 'Sofia', 'Europe'), (23, 'BH', 'Bahrain', 'BHD', 'Manama', 'Asia'), (24, 'BI', 'Burundi', 'BIF', 'Bujumbura', 'Africa'), (25, 'BJ', 'Benin', 'XOF', 'Porto-Novo', 'Africa'), (26, 'BL', 'Saint Barthélemy', 'EUR', 'Gustavia', 'North America'), (27, 'BM', 'Bermuda', 'BMD', 'Hamilton', 'North America'), (28, 'BN', 'Brunei', 'BND', 'Bandar Seri Begawan', 'Asia'), (29, 'BO', 'Bolivia', 'BOB', 'Sucre', 'South America'), (30, 'BQ', 'Bonaire', 'USD', '', 'North America'), (31, 'BR', 'Brazil', 'BRL', 'Brasília', 'South America'), (32, 'BS', 'Bahamas', 'BSD', 'Nassau', 'North America'), (33, 'BT', 'Bhutan', 'BTN', 'Thimphu', 'Asia'), (34, 'BV', 'Bouvet Island', 'NOK', '', 'Antarctica'), (35, 'BW', 'Botswana', 'BWP', 'Gaborone', 'Africa'), (36, 'BY', 'Belarus', 'BYR', 'Minsk', 'Europe'), (37, 'BZ', 'Belize', 'BZD', 'Belmopan', 'North America'), (38, 'CA', 'Canada', 'CAD', 'Ottawa', 'North America'), (39, 'CC', 'Cocos [Keeling] Islands', 'AUD', 'West Island', 'Asia'), (40, 'CD', 'Democratic Republic of the Congo', 'CDF', 'Kinshasa', 'Africa'), (41, 'CF', 'Central African Republic', 'XAF', 'Bangui', 'Africa'), (42, 'CG', 'Republic of the Congo', 'XAF', 'Brazzaville', 'Africa'), (43, 'CH', 'Switzerland', 'CHF', 'Berne', 'Europe'), (44, 'CI', 'Ivory Coast', 'XOF', 'Yamoussoukro', 'Africa'), (45, 'CK', 'Cook Islands', 'NZD', 'Avarua', 'Oceania'), (46, 'CL', 'Chile', 'CLP', 'Santiago', 'South America'), (47, 'CM', 'Cameroon', 'XAF', 'Yaoundé', 'Africa'), (48, 'CN', 'China', 'CNY', 'Beijing', 'Asia'), (49, 'CO', 'Colombia', 'COP', 'Bogotá', 'South America'), (50, 'CR', 'Costa Rica', 'CRC', 'San José', 'North America'), (51, 'CU', 'Cuba', 'CUP', 'Havana', 'North America'), (52, 'CV', 'Cape Verde', 'CVE', 'Praia', 'Africa'), (53, 'CW', 'Curacao', 'ANG', 'Willemstad', 'North America'), (54, 'CX', 'Christmas Island', 'AUD', 'The Settlement', 'Asia'), (55, 'CY', 'Cyprus', 'EUR', 'Nicosia', 'Europe'), (56, 'CZ', 'Czech Republic', 'CZK', 'Prague', 'Europe'), (57, 'DE', 'Germany', 'EUR', 'Berlin', 'Europe'), (58, 'DJ', 'Djibouti', 'DJF', 'Djibouti', 'Africa'), (59, 'DK', 'Denmark', 'DKK', 'Copenhagen', 'Europe'), (60, 'DM', 'Dominica', 'XCD', 'Roseau', 'North America'), (61, 'DO', 'Dominican Republic', 'DOP', 'Santo Domingo', 'North America'), (62, 'DZ', 'Algeria', 'DZD', 'Algiers', 'Africa'), (63, 'EC', 'Ecuador', 'USD', 'Quito', 'South America'), (64, 'EE', 'Estonia', 'EUR', 'Tallinn', 'Europe'), (65, 'EG', 'Egypt', 'EGP', 'Cairo', 'Africa'), (66, 'EH', 'Western Sahara', 'MAD', 'El Aaiún', 'Africa'), (67, 'ER', 'Eritrea', 'ERN', 'Asmara', 'Africa'), (68, 'ES', 'Spain', 'EUR', 'Madrid', 'Europe'), (69, 'ET', 'Ethiopia', 'ETB', 'Addis Ababa', 'Africa'), (70, 'FI', 'Finland', 'EUR', 'Helsinki', 'Europe'), (71, 'FJ', 'Fiji', 'FJD', 'Suva', 'Oceania'), (72, 'FK', 'Falkland Islands', 'FKP', 'Stanley', 'South America'), (73, 'FM', 'Micronesia', 'USD', 'Palikir', 'Oceania'), (74, 'FO', 'Faroe Islands', 'DKK', 'Tórshavn', 'Europe'), (75, 'FR', 'France', 'EUR', 'Paris', 'Europe'), (76, 'GA', 'Gabon', 'XAF', 'Libreville', 'Africa'), (77, 'GB', 'United Kingdom', 'GBP', 'London', 'Europe'), (78, 'GD', 'Grenada', 'XCD', 'St. George''s', 'North America'), (79, 'GE', 'Georgia', 'GEL', 'Tbilisi', 'Asia'), (80, 'GF', 'French Guiana', 'EUR', 'Cayenne', 'South America'), (81, 'GG', 'Guernsey', 'GBP', 'St Peter Port', 'Europe'), (82, 'GH', 'Ghana', 'GHS', 'Accra', 'Africa'), (83, 'GI', 'Gibraltar', 'GIP', 'Gibraltar', 'Europe'), (84, 'GL', 'Greenland', 'DKK', 'Nuuk', 'North America'), (85, 'GM', 'Gambia', 'GMD', 'Banjul', 'Africa'), (86, 'GN', 'Guinea', 'GNF', 'Conakry', 'Africa'), (87, 'GP', 'Guadeloupe', 'EUR', 'Basse-Terre', 'North America'), (88, 'GQ', 'Equatorial Guinea', 'XAF', 'Malabo', 'Africa'), (89, 'GR', 'Greece', 'EUR', 'Athens', 'Europe'), (90, 'GS', 'South Georgia and the South Sandwich Islands', 'GBP', 'Grytviken', 'Antarctica'), (91, 'GT', 'Guatemala', 'GTQ', 'Guatemala City', 'North America'), (92, 'GU', 'Guam', 'USD', 'Hagåtña', 'Oceania'), (93, 'GW', 'Guinea-Bissau', 'XOF', 'Bissau', 'Africa'), (94, 'GY', 'Guyana', 'GYD', 'Georgetown', 'South America'), (95, 'HK', 'Hong Kong', 'HKD', 'Hong Kong', 'Asia'), (96, 'HM', 'Heard Island and McDonald Islands', 'AUD', '', 'Antarctica'), (97, 'HN', 'Honduras', 'HNL', 'Tegucigalpa', 'North America'), (98, 'HR', 'Croatia', 'HRK', 'Zagreb', 'Europe'), (99, 'HT', 'Haiti', 'HTG', 'Port-au-Prince', 'North America'), (100, 'HU', 'Hungary', 'HUF', 'Budapest', 'Europe'), (101, 'ID', 'Indonesia', 'IDR', 'Jakarta', 'Asia'), (102, 'IE', 'Ireland', 'EUR', 'Dublin', 'Europe'), (103, 'IL', 'Israel', 'ILS', '', 'Asia'), (104, 'IM', 'Isle of Man', 'GBP', 'Douglas', 'Europe'), (105, 'IN', 'India', 'INR', 'New Delhi', 'Asia'), (106, 'IO', 'British Indian Ocean Territory', 'USD', '', 'Asia'), (107, 'IQ', 'Iraq', 'IQD', 'Baghdad', 'Asia'), (108, 'IR', 'Iran', 'IRR', 'Tehran', 'Asia'), (109, 'IS', 'Iceland', 'ISK', 'Reykjavik', 'Europe'), (110, 'IT', 'Italy', 'EUR', 'Rome', 'Europe'), (111, 'JE', 'Jersey', 'GBP', 'Saint Helier', 'Europe'), (112, 'JM', 'Jamaica', 'JMD', 'Kingston', 'North America'), (113, 'JO', 'Jordan', 'JOD', 'Amman', 'Asia'), (114, 'JP', 'Japan', 'JPY', 'Tokyo', 'Asia'), (115, 'KE', 'Kenya', 'KES', 'Nairobi', 'Africa'), (116, 'KG', 'Kyrgyzstan', 'KGS', 'Bishkek', 'Asia'), (117, 'KH', 'Cambodia', 'KHR', 'Phnom Penh', 'Asia'), (118, 'KI', 'Kiribati', 'AUD', 'Tarawa', 'Oceania'), (119, 'KM', 'Comoros', 'KMF', 'Moroni', 'Africa'), (120, 'KN', 'Saint Kitts and Nevis', 'XCD', 'Basseterre', 'North America'), (121, 'KP', 'North Korea', 'KPW', 'Pyongyang', 'Asia'), (122, 'KR', 'South Korea', 'KRW', 'Seoul', 'Asia'), (123, 'KW', 'Kuwait', 'KWD', 'Kuwait City', 'Asia'), (124, 'KY', 'Cayman Islands', 'KYD', 'George Town', 'North America'), (125, 'KZ', 'Kazakhstan', 'KZT', 'Astana', 'Asia'), (126, 'LA', 'Laos', 'LAK', 'Vientiane', 'Asia'), (127, 'LB', 'Lebanon', 'LBP', 'Beirut', 'Asia'), (128, 'LC', 'Saint Lucia', 'XCD', 'Castries', 'North America'), (129, 'LI', 'Liechtenstein', 'CHF', 'Vaduz', 'Europe'), (130, 'LK', 'Sri Lanka', 'LKR', 'Colombo', 'Asia'), (131, 'LR', 'Liberia', 'LRD', 'Monrovia', 'Africa'), (132, 'LS', 'Lesotho', 'LSL', 'Maseru', 'Africa'), (133, 'LT', 'Lithuania', 'LTL', 'Vilnius', 'Europe'), (134, 'LU', 'Luxembourg', 'EUR', 'Luxembourg', 'Europe'), (135, 'LV', 'Latvia', 'EUR', 'Riga', 'Europe'), (136, 'LY', 'Libya', 'LYD', 'Tripoli', 'Africa'), (137, 'MA', 'Morocco', 'MAD', 'Rabat', 'Africa'), (138, 'MC', 'Monaco', 'EUR', 'Monaco', 'Europe'), (139, 'MD', 'Moldova', 'MDL', 'Chişinău', 'Europe'), (140, 'ME', 'Montenegro', 'EUR', 'Podgorica', 'Europe'), (141, 'MF', 'Saint Martin', 'EUR', 'Marigot', 'North America'), (142, 'MG', 'Madagascar', 'MGA', 'Antananarivo', 'Africa'), (143, 'MH', 'Marshall Islands', 'USD', 'Majuro', 'Oceania'), (144, 'MK', 'Macedonia', 'MKD', 'Skopje', 'Europe'), (145, 'ML', 'Mali', 'XOF', 'Bamako', 'Africa'), (146, 'MM', 'Myanmar [Burma]', 'MMK', 'Nay Pyi Taw', 'Asia'), (147, 'MN', 'Mongolia', 'MNT', 'Ulan Bator', 'Asia'), (148, 'MO', 'Macao', 'MOP', 'Macao', 'Asia'), (149, 'MP', 'Northern Mariana Islands', 'USD', 'Saipan', 'Oceania'), (150, 'MQ', 'Martinique', 'EUR', 'Fort-de-France', 'North America'), (151, 'MR', 'Mauritania', 'MRO', 'Nouakchott', 'Africa'), (152, 'MS', 'Montserrat', 'XCD', 'Plymouth', 'North America'), (153, 'MT', 'Malta', 'EUR', 'Valletta', 'Europe'), (154, 'MU', 'Mauritius', 'MUR', 'Port Louis', 'Africa'), (155, 'MV', 'Maldives', 'MVR', 'Malé', 'Asia'), (156, 'MW', 'Malawi', 'MWK', 'Lilongwe', 'Africa'), (157, 'MX', 'Mexico', 'MXN', 'Mexico City', 'North America'), (158, 'MY', 'Malaysia', 'MYR', 'Kuala Lumpur', 'Asia'), (159, 'MZ', 'Mozambique', 'MZN', 'Maputo', 'Africa'), (160, 'NA', 'Namibia', 'NAD', 'Windhoek', 'Africa'), (161, 'NC', 'New Caledonia', 'XPF', 'Noumea', 'Oceania'), (162, 'NE', 'Niger', 'XOF', 'Niamey', 'Africa'), (163, 'NF', 'Norfolk Island', 'AUD', 'Kingston', 'Oceania'), (164, 'NG', 'Nigeria', 'NGN', 'Abuja', 'Africa'), (165, 'NI', 'Nicaragua', 'NIO', 'Managua', 'North America'), (166, 'NL', 'Netherlands', 'EUR', 'Amsterdam', 'Europe'), (167, 'NO', 'Norway', 'NOK', 'Oslo', 'Europe'), (168, 'NP', 'Nepal', 'NPR', 'Kathmandu', 'Asia'), (169, 'NR', 'Nauru', 'AUD', '', 'Oceania'), (170, 'NU', 'Niue', 'NZD', 'Alofi', 'Oceania'), (171, 'NZ', 'New Zealand', 'NZD', 'Wellington', 'Oceania'), (172, 'OM', 'Oman', 'OMR', 'Muscat', 'Asia'), (173, 'PA', 'Panama', 'PAB', 'Panama City', 'North America'), (174, 'PE', 'Peru', 'PEN', 'Lima', 'South America'), (175, 'PF', 'French Polynesia', 'XPF', 'Papeete', 'Oceania'), (176, 'PG', 'Papua New Guinea', 'PGK', 'Port Moresby', 'Oceania'), (177, 'PH', 'Philippines', 'PHP', 'Manila', 'Asia'), (178, 'PK', 'Pakistan', 'PKR', 'Islamabad', 'Asia'), (179, 'PL', 'Poland', 'PLN', 'Warsaw', 'Europe'), (180, 'PM', 'Saint Pierre and Miquelon', 'EUR', 'Saint-Pierre', 'North America'), (181, 'PN', 'Pitcairn Islands', 'NZD', 'Adamstown', 'Oceania'), (182, 'PR', 'Puerto Rico', 'USD', 'San Juan', 'North America'), (183, 'PS', 'Palestine', 'ILS', '', 'Asia'), (184, 'PT', 'Portugal', 'EUR', 'Lisbon', 'Europe'), (185, 'PW', 'Palau', 'USD', 'Melekeok - Palau State Capital', 'Oceania'), (186, 'PY', 'Paraguay', 'PYG', 'Asunción', 'South America'), (187, 'QA', 'Qatar', 'QAR', 'Doha', 'Asia'), (188, 'RE', 'Réunion', 'EUR', 'Saint-Denis', 'Africa'), (189, 'RO', 'Romania', 'RON', 'Bucharest', 'Europe'), (190, 'RS', 'Serbia', 'RSD', 'Belgrade', 'Europe'), (191, 'RU', 'Russia', 'RUB', 'Moscow', 'Europe'), (192, 'RW', 'Rwanda', 'RWF', 'Kigali', 'Africa'), (193, 'SA', 'Saudi Arabia', 'SAR', 'Riyadh', 'Asia'), (194, 'SB', 'Solomon Islands', 'SBD', 'Honiara', 'Oceania'), (195, 'SC', 'Seychelles', 'SCR', 'Victoria', 'Africa'), (196, 'SD', 'Sudan', 'SDG', 'Khartoum', 'Africa'), (197, 'SE', 'Sweden', 'SEK', 'Stockholm', 'Europe'), (198, 'SG', 'Singapore', 'SGD', 'Singapore', 'Asia'), (199, 'SH', 'Saint Helena', 'SHP', 'Jamestown', 'Africa'), (200, 'SI', 'Slovenia', 'EUR', 'Ljubljana', 'Europe'), (201, 'SJ', 'Svalbard and Jan Mayen', 'NOK', 'Longyearbyen', 'Europe'), (202, 'SK', 'Slovakia', 'EUR', 'Bratislava', 'Europe'), (203, 'SL', 'Sierra Leone', 'SLL', 'Freetown', 'Africa'), (204, 'SM', 'San Marino', 'EUR', 'San Marino', 'Europe'), (205, 'SN', 'Senegal', 'XOF', 'Dakar', 'Africa'), (206, 'SO', 'Somalia', 'SOS', 'Mogadishu', 'Africa'), (207, 'SR', 'Suriname', 'SRD', 'Paramaribo', 'South America'), (208, 'SS', 'South Sudan', 'SSP', 'Juba', 'Africa'), (209, 'ST', 'São Tomé and Príncipe', 'STD', 'São Tomé', 'Africa'), (210, 'SV', 'El Salvador', 'USD', 'San Salvador', 'North America'), (211, 'SX', 'Sint Maarten', 'ANG', 'Philipsburg', 'North America'), (212, 'SY', 'Syria', 'SYP', 'Damascus', 'Asia'), (213, 'SZ', 'Swaziland', 'SZL', 'Mbabane', 'Africa'), (214, 'TC', 'Turks and Caicos Islands', 'USD', 'Cockburn Town', 'North America'), (215, 'TD', 'Chad', 'XAF', 'N''Djamena', 'Africa'), (216, 'TF', 'French Southern Territories', 'EUR', 'Port-aux-Français', 'Antarctica'), (217, 'TG', 'Togo', 'XOF', 'Lomé', 'Africa'), (218, 'TH', 'Thailand', 'THB', 'Bangkok', 'Asia'), (219, 'TJ', 'Tajikistan', 'TJS', 'Dushanbe', 'Asia'), (220, 'TK', 'Tokelau', 'NZD', '', 'Oceania'), (221, 'TL', 'East Timor', 'USD', 'Dili', 'Oceania'), (222, 'TM', 'Turkmenistan', 'TMT', 'Ashgabat', 'Asia'), (223, 'TN', 'Tunisia', 'TND', 'Tunis', 'Africa'), (224, 'TO', 'Tonga', 'TOP', 'Nuku''alofa', 'Oceania'), (225, 'TR', 'Turkey', 'TRY', 'Ankara', 'Asia'), (226, 'TT', 'Trinidad and Tobago', 'TTD', 'Port of Spain', 'North America'), (227, 'TV', 'Tuvalu', 'AUD', 'Funafuti', 'Oceania'), (228, 'TW', 'Taiwan', 'TWD', 'Taipei', 'Asia'), (229, 'TZ', 'Tanzania', 'TZS', 'Dodoma', 'Africa'), (230, 'UA', 'Ukraine', 'UAH', 'Kyiv', 'Europe'), (231, 'UG', 'Uganda', 'UGX', 'Kampala', 'Africa'), (232, 'UM', 'U.S. Minor Outlying Islands', 'USD', '', 'Oceania'), (233, 'US', 'United States', 'USD', 'Washington', 'North America'), (234, 'UY', 'Uruguay', 'UYU', 'Montevideo', 'South America'), (235, 'UZ', 'Uzbekistan', 'UZS', 'Tashkent', 'Asia'), (236, 'VA', 'Vatican City', 'EUR', 'Vatican', 'Europe'), (237, 'VC', 'Saint Vincent and the Grenadines', 'XCD', 'Kingstown', 'North America'), (238, 'VE', 'Venezuela', 'VEF', 'Caracas', 'South America'), (239, 'VG', 'British Virgin Islands', 'USD', 'Road Town', 'North America'), (240, 'VI', 'U.S. Virgin Islands', 'USD', 'Charlotte Amalie', 'North America'), (241, 'VN', 'Vietnam', 'VND', 'Hanoi', 'Asia'), (242, 'VU', 'Vanuatu', 'VUV', 'Port Vila', 'Oceania'), (243, 'WF', 'Wallis and Futuna', 'XPF', 'Mata-Utu', 'Oceania'), (244, 'WS', 'Samoa', 'WST', 'Apia', 'Oceania'), (245, 'XK', 'Kosovo', 'EUR', 'Pristina', 'Europe'), (246, 'YE', 'Yemen', 'YER', 'Sanaa', 'Asia'), (247, 'YT', 'Mayotte', 'EUR', 'Mamoutzou', 'Africa'), (248, 'ZA', 'South Africa', 'ZAR', 'Pretoria', 'Africa'), (249, 'ZM', 'Zambia', 'ZMW', 'Lusaka', 'Africa'), (250, 'ZW', 'Zimbabwe', 'ZWL', 'Harare', 'Africa'); -- -- Índices para tablas volcadas -- -- -- Indices de la tabla `countries` -- ALTER TABLE `countries` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT de las tablas volcadas -- -- -- AUTO_INCREMENT de la tabla `countries` -- ALTER TABLE `countries` MODIFY `id` int(5) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=251; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; |
index.php
Este archivo contiene la estructura html para gestionar nuestro proyecto
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <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>Paginación con PHP, Mysql, jQuery, Ajax y Bootstrap </title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> </head> <body> <?php include("modal_agregar.php");?> <?php include("modal_modificar.php");?> <?php include("modal_eliminar.php");?> <div class="container-fluid"> <div class='col-xs-6'> <h3> Listado de Países</h3> </div> <div class='col-xs-6'> <h3 class='text-right'> <button type="button" class="btn btn-default" data-toggle="modal" data-target="#dataRegister"><i class='glyphicon glyphicon-plus'></i> Agregar</button> </h3> </div> <div class="row"> <div class="col-xs-12"> <div id="loader" class="text-center"> <img src="loader.gif"></div> <div class="datos_ajax_delete"></div><!-- Datos ajax Final --> <div class="outer_div"></div><!-- Datos ajax Final --> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <script src="js/app.js"></script> <script> $(document).ready(function(){ load(1); }); </script> </body> </html> |
modal_agregar.php
Archivo contiene el formulario html del modal para agregar registros a la base de datos
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<form id="guardarDatos"> <div class="modal fade" id="dataRegister" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="exampleModalLabel">Agregar país</h4> </div> <div class="modal-body"> <div id="datos_ajax_register"></div> <div class="form-group"> <label for="codigo0" class="control-label">Código:</label> <input type="text" class="form-control" id="codigo0" name="codigo" required maxlength="2"> </div> <div class="form-group"> <label for="nombre0" class="control-label">Nombre:</label> <input type="text" class="form-control" id="nombre0" name="nombre" required maxlength="45"> </div> <div class="form-group"> <label for="moneda0" class="control-label">Moneda:</label> <input type="text" class="form-control" id="moneda0" name="moneda" required maxlength="3"> </div> <div class="form-group"> <label for="capital0" class="control-label">Capital:</label> <input type="text" class="form-control" id="capital0" name="capital" required maxlength="30"> </div> <div class="form-group"> <label for="continente0" class="control-label">Continente:</label> <input type="text" class="form-control" id="continente0" name="continente" required maxlength="15"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> <button type="submit" class="btn btn-primary">Guardar datos</button> </div> </div> </div> </div> </form> |
modal_modificar.php
Este archivo contiene el formulario html que permite cargar la información de forma dinámica dentro de la ventana modal Bootstrap.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<form id="actualidarDatos"> <div class="modal fade" id="dataUpdate" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="exampleModalLabel">Modificar país:</h4> </div> <div class="modal-body"> <div id="datos_ajax"></div> <div class="form-group"> <label for="codigo" class="control-label">Código:</label> <input type="text" class="form-control" id="codigo" name="codigo" required maxlength="2"> <input type="hidden" class="form-control" id="id" name="id"> </div> <div class="form-group"> <label for="nombre" class="control-label">Nombre:</label> <input type="text" class="form-control" id="nombre" name="nombre" required maxlength="45"> </div> <div class="form-group"> <label for="moneda" class="control-label">Moneda:</label> <input type="text" class="form-control" id="moneda" name="moneda" required maxlength="3"> </div> <div class="form-group"> <label for="capital" class="control-label">Capital:</label> <input type="text" class="form-control" id="capital" name="capital" required maxlength="30"> </div> <div class="form-group"> <label for="continente" class="control-label">Continente:</label> <input type="text" class="form-control" id="continente" name="continente" required maxlength="15"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> <button type="submit" class="btn btn-primary">Actualizar datos</button> </div> </div> </div> </div> </form> |
modal_eliminar.php
Contiene el formulario que se muestra al usuario a manera de confirmación al querer eliminar un registro de la base de datos.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<form id="eliminarDatos"> <div class="modal fade" id="dataDelete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <input type="hidden" id="id_pais" name="id_pais"> <h2 class="text-center text-muted">Estas seguro?</h2> <p class="lead text-muted text-center" style="display: block;margin:10px">Esta acción eliminará de forma permanente el registro. Deseas continuar?</p> <div class="modal-footer"> <button type="button" class="btn btn-lg btn-default" data-dismiss="modal">Cancelar</button> <button type="submit" class="btn btn-lg btn-primary">Aceptar</button> </div> </div> </div> </div> </form> |
js/ app.js
Este archivo se encarga de gestionar todas nuestras peticiones mediante jQuery.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
function load(page){ var parametros = {"action":"ajax","page":page}; $("#loader").fadeIn('slow'); $.ajax({ url:'paises_ajax.php', data: parametros, beforeSend: function(objeto){ $("#loader").html("<img src='loader.gif'>"); }, success:function(data){ $(".outer_div").html(data).fadeIn('slow'); $("#loader").html(""); } }) } $('#dataUpdate').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) // Botón que activó el modal var codigo = button.data('codigo') // Extraer la información de atributos de datos var id = button.data('id') // Extraer la información de atributos de datos var nombre = button.data('nombre') // Extraer la información de atributos de datos var moneda = button.data('moneda') // Extraer la información de atributos de datos var capital = button.data('capital') // Extraer la información de atributos de datos var continente = button.data('continente') // Extraer la información de atributos de datos var modal = $(this) modal.find('.modal-title').text('Modificar país: '+nombre) modal.find('.modal-body #id').val(id) modal.find('.modal-body #codigo').val(codigo) modal.find('.modal-body #nombre').val(nombre) modal.find('.modal-body #moneda').val(moneda) modal.find('.modal-body #capital').val(capital) modal.find('.modal-body #continente').val(continente) $('.alert').hide();//Oculto alert }) $('#dataDelete').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) // Botón que activó el modal var id = button.data('id') // Extraer la información de atributos de datos var modal = $(this) modal.find('#id_pais').val(id) }) $( "#actualidarDatos" ).submit(function( event ) { var parametros = $(this).serialize(); $.ajax({ type: "POST", url: "modificar.php", data: parametros, beforeSend: function(objeto){ $("#datos_ajax").html("Mensaje: Cargando..."); }, success: function(datos){ $("#datos_ajax").html(datos); load(1); } }); event.preventDefault(); }); $( "#guardarDatos" ).submit(function( event ) { var parametros = $(this).serialize(); $.ajax({ type: "POST", url: "agregar.php", data: parametros, beforeSend: function(objeto){ $("#datos_ajax_register").html("Mensaje: Cargando..."); }, success: function(datos){ $("#datos_ajax_register").html(datos); load(1); } }); event.preventDefault(); }); $( "#eliminarDatos" ).submit(function( event ) { var parametros = $(this).serialize(); $.ajax({ type: "POST", url: "eliminar.php", data: parametros, beforeSend: function(objeto){ $(".datos_ajax_delete").html("Mensaje: Cargando..."); }, success: function(datos){ $(".datos_ajax_delete").html(datos); $('#dataDelete').modal('hide'); load(1); } }); event.preventDefault(); }); |
En el archivo anterior se encuentra un fragmento de código que desencadena un evento al pulsar sobre el modal; y mediante los atributos de datos se encarga de enviar los datos correspondientes a la ventana modal. Dicha función fue realizada tomando como guía la documentación de bootstrap
paises_ajax.php
Este archivo se encarga de realizar una consulta a la base de datos MySQL, el cual es llamado vía AJAX desde el index.php mediante la función load() , la cual vimos anteriormente. Es en este archivo donde se envían los datos cargados dinámicamente al modal de boostrap haciendo de los atributos de datos.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<?php /*----------------------- Autor: Obed Alvarado http://www.obedalvarado.pw Fecha: 12-06-2015 Version de PHP: 5.6.3 ----------------------------*/ # conectare la base de datos $con=@mysqli_connect('localhost', 'root', '', 'test_modal'); if(!$con){ die("imposible conectarse: ".mysqli_error($con)); } if (@mysqli_connect_errno()) { die("Connect failed: ".mysqli_connect_errno()." : ". mysqli_connect_error()); } $action = (isset($_REQUEST['action'])&& $_REQUEST['action'] !=NULL)?$_REQUEST['action']:''; if($action == 'ajax'){ include 'pagination.php'; //incluir el archivo de paginación //las variables de paginación $page = (isset($_REQUEST['page']) && !empty($_REQUEST['page']))?$_REQUEST['page']:1; $per_page = 10; //la cantidad de registros que desea mostrar $adjacents = 4; //brecha entre páginas después de varios adyacentes $offset = ($page - 1) * $per_page; //Cuenta el número total de filas de la tabla*/ $count_query = mysqli_query($con,"SELECT count(*) AS numrows FROM countries "); if ($row= mysqli_fetch_array($count_query)){$numrows = $row['numrows'];} $total_pages = ceil($numrows/$per_page); $reload = 'index.php'; //consulta principal para recuperar los datos $query = mysqli_query($con,"SELECT * FROM countries order by countryName LIMIT $offset,$per_page"); if ($numrows>0){ ?> <table class="table table-bordered"> <thead> <tr> <th>Código</th> <th>Nombre</th> <th>Moneda</th> <th>Capital</th> <th>Continente</th> <th>Acciones</th> </tr> </thead> <tbody> <?php while($row = mysqli_fetch_array($query)){ ?> <tr> <td><?php echo $row['countryCode'];?></td> <td><?php echo $row['countryName'];?></td> <td><?php echo $row['currencyCode'];?></td> <td><?php echo $row['capital'];?></td> <td><?php echo $row['continentName'];?></td> <td> <button type="button" class="btn btn-info" data-toggle="modal" data-target="#dataUpdate" data-id="<?php echo $row['id']?>" data-codigo="<?php echo $row['countryCode']?>" data-nombre="<?php echo $row['countryName']?>" data-moneda="<?php echo $row['currencyCode']?>" data-capital="<?php echo $row['capital']?>" data-continente="<?php echo $row['continentName']?>"><i class='glyphicon glyphicon-edit'></i> Modificar</button> <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#dataDelete" data-id="<?php echo $row['id']?>" ><i class='glyphicon glyphicon-trash'></i> Eliminar</button> </td> </tr> <?php } ?> </tbody> </table> <div class="table-pagination pull-right"> <?php echo paginate($reload, $page, $total_pages, $adjacents);?> </div> <?php } else { ?> <div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <h4>Aviso!!!</h4> No hay datos para mostrar </div> <?php } } ?> |
pagination.php
Contiene un función para paginar los resultados de búsqueda. Este archivo es llamado desde el archivo paises_ajax.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<?php function paginate($reload, $page, $tpages, $adjacents) { $prevlabel = "‹ Anterior"; $nextlabel = "Siguiente ›"; $out = '<ul class="pagination pagination-large">'; // previous label if($page==1) { $out.= "<li class='disabled'><span><a>$prevlabel</a></span></li>"; } else if($page==2) { $out.= "<li><span><a href='javascript:void(0);' onclick='load(1)'>$prevlabel</a></span></li>"; }else { $out.= "<li><span><a href='javascript:void(0);' onclick='load(".($page-1).")'>$prevlabel</a></span></li>"; } // first label if($page>($adjacents+1)) { $out.= "<li><a href='javascript:void(0);' onclick='load(1)'>1</a></li>"; } // interval if($page>($adjacents+2)) { $out.= "<li><a>...</a></li>"; } // pages $pmin = ($page>$adjacents) ? ($page-$adjacents) : 1; $pmax = ($page<($tpages-$adjacents)) ? ($page+$adjacents) : $tpages; for($i=$pmin; $i<=$pmax; $i++) { if($i==$page) { $out.= "<li class='active'><a>$i</a></li>"; }else if($i==1) { $out.= "<li><a href='javascript:void(0);' onclick='load(1)'>$i</a></li>"; }else { $out.= "<li><a href='javascript:void(0);' onclick='load(".$i.")'>$i</a></li>"; } } // interval if($page<($tpages-$adjacents-1)) { $out.= "<li><a>...</a></li>"; } // last if($page<($tpages-$adjacents)) { $out.= "<li><a href='javascript:void(0);' onclick='load($tpages)'>$tpages</a></li>"; } // next if($page<$tpages) { $out.= "<li><span><a href='javascript:void(0);' onclick='load(".($page+1).")'>$nextlabel</a></span></li>"; }else { $out.= "<li class='disabled'><span><a>$nextlabel</a></span></li>"; } $out.= "</ul>"; return $out; } ?> |
agregar.php
Este archivo de encarga de agregar un registro a la base de datos el cual recibe los datos mediante AJAX desde la ventana modal.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<?php /*----------------------- Autor: Obed Alvarado http://www.obedalvarado.pw Fecha: 27-02-2016 Version de PHP: 5.6.3 ----------------------------*/ # conectare la base de datos $con=@mysqli_connect('localhost', 'root', '', 'test_modal'); if(!$con){ die("imposible conectarse: ".mysqli_error($con)); } if (@mysqli_connect_errno()) { die("Connect failed: ".mysqli_connect_errno()." : ". mysqli_connect_error()); } /*Inicia validacion del lado del servidor*/ if (empty($_POST['codigo'])){ $errors[] = "Código vacío"; } else if (empty($_POST['nombre'])){ $errors[] = "Nombre vacío"; } else if (empty($_POST['moneda'])){ $errors[] = "Moneda vacío"; } else if (empty($_POST['capital'])){ $errors[] = "Capital vacío"; } else if (empty($_POST['continente'])){ $errors[] = "Continente vacío"; } else if ( !empty($_POST['codigo']) && !empty($_POST['nombre']) && !empty($_POST['moneda']) && !empty($_POST['capital']) && !empty($_POST['continente']) ){ // escaping, additionally removing everything that could be (html/javascript-) code $codigo=mysqli_real_escape_string($con,(strip_tags($_POST["codigo"],ENT_QUOTES))); $nombre=mysqli_real_escape_string($con,(strip_tags($_POST["nombre"],ENT_QUOTES))); $moneda=mysqli_real_escape_string($con,(strip_tags($_POST["moneda"],ENT_QUOTES))); $capital=mysqli_real_escape_string($con,(strip_tags($_POST["capital"],ENT_QUOTES))); $continente=mysqli_real_escape_string($con,(strip_tags($_POST["continente"],ENT_QUOTES))); $sql="INSERT INTO countries (countryCode, countryName, currencyCode, capital, continentName) VALUES ('".$codigo."','".$nombre."','".$moneda."', '".$capital."','".$continente."' )"; $query_update = mysqli_query($con,$sql); if ($query_update){ $messages[] = "Los datos han sido guardados satisfactoriamente."; } else{ $errors []= "Lo siento algo ha salido mal intenta nuevamente.".mysqli_error($con); } } else { $errors []= "Error desconocido."; } if (isset($errors)){ ?> <div class="alert alert-danger" role="alert"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Error!</strong> <?php foreach ($errors as $error) { echo $error; } ?> </div> <?php } if (isset($messages)){ ?> <div class="alert alert-success" role="alert"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>¡Bien hecho!</strong> <?php foreach ($messages as $message) { echo $message; } ?> </div> <?php } ?> |
modificar.php
Este archivo de encarga de modificar los datos, el cual recibe los datos mediante AJAX desde una ventana modal.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<?php /*----------------------- Autor: Obed Alvarado http://www.obedalvarado.pw Fecha: 27-02-2016 Version de PHP: 5.6.3 ----------------------------*/ # conectare la base de datos $con=@mysqli_connect('localhost', 'root', '', 'test_modal'); if(!$con){ die("imposible conectarse: ".mysqli_error($con)); } if (@mysqli_connect_errno()) { die("Connect failed: ".mysqli_connect_errno()." : ". mysqli_connect_error()); } /*Inicia validacion del lado del servidor*/ if (empty($_POST['id'])) { $errors[] = "ID vacío"; } else if (empty($_POST['codigo'])){ $errors[] = "Código vacío"; } else if (empty($_POST['nombre'])){ $errors[] = "Nombre vacío"; } else if (empty($_POST['moneda'])){ $errors[] = "Moneda vacío"; } else if (empty($_POST['capital'])){ $errors[] = "Capital vacío"; } else if (empty($_POST['continente'])){ $errors[] = "Continente vacío"; } else if ( !empty($_POST['id']) && !empty($_POST['codigo']) && !empty($_POST['nombre']) && !empty($_POST['moneda']) && !empty($_POST['capital']) && !empty($_POST['continente']) ){ // escaping, additionally removing everything that could be (html/javascript-) code $codigo=mysqli_real_escape_string($con,(strip_tags($_POST["codigo"],ENT_QUOTES))); $nombre=mysqli_real_escape_string($con,(strip_tags($_POST["nombre"],ENT_QUOTES))); $moneda=mysqli_real_escape_string($con,(strip_tags($_POST["moneda"],ENT_QUOTES))); $capital=mysqli_real_escape_string($con,(strip_tags($_POST["capital"],ENT_QUOTES))); $continente=mysqli_real_escape_string($con,(strip_tags($_POST["continente"],ENT_QUOTES))); $id=intval($_POST['id']); $sql="UPDATE countries SET countryCode='".$codigo."', countryName='".$nombre."', currencyCode='".$moneda."', capital='".$capital."', continentName='".$continente."' WHERE id='".$id."'"; $query_update = mysqli_query($con,$sql); if ($query_update){ $messages[] = "Los datos han sido actualizados satisfactoriamente."; } else{ $errors []= "Lo siento algo ha salido mal intenta nuevamente.".mysqli_error($con); } } else { $errors []= "Error desconocido."; } if (isset($errors)){ ?> <div class="alert alert-danger" role="alert"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Error!</strong> <?php foreach ($errors as $error) { echo $error; } ?> </div> <?php } if (isset($messages)){ ?> <div class="alert alert-success" role="alert"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>¡Bien hecho!</strong> <?php foreach ($messages as $message) { echo $message; } ?> </div> <?php } ?> |
eliminar.php
Este archivo contiene las instruciones necesarias para borrar un registro de nuestra base de datos
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<?php /*----------------------- Autor: Obed Alvarado http://www.obedalvarado.pw Fecha: 27-02-2016 Version de PHP: 5.6.3 ----------------------------*/ # conectare la base de datos $con=@mysqli_connect('localhost', 'root', '', 'test_modal'); if(!$con){ die("imposible conectarse: ".mysqli_error($con)); } if (@mysqli_connect_errno()) { die("Connect failed: ".mysqli_connect_errno()." : ". mysqli_connect_error()); } /*Inicia validacion del lado del servidor*/ if (empty($_POST['id_pais'])){ $errors[] = "ID vacío"; } else if ( !empty($_POST['id_pais']) ){ // escaping, additionally removing everything that could be (html/javascript-) code $id_pais=intval($_POST['id_pais']); $sql="DELETE FROM countries WHERE id='".$id_pais."'"; $query_delete = mysqli_query($con,$sql); if ($query_delete){ $messages[] = "Los datos han sido eliminados satisfactoriamente."; } else{ $errors []= "Lo siento algo ha salido mal intenta nuevamente.".mysqli_error($con); } } else { $errors []= "Error desconocido."; } if (isset($errors)){ ?> <div class="alert alert-danger" role="alert"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Error!</strong> <?php foreach ($errors as $error) { echo $error; } ?> </div> <?php } if (isset($messages)){ ?> <div class="alert alert-success" role="alert"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>¡Bien hecho!</strong> <?php foreach ($messages as $message) { echo $message; } ?> </div> <?php } ?> |
Bien esto sería todo lo que respecta a el envío de datos dinámicamente a una ventana modal con bootstrap, PHP, MySQL y jQuery. Puedes echar un vistazo a la demostración de este tutorial o si deseas descargar los archivos utilizados para este tutorial y hacer las pruebas tu mismo sigue los enlaces siguientes: