Localhost takes long time to load - sql

Is there any solution to fix the localhost that runs too slow? I use XAMPP v 3.2.2.
I made highcharts with Yii 2.0, but when I try to load it http://127.0.0.1/yii2-app-basic/web/index.php?r=highcharts/index, localhost or 127.0.0.1 takes time more than 20 minutes to load the highchart. I have edited my
`httpd.conf.
I change
ServerName Localhost to ServerName 127.0.0.1:80.
I also have edited
my.ini.
I uncommented
bind-address="127.0.0.1"
I edited
config.inc.php
I change
$cfg['Servers'][$i]['host'] = 'localhost' to $cfg['Servers'][$i]['host'] = '127.0.0.1'
but localhost still being slow.
This is my highchart code in Yii 2.0
HighchartsController.php
<?php
namespace app\controllers;
use yii\web\Controller;
use app\models\Jeniskelaminreal;
use yii\helpers\Json;
class HighchartsController extends Controller
{
public function actionIndex()
{
$masuk= Jeniskelaminreal::find();
$awal = $masuk->orderBy('TahunMasuk ASC')->one()->TahunMasuk;
$akhir = $masuk->orderBy('TahunMasuk DESC')->one()->TahunMasuk;
// $data = $masuk->all();
$arr_l = [];
$arr_p = [];
$tahun = [];
for($i=$awal;$i<=$akhir;$i++){
if($awal == $i){
$jum_l = count($masuk->where(['TahunMasuk'=>$awal,'JenisKelamin'=>'Perempuan'])->all());
$jum_p = count($masuk->where(['TahunMasuk'=>$awal,'JenisKelamin'=>'Laki-laki'])->all());
}elseif($i > $awal && $i <= $akhir){
$jum_l = count($masuk->where(['TahunMasuk'=>$i,'JenisKelamin'=>'Perempuan'])->all());
$jum_p = count($masuk->where(['TahunMasuk'=>$i,'JenisKelamin'=>'Laki-laki'])->all());
}
array_push($arr_l,$jum_l);
array_push($arr_p,$jum_p);
array_push($tahun,$i);
}
$data['tahun'] = json_encode($tahun);
$data['data_p'] = json_encode($arr_p);
$data['data_l'] = json_encode($arr_l);
return $this->render('index',$data);
}
/*public function actionData()
{
return $this->render('data');
}*/
}
index.php
<?php
use app\assets\HighchartsAsset;
HighchartsAsset::register($this);
$this->title = 'Highcharts Test';
?>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel">
<div id="my-chart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<?php $this->registerJs("
$(function () {
$('#my-chart').highcharts({
title: {
text: 'Jenis Kelamin',
x: -20 //center
},
xAxis: {
categories: $tahun
},
yAxis: {
title: {
text: 'Jumlah'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Laki-laki',
data: $data_l
}, {
name: 'Perempuan',
data: $data_p
}]
});
});
")?>
</div>
</div>
I think localhost becomes slow because I have tables that consist of many data records. So here I give you the information about the table that I joined.
I made view table "JeniskelaminReal". This is the query
CREATE ALGORITHM=UNDEFINED DEFINER=`root`#`localhost` SQL SECURITY DEFINER VIEW `jeniskelaminreal` AS select
`ipbmst_fakultas`.`Kode` AS `Fakultas`,
`ipbmst_departemen`.`Kode` AS `Departemen`,
`akdmst_mayor`.`Nama` AS `Mayor`,
`akdmst_mahasiswamagister1`.`NIM` AS `NIM`,
`ipbref_jeniskelamin`.`nama` AS `JenisKelamin`,
timestampdiff(YEAR,`ipbmst_orang`.`TanggalLahir`,now()) AS `Usia`,
`akdmst_mahasiswamagister1`.`TahunMasuk` AS `TahunMasuk`
from (((((`akdmst_mahasiswamagister1`
left join `akdmst_mayor` on((`akdmst_mahasiswamagister1`.`MayorID` = `akdmst_mayor`.`ID`)))
left join `ipbmst_departemen` on((`akdmst_mayor`.`DepartemenID` = `ipbmst_departemen`.`ID`)))
left join `ipbmst_fakultas` on((`ipbmst_departemen`.`FakultasID` = `ipbmst_fakultas`.`ID`)))
left join `ipbmst_orang` on((`akdmst_mahasiswamagister1`.`NIM` = convert(`ipbmst_orang`.`NIMS2Key` using utf8))))
left join `ipbref_jeniskelamin` on((`ipbmst_orang`.`JenisKelaminID` = `ipbref_jeniskelamin`.`id`))) ;
ipbmst_fakultas consists of 21 rows data
ipbmst_departemen consists of 46 rows data
akdmst_mayor consists of 166 rows data
akdmst_mahasiswamagister 1 consists of 7232 rows data
ipbref_jeniskelamin consists of 3 rows data
and this is the table that consists of so many data
ipbmst_orang consists of 70915
I'm really sorry if I put so many information here. What may I do to solve that problem? Thank you in advance

is it working while opening other pages?
try changing listening port from 80 to 8080.
and also try disableing Ipv6.

Related

trying to get an objects key which is a 'letters + counter number' variable but it won't work

I know tis might be a silly problem but I'm not sure how to frame this line of code to do what I need. I'm using Vue CLI and I have a some objects within an array in my data. one of those objects have several image links with key that goes -> img1 : ./link, img2: ./link2. In my function i need to change the target elements source to the next image i.e from img1 to img2 where I have a counter that stores the number that i want img to change to. however the results only show NaN.
here is my some HTML:
<img #click="storyboard" v-else :src="slide.img1" />
<div class="counter hide">
<p>{{ counter }} / 5</p>
</div>
here is some JS
data() {
return {
slides: [
{ title: 'Landing Page', img1: require("../assets/wadah/proposal.mp4"), info: "Wadah Archive is an alternative museum where everyday artefacts are given meaning through crowdsourced nostalgia. The online archive stresses on the idea that the stories and conversations about the artefact by people visiting the archive should be a part of the artefact itself. It is a reflection on traditional methods of preserving and displaying objects through proposing an alternative navigation system by translating physical artefacts into a digital space.", makeSmall: false
}, {
title: "Interacting with 3D objects", img1: require("../assets/wadah/pinStill.jpg"), info: "dummydata", makeSmall: false
}, {
title: "Designing Pins and Signage", img1: require("../assets/wadah/pins.png"), info: "dummydata", makeSmall: true
},{
title: "Home and Index Navigation", img1: require("../assets/wadah/home1.jpg"), img2: require("../assets/wadah/home3.jpg"), img3: require("../assets/wadah/home2.jpg"), img4: require("../assets/wadah/index.jpg"), img5: require("../assets/wadah/index2.jpg"), info: "dummydata", makeSmall: false
},{
title: "User Flow", img1: require("../assets/wadah/wireflow.png"), info: "dummydata", makeSmall: false
},
],
visibleSlide: 0,
counter: 1
}
}
methods: {
storyboard(event) {
if (this.visibleSlide === 3) {
let ele = event.target
this.counter++
ele.src = this.slides[3].img + this.counter
// console.log(this.slides[3].img + 2)
// console.log(ele.src, this.counter)
}
}
}
const obj = {
title: "Home and Index Navigation",
img1: "../assets/wadah/home1.jpg",
img2: "../assets/wadah/home3.jpg",
img3: "../assets/wadah/home2.jpg",
img4: "../assets/wadah/index.jpg",
}
let counter = 2
console.log("Incorrect:", obj.img + counter) // obj.img does not exists = undefined
console.log("Correct:", obj["img"+counter])

How to show icon next to value in cloumn in aurelia slickgrid/slickgrid?

I want to show en edit icon next to value in Amount column. This is because the Amount column is actually editable.But to give that as a hint to user, i want to show some edit icon next to it. How to do that in aurelia slickgrid?
Or maybe there is a way to highlight a field on hover ?
I am using aurelia slickgrid and looking if there is some option in aurelia slickgrid itself.
Go to the aurelia slickgrid example link and click on the link of example's source code
When you open it, there is a method called defineGrids
/* Define grid Options and Columns */
defineGrids() {
this.columnDefinitions1 = [
...,
...,
...,
...,
...,
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true, minWidth: 100 }
];
... rest of the code
}
The row with id effort-driven is where the icons are placed. On the other words, when you push a data collection(usually array of json object) to the table, values of the data objects with key name effort-driven are given to column with id effort-driven. Furthermore, for each passed value to the column, the method myCustomCheckmarkFormatter reformat it(for example 0 -> false or null -> not filled) and place it to the corresponding table's cell. look at the below method:
// create my custom Formatter with the Formatter type
const myCustomCheckmarkFormatter: Formatter<DataItem> = (_row, _cell, value) => {
// you can return a string of a object (of type FormatterResultObject), the 2 types are shown below
return value ? `<i class="fa fa-fire red" aria-hidden="true"></i>` : { text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', addClasses: 'lightblue', toolTip: 'Freezing' };
};
As you can see, when the method is called, it returns an icon such as <i class="fa fa-fire red" aria-hidden="true"></i> which is placed in the table's cell.
I added an edit icon next to Amount,
{
id: "Edit",
field: "edit",
excludeFromColumnPicker: true,
excludeFromExport: true,
excludeFromQuery: true,
excludeFromGridMenu: true,
excludeFromHeaderMenu: true,
minWidth: 30,
maxWidth: 30,
formatter: Formatters.editIcon,
},
and used this custom format from ghiscoding comment:
const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, dataContext, grid) => {
const isEditable = !!columnDef.editor;
value = (value === null || value === undefined) ? '' : value;
return isEditable ? `<div style="background-color: aliceblue">${value}</div>` : value;
};
The result is as shown in the picture.

Insert column at the first position in grid

I am trying to insert row selection at the first position of grid but it always ends up among hidden columns. I did the same thing with delete button column and it worked just fine.
protected getColumns(): Slick.Column[] {
var cols = super.getColumns();
cols.unshift({
field: 'Delete Row',
name: '',
format: ctx => '<a class="inline-action delete-row" title="delete">' +
'<i class="fa fa-trash-o text-red"></i></a>',
width: 24,
minWidth: 24,
maxWidth: 24,
visible: true
});
cols.unshift(Serenity.GridRowSelectionMixin.createSelectColumn(() => this.rowSelection));
return cols;
The problem is not incorrect implementation of selection row. I know that because I tried it with different columns with same results. I also tried to set "visible" to true
Any ideas? Thanks
This code will make your selection column stay at first position
protected getPersistedSettings() {
let setting = super.getPersistedSettings();
let idCol = Q.tryFirst(setting.columns, x => x.id == "__select__");
if (idCol) {
setting.columns.splice(setting.columns.indexOf(idCol), 1);
setting.columns.splice(0, 0, idCol);
}
return setting;
}
But make sure that the selection is not in hidden list
The problem was that persistence of data was turned on with this function
protected getPersistanceStorage(): Serenity.SettingStorage {
return new Common.UserPreferenceStorage();
}

Itemtpl usage sencha

I am trying to check a year value from drop down and depending on that I am setting my itemtpl. However I would like to know if this is possible . dropdownyearvalue is my drop down value which I am inserting in store and Year is a value inserted before in the same store.
{
xtype: 'container',
itemId: 'Oct',
// style: 'border-color: blue; border-style: solid;'
tpl: new Ext.XTemplate('<tpl for="month"><tpl if="status == 1 && month==1 && Year=='{dropdownyearvalue}'"><div class="planned"></div><tpl elseif="status == 2 && month==1"><div class="target"></div><tpl else><div id="nothing"></div></tpl></tpl>')
}
This is possible, you can push any data to your template using data property, just like in example.
config:{
baseCls: 'hexagonList',
records: null,
tpl: new Ext.XTemplate('<tpl for="items"><div class="item" ref="{data.urlId}"><div class="hex"></div><div class="text">{data.label}</div></div></tpl>')
},
updateRecords: function(newRecords){
this.setData({
items: newRecords.items
});
}

dojo1.8 - tried to register but . . . already registered - building select widget

Hi I had a trouble figuring out where select's id is registered at attempted once more.
Possible causes:-
1) ParseOnload and Parser.parse() on the same page
2) Giving the same id to another new select
3) Registering the same select with new id
I could not figure what cause the select to registered twice.
...
...
<div id='main_bContainer' data-dojo-type='dijit/layout/BorderContainer' data-dojo-props='design:"sidebar"'>
<div id='paneA' class='cP_Left' data-dojo-type='dijit/layout/ContentPane' data-dojo-props='region:"left"'>
<div id='surfaceElement1' style='border:1px solid #ccc; margin-bottom:5px; width:317px; height:55px;'><!--these dimensions here in this line override the dimensions as set by createSurface function-->
<div id='node_meterSelect'></div>
</div>
<div id='surfaceElement2' style='border:1px solid #ccc; width:317px; height:200px;'><!--these dimensions here in this line override the dimensions as set by createSurface function-->
<div id='node_cardSelect'></div>
</div>
</div>
<div id='paneB' class='cP_Right' data-dojo-type='dijit/layout/ContentPane'data-dojo-props='region:"center"'>
<!--<div id='surfaceElement3' style='border:1px solid #ccc;'> <!--width:520px; height:400px;'><!--it's the size-->
<!--</div>-->
</div>
</div>
...
...
...
var meter_Select = new Select
({store:memoStore1,
style:{width:'140px'},
}, "node_meterSelect");
meter_Select.startup();
on(meter_Select, 'change', function(evt)
{
console.debug('Selected Card = '+ meter_Select.value);
request.post('listofcards.php',{data:{cardX : meter_Select.value},
handleAs:"json"}).then(function(response)
...
...
The error is "
Error: Tried to register widget with id==node_meterSelect but that id is already registered"
What could be the problem? please advise.. Thanks in advance.
i found your solution. You do not map all the require values to the right variables ! So registry and combobox are not mapped right ! you map "combobox" on "on".
Take a look at this jsfiddle:
http://jsfiddle.net/ejEGr/7/
Your function head with missing parameters:
function (parser, ready, dom, domConstruct, gfx, declare,
_WidgetBase, Memory, Select, ObjectStore, request, on)
After correction:
function (parser, ready, dom, domConstruct, gfx, declare,
_WidgetBase, Memory, Select, ObjectStore, request,box,registry, on)
So i had to add box & registry and now everything should work fine.
Here is a working jsfiddle based on your code:
http://jsfiddle.net/JxpRC/2/
Maybe you used the id somewhere else in your code ?
require(["dijit/form/Select",
"dojo/data/ObjectStore",
"dojo/store/Memory","dojo/domReady!"
], function(Select, ObjectStore, Memory){
var store1 = new Memory({
data: [
{ id: "foo", label: "Foo" },
{ id: "bar", label: "Bar" }
]
});
var os = new ObjectStore({ objectStore: store1 });
var meter_Select = new Select
({store:os,
style:{width:'140px'},
}, "node_meterSelect");
meter_Select.startup();
})