pertama download versi codeigniter 3.1.6 karena di tutor ini saya menggunakan versi terbaru dari codeigniter itu sendiri ,
berikut LINK : https://codeigniter.com/download
config terlebih dahulu base_url , database nya , dan autoload nya serta route nya jangan sampai lupa ya
yang terdapat di folder application / config /
autoload.php
$autoload['libraries'] = array('database','session','form_validation','pagination','user_agent');
/*
| -------------------------------------------------------------------
| Auto-load Helper Files
| -------------------------------------------------------------------
| Prototype:
|
| $autoload['helper'] = array('url', 'file');
*/
$autoload['helper'] = array('url','file','form','url_helper');
config.php
$config['base_url'] = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") ? "https" : "http"); $config['base_url'] .= "://".$_SERVER['HTTP_HOST']; $config['base_url'] .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);
/*
|--------------------------------------------------------------------------
| Index File
|--------------------------------------------------------------------------
|
| Typically this will be your index.php file, unless you've renamed it to
| something else. If you are using mod_rewrite to remove the page set this
| variable so that it is blank.
|
*/
$config['index_page'] = '';
database.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$active_group = 'default';
$query_builder = TRUE;
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'nama database',-->nama database nya agan/sista
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);
!------------------- tahap configurasi selesai ----------------!
1. buat controller terlebih dahulu dengan nama bebas sih apa aja yang agan dan sista mau .
application/controller/Firstpage.php
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Firstpage extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->database();
//models connection back-end
$this->load->model('M_settings', 'settings');// jangan lupa load model nya ya gan
$this->load->helper(array('url'));
//end models connection back-end
}
public function index() {
$this->data['title_head'] = "example adding";
$this->data['header'] = 'adding use angular js';
$this->data['subheader'] = 'example';
$this->data['page'] = 'website';
//--- main content
$this->load->view('v_adding', $this->data);
//--- end main content
}
public function get_data() {
$data = $this->settings->get_main_data();
if(empty($data)){
} else {
$i = 0;
foreach ($data as $list) {
$result[$i]['id'] = $list->id;
$result[$i]['title'] = $list->title;
$result[$i]['description'] = (strlen(strip_tags($list->description)) > 80) ? substr(strip_tags($list->description),0,80).' . . . ' : $list->description;
$i++;
}
echo json_encode($result);
}
}
public function add() {
$postdata = json_decode(file_get_contents("php://input"), true);
$data = $this->settings->save($postdata);
if($data) {
echo "success";
} else {
echo "failure";
}
}
public function get_search() {
$data = $this->settings->get_search_data($this->uri->segment(3));
if(empty($data)){
} else {
$i = 0;
foreach ($data as $list) {
$result[$i]['id'] = $list->id;
$result[$i]['title'] = $list->title;
$result[$i]['description'] = (strlen(strip_tags($list->description)) > 80) ? substr(strip_tags($list->description),0,80).' . . . ' : $list->description;
$i++;
}
echo json_encode($result);
}
}
public function get_id($id) {
$data = $this->settings->get_by_id($id);
echo json_encode($data);
}
public function edit($id)
{
$postdata = json_decode(file_get_contents("php://input"), true);
$data = $this->settings->update(array('id' => $id), $postdata);
if($data) {
echo "success";
} else {
echo "failure";
}
}
public function delete($id) {
$this->settings->delete_data($id);
echo json_encode(array("status" => TRUE));
}
public function delete_check_data() {
$val = json_decode(file_get_contents("php://input"), true);
$i = 0;
foreach ($val as $list) {
$data[$i] = $this->settings->delete_multi_data($list);
$i++;
}
echo json_encode(array("status" => TRUE));
}
}
2. tahap kedua membuat models untuk pengambilan database nya berikut source code nya :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
// -- settings -- \\
class M_settings extends CI_Model {
//-- settings page --\\
// function
function get_main_data()
{
$this->db->from('unit_testing');
$query = $this->db->get();
return $query->result();
}
function save($request)
{
$timezone = new DateTimeZone("Asia/Jakarta");//untuk menyesuaikan dengan jam indonesia
$dat = new DateTime();//untuk menyesuaikan dengan jam indonesia
$dat->setTimezone($timezone);//untuk menyesuaikan dengan jam indonesia
$date = date('Y-m-d');
$time = $dat->format('H:i:s'); // format jam dipanggil disini
$insertStatus = $this->db->insert('unit_testing',array('title'=>$request['title'],'description'=>$request['description']));
return $insertStatus;
}
function get_by_id($id)
{
$this->db->where('a.id', $id);
$this->db->from('unit_testing as a');
$this->db->select('a.*');
$query = $this->db->get();
return $query->row();
}
function update($where, $request){
$timezone = new DateTimeZone("Asia/Jakarta");//untuk menyesuaikan dengan jam indonesia
$dat = new DateTime();//untuk menyesuaikan dengan jam indonesia
$dat->setTimezone($timezone);//untuk menyesuaikan dengan jam indonesia
$date = date('Y-m-d');
$time = $dat->format('H:i:s'); // format jam dipanggil disini
$this->db->update('unit_testing', array('title'=>$request['title'],'description'=>$request['description'], 'date_modified'=>$date), $where);
return $this->db->affected_rows();
}
function get_search_data($key)
{
$this->db->from('unit_testing as a');
$this->db->select('a.*');
$this->db->like('a.title', $key);
$this->db->or_like('a.description', $key);
$query = $this->db->get();
return $query->result();
}
function delete_data($id)
{
$this->db->where('id', $id);
$this->db->delete('unit_testing');
}
function delete_multi_data($id)
{
$this->db->where('id', $id);
$this->db->delete('unit_testing');
}
}
3. tahap ketiga adalah membuat view nya serta javascriptnya untuk menyimpan data :
<!doctype html>
<html lang="en">
<head>
<title>adding use angular js</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!--alerts CSS -->
<link href="<?=base_url("assets/back/");?>plugins/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="<?=base_url("assets/back/");?>plugins/sweetalert2/sweetalert2.min.js"></script>
<script>var asset_url="<?=base_url();?>assets/back"; var base_url ="<?=base_url();?>firstpage/";</script>
<script src="<?=base_url("assets/back/");?>plugins/angularjs/angular.min.js"></script>
<script src="<?=base_url("assets/back/");?>plugins/jquery/jquery.validate.min.js"></script>
<script src="<?=base_url("assets/back/");?>plugins/angularjs/angular-validate.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div ng-app="app" ng-controller="dataController" ng-init="showdata()" class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">adding data</h4>
<div class="row">
<div class="col-md-6">
<p class="text-muted m-t-0">
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">aksi</button>
<div class="dropdown-menu animated flipInX" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 36px, 0px); top: 0px; left: 0px; will-change: transform;">
<a class="dropdown-item" ng-click="showme=true">menambahkan data</a>
</div>
</div>
</p>
</div>
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" ng-model="enteredValue" placeholder="pencarian masukkan kata disini . . .">
<span class="input-group-btn"><button ng-Click="findValue(enteredValue)" class="btn btn-default" type="button">search</button></span>
</div>
</div>
</div>
<div id="formAdd" class="row" ng-show="showme">
<div class="col-8">
<form name="myForm" class="form-horizontal" ng-submit="submitForm()" ng-validate="validationOptions">
<div class="form-group">
<label for="title" class="control-label col-xs-2">title</label>
<div class="col-xs-10">
<input type="text" name="title" class="form-control" id="title" placeholder="title" ng-model="data.title">
<span class="help-block text-danger"></span>
</div>
</div>
<div class="form-group">
<label for="description" class="control-label col-xs-2">description</label>
<div class="col-xs-10">
<textarea name="description" class="form-control" id="description" placeholder="description" ng-model="data.description"></textarea>
<span class="help-block text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button ng-disabled="myForm.example.$dirty && myForm.example.$invalid ||
myForm.name.$dirty && myForm.name.$invalid" type="submit" class="btn btn-primary">simpan</button>
<a href="javascript:void(0);" class="btn btn-danger" ng-click="showme=false">batal</a>
<a href="javascript:void(0);" class="btn btn-warning" ng-click="resetForm()">reset</a>
</div>
</div>
</form>
</div>
</div>
<div class="table-responsive">
<a href="" class="btn btn-primary" ng-click="delete_check(post)">hapus yang dipilih</a>
<hr>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>title</th>
<th>description</th>
<th class="text-nowrap">aksi</th>
</tr>
</thead>
<tbody>
<tr ng-if="post.length == 0">
<td colspan="4" class="text-center">tidak ada data</td>
</tr>
<tr id="post-array" ng-repeat="x in post | pagination: curPage * pageSize | limitTo: pageSize">
<td>
<div style="width:20px !important;" class="demo-checkbox">
<input id="basic_checkbox_{{ x.id }}" type="checkbox" ng-true-value="{{ x.id }}" ng-false-value="''" ng-model="x.selected" />
<label for="basic_checkbox_{{ x.id }}"></label>
</div>
</td>
<td>{{ x.title }}</td>
<td>{{ x.description }}</td>
<td class="text-nowrap">
<a href="#" data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data"> edit</a>
<a href="#" ng-click="delete(x.id)" data-toggle="tooltip" data-original-title="close"> hapus</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-md-6">
<div class="m-t-30">
<nav ng-show="post.length" aria-label="page navigation example">
<ul class="pagination">
<li>
<button type="button" class="page-link" ng-disabled="curPage == 0" ng-click="curPage=curPage-1"> < PREV</button>
</li>
<li>
<button class="page-link"> page {{curPage + 1}} of {{ numberOfPages() }} </button>
</li>
<li>
<button type="button" class="page-link" ng-disabled="curPage >= post.length/pageSize - 1" ng-click="curPage = curPage+1">NEXT ></button>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- edit modal -->
<div class="modal fade" id="edit-data" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="POST" name="editItem" role="form" ng-submit="saveEdit()" ng-validate="validationOptions">
<input ng-model="form.id" type="hidden" name="id" />
<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="myModalLabel">ubah data</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="form-group">
<label for="title" class="control-label col-xs-2">title</label>
<div class="col-xs-10">
<input type="text" name="title" class="form-control" id="title" placeholder="title" ng-model="form.title">
<span class="help-block text-danger"></span>
</div>
</div>
<div class="form-group">
<label for="description" class="control-label col-xs-2">description</label>
<div class="col-xs-10">
<textarea name="description" class="form-control" id="description" placeholder="description" ng-model="form.description"></textarea>
<span class="help-block text-danger"></span>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">tutup</button>
<button type="submit" ng-disabled="editItem.$invalid" class="btn btn-primary create-crud">simpan</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- edit modal -->
</div>
</div>
</div>
</div>
</body>
</html>
4. membuat javascriptnya save dengan angularjs untuk disisi client nya
saya cuma ga mau ribet sih hehee kode script dibawah ini saya taro di bagian bawah end tag </body> - > contoh </body><script>kode</script> kalo mau dibuat dalam file js juga boleh
<script>
var app = angular.module("app", ['ngValidate']).config(function($validatorProvider) {
$validatorProvider.setDefaults({
errorElement: 'span',
errorClass: 'help-block text-danger'
});
});
app.controller("dataController", function($scope, $http) {
$scope.validationOptions = {
rules: {
title: {
required: true
},
description: {
required: true
}
},
messages: {
title: {
required: "title required"
},
description: {
required: "description required"
}
}
};
$scope.showdata = function() {
$http.get(base_url + 'get_data', {}).then(function post(response) {
$scope.curPage = 0;
$scope.pageSize = 6;
$scope.post = response.data;
$scope.numberOfPages = function() {
return Math.ceil($scope.post.length / $scope.pageSize);
};
});
}
$scope.findValue = function(enteredValue) {
$http.get(base_url + 'get_search/' + enteredValue, {}).then(function post(response) {
$scope.curPage = 0;
$scope.pageSize = 6;
$scope.post = response.data;
$scope.numberOfPages = function() {
return Math.ceil($scope.post.length / $scope.pageSize);
};
});
};
$scope.delete = function($id) {
$http.get(base_url + 'delete/' + $id).
then(function(data) {
//either this
console.log(data);
$scope.showdata();
//or this
swal({
type: 'success',
title: 'proses berhasil',
text: 'menghapus data',
confirmButtonText: 'tutup'
})
});
}
$scope.edit = function($id) {
$http.get(base_url + 'get_id/' + $id, {}).then(function form(response) {
//either this
console.log(response.data);
$scope.form = response.data;
//or this
});
}
$scope.saveEdit = function() {
if ($scope.editItem.validate()) {
$http({
method: 'post',
url: base_url + 'edit/' + $scope.form.id,
data: $scope.form, //forms testi object
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function(data) {
//either this
$(".modal").modal("hide");
$scope.showdata();
//or this
swal({
type: 'success',
title: 'proses berhasil',
text: 'ubah data',
confirmButtonText: 'tutup'
})
});
}
}
$scope.delete_check = function(list) {
var itemList = [];
angular.forEach(list, function(value, key) {
if (list[key].selected) {
itemList.push(list[key].selected);
}
});
//console.log(itemList.length);
$http.post(base_url + 'delete_check_data/', itemList).
then(function(data) {
//either this
$scope.showdata();
//or this
swal({
type: 'success',
title: 'proses berhasil',
text: 'menghapus data',
confirmButtonText: 'tutup'
})
});
}
$scope.data = {
title: '',
description: ''
};
$scope.resetForm = function() {
$scope.data = {};
};
$scope.data = {};
$scope.submitForm = function() {
if ($scope.myForm.validate()) {
$http({
method: 'post',
url: base_url + 'add',
data: $scope.data, //forms testi object
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function(data) {
//either this
$scope.showdata();
$scope.data = {};
$scope.showme = false;
//or this
swal({
type: 'success',
title: 'proses berhasil',
text: 'buat data baru',
confirmButtonText: 'tutup'
})
});
}
}
});
app.filter('pagination', function() {
return function(input, start) {
if (!input || !input.length) {
return;
}
start = +start; //parse to int
return input.slice(start);
}
});
</script>
jika tutorial ini susah untuk anda mengerti comment saja untuk download source code full nya agan dan sista ...
