As developers we just Create, Read, Edit, Delete for me now on, but will be more than that cause i'm still newbie, so let me give short tutorial about show data in modal bootsrap using framework codeigniter, check this out
First create database blog and also table list_student
-- phpMyAdmin SQL Dump
-- version 4.2.11
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: 13 Nov 2015 pada 11.15
-- Versi Server: 5.6.21
-- PHP Version: 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 */;
--
-- Database: `blog`
--
-- --------------------------------------------------------
--
-- Struktur dari tabel `list_student`
--
CREATE TABLE IF NOT EXISTS `list_student` (
`id` int(11) NOT NULL,
`title` varchar(250) NOT NULL,
`desc` text NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;
--
-- Dumping data untuk tabel `list_student`
--
INSERT INTO `list_student` (`id`, `title`, `desc`) VALUES
(1, 'This is Student Title 1', 'Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.'),
(2, 'This is Student Title 2', 'Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `list_student`
--
ALTER TABLE `list_student`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `list_student`
--
ALTER TABLE `list_student`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=3;
/*!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 */;
Then create controller like this
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Modal extends CI_Controller
{
public function index()
{
$data['modal'] = $this->modal_bootsrap->modal();
$this->load->view('modal', $data);
}
public function detail()
{
$id = $this->input->post('id');
$data['detail'] = $this->modal_bootsrap->detail($id);
$this->load->view('detail', $data);
}
}
Here is view came function index
<html>
<head>
<title>CRUD DROPZONE</title>
<link href="<?php echo base_url() ?>asset/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript'>
//auto complete depan
var site = "<?php echo site_url();?>";
var base_url = '<?=base_url()?>';
</script>
<script src="<?php echo base_url() ?>asset/js/jquery.min.js"></script>
<script src="<?php echo base_url() ?>asset/js/bootstrap.min.js"></script>
<script src="<?php echo base_url() ?>asset/js/dropzone.js"></script>
<script src="<?php echo base_url() ?>asset/js/ajax.js"></script>
<script src="<?php echo base_url() ?>asset/js/ajaxdropzone.js"></script>
<link href="<?php echo base_url()?>asset/css/bootstrap.min.css" rel="stylesheet">
<link href='<?php echo base_url();?>asset/css/dropzone.css' rel='stylesheet' />
</head>
<body>
<?php
foreach ($modal->result() as $row) { ?>
<a href="" class="btn btn-lg btn-success" data-toggle="modal" href="#basicModal" data-whatever="<?php echo $row->id ?>"><?php echo $row->title ?></a>
<br>
<br>
<?php
} ?>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title" id="myModalLabel">
Modal title</h4>
</div>
<div class="modal-body" >
<div id="detailstudent">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Model is here
<?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');
class modal_bootsrap extends CI_Model
{
function modal()
{
return $this->db->get('list_student'); // Produces: SELECT * FROM mytable
}
public function detail()
{
$id = $this->input->post('id');
return $this->db->query("SELECT * FROM list_student where id='$id'");
}
}
Then don't forget making ajax cause it will handle data in modal bootsrap which we load file inside modal with tag
id="detailstudent"
$(function() {
$('#basicModal').on('shown.bs.modal', function(event) {
var button = $(event.relatedTarget)
var id = button.data('whatever')
var modal = $(this);
var dataString = 'id=' + id;
$.ajax({
type:"POST",
url: base_url + "modal/detail",
data: dataString,
success: function(data) {
//console.log(data);
$("#detailstudent").html(data);
},
error: function(jqXHR, exception) {
alert('error ajax');
}
})
});
});
This tutorial came from
here , oh yea almost forget to configuration autoload.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
/*
| -------------------------------------------------------------------
| AUTO-LOADER
| -------------------------------------------------------------------
| This file specifies which systems should be loaded by default.
|
| In order to keep the framework as light-weight as possible only the
| absolute minimal resources are loaded by default. For example,
| the database is not connected to automatically since no assumption
| is made regarding whether you intend to use it. This file lets
| you globally define which systems you would like loaded with every
| request.
|
| -------------------------------------------------------------------
| Instructions
| -------------------------------------------------------------------
|
| These are the things you can load automatically:
|
| 1. Packages
| 2. Libraries
| 3. Drivers
| 4. Helper files
| 5. Custom config files
| 6. Language files
| 7. Models
|
*/
/*
| -------------------------------------------------------------------
| Auto-load Packages
| -------------------------------------------------------------------
| Prototype:
|
| $autoload['packages'] = array(APPPATH.'third_party', '/usr/local/shared');
|
*/
$autoload['packages'] = array();
/*
| -------------------------------------------------------------------
| Auto-load Libraries
| -------------------------------------------------------------------
| These are the classes located in the system/libraries folder
| or in your application/libraries folder.
|
| Prototype:
|
| $autoload['libraries'] = array('database', 'email', 'session');
|
| You can also supply an alternative library name to be assigned
| in the controller:
|
| $autoload['libraries'] = array('user_agent' => 'ua');
*/
$autoload['libraries'] = array('database', 'email', 'session');
/*
| -------------------------------------------------------------------
| Auto-load Drivers
| -------------------------------------------------------------------
| These classes are located in the system/libraries folder or in your
| application/libraries folder within their own subdirectory. They
| offer multiple interchangeable driver options.
|
| Prototype:
|
| $autoload['drivers'] = array('cache');
*/
$autoload['drivers'] = array();
/*
| -------------------------------------------------------------------
| Auto-load Helper Files
| -------------------------------------------------------------------
| Prototype:
|
| $autoload['helper'] = array('url', 'file');
*/
$autoload['helper'] = array('url', 'file');
/*
| -------------------------------------------------------------------
| Auto-load Config files
| -------------------------------------------------------------------
| Prototype:
|
| $autoload['config'] = array('config1', 'config2');
|
| NOTE: This item is intended for use ONLY if you have created custom
| config files. Otherwise, leave it blank.
|
*/
$autoload['config'] = array();
/*
| -------------------------------------------------------------------
| Auto-load Language files
| -------------------------------------------------------------------
| Prototype:
|
| $autoload['language'] = array('lang1', 'lang2');
|
| NOTE: Do not include the "_lang" part of your file. For example
| "codeigniter_lang.php" would be referenced as array('codeigniter');
|
*/
$autoload['language'] = array();
/*
| -------------------------------------------------------------------
| Auto-load Models
| -------------------------------------------------------------------
| Prototype:
|
| $autoload['model'] = array('first_model', 'second_model');
|
| You can also supply an alternative model name to be assigned
| in the controller:
|
| $autoload['model'] = array('first_model' => 'first');
*/
$autoload['model'] = array('dropzone_model','modal_bootsrap');
Note
- I use codeignter without index.php so you need to remove index.php first to make all working fine
- You can download database at here
- File is here
The way you download, please wait the click arrow in the top right then you can get file,
If you have something to disscuss feel free to drop comment here,
Thanks for visiting me
