Архивы WEB - Страница 24 из 54

Пробуем ReactJS

30.12.2019 Павел Грибов WEB

Если честно, пока не представляю, что можно сделать с ReactJS, что нельзя сделать удобно и понятно при помощи Jquery+PHP. Но решил таки попробовать. Итак, что такое ReactJS — фактически это надстройка над JavaScript написанная на языке JavaScript. Т.е. всё что написано на ReactJS — компилируется или «на лету» при помощи babel в javascript или при выкладывании в «продакт» и далее подключается вызовом обычного JavaScript.

Чтобы не разделять «продакт» «девелоп» и не возиться с бабелом, я у себя настроил один из вариантов, а именно в косоли висит запущеный скрипт-компилятор, который мониторит изменения файлов в папке src и при изменении чего-либо, компилирует файл в папку js. Соответственно всегда имеем «продакт».

Что нужно сделать чтоб начать пользоваться ReactJS:

1) Поставить NodeJS и ReactJS на компьютере где разрабатываем (компиляция кода ReactJS в JavaScript происходит при помощи его):

apt install nodejs
npm install babel-cli@6 babel-preset-react-app@3

1 2	apt install nodejs npm install babel-cli@6 babel-preset-react-app@3

2) Ставим npx — утилита которая позволяет запускать npm пакеты

npm install -g npx

1	npm install -g npx

3) Зпаускаем в консоли что-типа:

npx babel --watch src --out-dir js --presets react-app/prod

1	npx babel --watch src --out-dir js --presets react-app/prod

В моем случае все скрипты из папки src компилируются в папку js

В итоге html страница может выглядеть так:

<!DOCTYPE html>
<html>    
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <head>
        <meta charset="UTF-8">
        <title id="rj_title"></title>
    </head>
    <body id="rj_body">
        <div id="root"></div>
        <script src="js/test.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

</body>

</html>

а файл src/test.js так:

const name='Павел Игоревич';
const element = <h1>Привет {name}!</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

const name='Павел Игоревич';

const element = <h1>Привет {name}!</h1>;

ReactDOM.render(

element,

document.getElementById('root')

);

В браузере выведет:

Оставить комментарий html, javascript, reactjs

jqgrid-free экспорт в эксель

24.12.2019 Павел Грибов WEB

В «свободном» форке jqgrid, к сожалению нет «встроенного» способа сформировать на основании таблицы файл Excel. Однако можно использовать сторонний способ https://github.com/SheetJS/sheetjs

Тогда код может получиться примерно следующий:

        jQuery("#paylist").jqGrid('navButtonAdd',"#paypager",{caption:'Excel',                              
             title: "Выгрузить в Excel",buttonicon: "none",position:"last",
             onClickButton:function(){                
                          var filename = "export_rents.xlsx",
                            data = $("#paylist").getRowData();
                            dataAsArray = [["dt", "amount", "comment"]];
                              for (i = 0; i < data.length; i++) {
                                item = data[i];
                                dataAsArray.push([item.dt, item.amount, item.comment]);
                              }
                              var ws_name = "SheetJS";
                              var wb = XLSX.utils.book_new(),
                                  ws = XLSX.utils.aoa_to_sheet(dataAsArray);
                              XLSX.utils.book_append_sheet(wb, ws, ws_name);
                              XLSX.writeFile(wb, filename);                
             }        
         });

jQuery("#paylist").jqGrid('navButtonAdd',"#paypager",{caption:'Excel',

title: "Выгрузить в Excel",buttonicon: "none",position:"last",

onClickButton:function(){

var filename = "export_rents.xlsx",

data = $("#paylist").getRowData();

dataAsArray = [["dt", "amount", "comment"]];

for (i = 0; i < data.length; i++) {

item = data[i];

dataAsArray.push([item.dt, item.amount, item.comment]);

}

var ws_name = "SheetJS";

var wb = XLSX.utils.book_new(),

ws = XLSX.utils.aoa_to_sheet(dataAsArray);

XLSX.utils.book_append_sheet(wb, ws, ws_name);

XLSX.writeFile(wb, filename);

}

});

Оставить комментарий excel, export, jqgrid, jqrid-free

Загрузка и исполнение внешнего скрипта javascript на своем сайте

28.11.2019 Павел Грибов WEB

Прилетела давече задача: подключить платежную систему на сайте. «Дело простое» подумал я сначала. Обычно платежные системы сами предоставляют виджет, который остается только вставить на сайт. Но! дьявол как всегда оказался в деталях — а именно сайт сделан на «тильде» — значит никакого PHP. Только javascript+html. Плюс крайне желательно обойтись без «переходов» со страницу на страницу. А именно: пользователь ввел договор, сумму, ФИО, прошла проверка и только после на этой-же странице показалась форма платежной системы.

В принципе всё реализуемо и не сложно. Но! после вставки:

               url="https://paymaster.ru/ru-RU/widget/Basic/1?LMI_MERCHANT_ID=884a7a64-3566-4d75-b413-c4c044b58c02&LMI_PAYMENT_AMOUNT="+summ+"&LMI_PAYMENT_DESC="+clientname+" договор "+dognum+"&LMI_CURRENCY=RUB";
               $.getScript(url, function(){
                    console.log("--загрузили платежную систему..");
                });

url="https://paymaster.ru/ru-RU/widget/Basic/1?LMI_MERCHANT_ID=884a7a64-3566-4d75-b413-c4c044b58c02&LMI_PAYMENT_AMOUNT="+summ+"&LMI_PAYMENT_DESC="+clientname+" договор "+dognum+"&LMI_CURRENCY=RUB";

$.getScript(url, function(){

console.log("--загрузили платежную систему..");

});

браузер стал выдавать ошибку:

Вызов document.write() из асинхронно-загруженного внешнего сценария был проигнорирован.

, и выполнять скрипт откзывался. Как оказалось, создатели виджета вставили в тело скрипта команды вида document.write, что категорически запрещается без перезагрузки страницы. Если бы этот скрипт я просто статически разместил на странице, то всё бы было хорошо. Но нам это не нужно..

Долго думал… Долго Гуглил…

Решение: перед загрузкой скрипта подменить функцию вызова document.write своей «безобидной». В итоге скрипт получился такой:

 <div id='payform'>   
  <label for="clientname">ФИО:</label><br/>    
  <input type="text" name="clientname" id="clientname">
    <div id="result_clientname"><br/></div><br/>    
  <label for="clientid">№ договора:</label><br/>    
  <input type="text" name="clientid" id="clientid">
    <div id="result_clientid"><br/></div><br/>
  <label for="ammount">Сумма платежа:</label><br/>    
  <input type="number" name="ammount" id="ammount">
    <div id="result_ammount"><br/></div><br/>  
  <button id="pay_button_id">Оплатить</button>    
 </div> 
<script>
$(document).ready(function() {         
      function VerifyFormPay(){
          $("#clientname").css("border","");
          $("#clientid").css("border","");
          $("#ammount").css("border","");
          $("#result_clientname").html("<br/>");
          $("#result_clientid").html("<br/>");
          $("#result_ammount").html("<br/>");            
          res=true;
          clientname=$("#clientname").val();
           if (clientname==""){
             $("#clientname").css("border","2px solid red");
             $("#result_clientname").html("Это обязательное поле");
             res=false;
           };
           dognum=Number($("#clientid").val());
           if ((dognum==0)||(isNaN(dognum))){
             $("#clientid").css("border","2px solid red");
             $("#result_clientid").html("Значение не число");
             res=false;               
           };
           summ=Number($("#ammount").val());
           if ((summ==0)||(isNaN(summ))){
             $("#ammount").css("border","2px solid red");
             $("#result_ammount").html("Значение не число");
             res=false;               
           };           
          return res;
      };
      $("#pay_button_id").click(function() {
         if (VerifyFormPay()==true){
             $("#payform").html("");
             document.write = function(input) {                
                $("#payform").append(input)
             }
               url="https://paymaster.ru/ru-RU/widget/Basic/1?LMI_MERCHANT_ID=884a7a64-3566-4d75-b413-c4c044b58c02&LMI_PAYMENT_AMOUNT="+summ+"&LMI_PAYMENT_DESC="+clientname+" договор "+dognum+"&LMI_CURRENCY=RUB";
               $.getScript(url, function(){
                    console.log("--загрузили платежную систему..");
                });
         };
      });           
});      
  </script>

<label for="clientid">№ договора:</label><br/>

<label for="ammount">Сумма платежа:</label><br/>

<button id="pay_button_id">Оплатить</button>

</div>

$(document).ready(function() {

function VerifyFormPay(){

$("#clientname").css("border","");

$("#clientid").css("border","");

$("#ammount").css("border","");

$("#result_clientname").html("<br/>");

$("#result_clientid").html("<br/>");

$("#result_ammount").html("<br/>");

res=true;

clientname=$("#clientname").val();

if (clientname==""){

$("#clientname").css("border","2px solid red");

$("#result_clientname").html("Это обязательное поле");

res=false;

};

dognum=Number($("#clientid").val());

if ((dognum==0)||(isNaN(dognum))){

$("#clientid").css("border","2px solid red");

$("#result_clientid").html("Значение не число");

res=false;

};

summ=Number($("#ammount").val());

if ((summ==0)||(isNaN(summ))){

$("#ammount").css("border","2px solid red");

$("#result_ammount").html("Значение не число");

res=false;

};

return res;

};

$("#pay_button_id").click(function() {

if (VerifyFormPay()==true){

$("#payform").html("");

document.write = function(input) {

$("#payform").append(input)

}

$.getScript(url, function(){

console.log("--загрузили платежную систему..");

});

};

});

</script>

Оставить комментарий document.write, ошибка

Работа с API Zabbix из PHP

29.10.2019 Павел Грибов PHP, WEB, Павел

Поискал, поискал, ничего толкового не нашел. Пришлось написать самому. Выложил на GitHub. Описание актуального API Zabbix тут.

Пример использования:

include_once 'zabbix.php';

$url="https://my_zabbix.ru/api_jsonrpc1.php";
$login="weoriufeowiuf";
$password="owerierfoiewroi";

@include_once 'config.php';

// инициализация класса true/false - вывод в режиме debug
$zab=new Tzabbix(false);
$zab->SetCurlOpt(CURLOPT_URL,$url);
echo "-получаем api-key\n";
$res=$zab->Auth($login, $password);
if (isset($res->result)==true){
    if ($res->result!==false){        
        $res=$zab->Execute("host.get", ["output"=>["hostid","host"],"selectInterfaces"=>["interfaceid","ip"]]);
        var_dump($res);
    } else {
        var_dump($res);        
        die(-1);
    };    
} else {
  echo "--не понятная ошибка. попробуйте переключить в debug=true";  
};

include_once 'zabbix.php';

$url="https://my_zabbix.ru/api_jsonrpc1.php";

$login="weoriufeowiuf";

$password="owerierfoiewroi";

@include_once 'config.php';

// инициализация класса true/false - вывод в режиме debug

$zab=new Tzabbix(false);

$zab->SetCurlOpt(CURLOPT_URL,$url);

echo "-получаем api-key\n";

$res=$zab->Auth($login, $password);

if (isset($res->result)==true){

if ($res->result!==false){

$res=$zab->Execute("host.get", ["output"=>["hostid","host"],"selectInterfaces"=>["interfaceid","ip"]]);

var_dump($res);

} else {

var_dump($res);

die(-1);

};

} else {

echo "--не понятная ошибка. попробуйте переключить в debug=true";

};

2 комментария api, php, zabbix

3 способа получения координат по адресу

08.10.2019 Павел Грибов WEB, Павел

1) Яндекс

https://geocode-maps.yandex.ru/1.x/?geocode=$address&format=json&results=1

Минусы: Быстро банит, при превышении какого-то количества запросов

2) Гугл

https://maps.googleapis.com/maps/api/geocode/json?address=Вологда&key=YOUR_API_KEY

Минусы: нужно получать ключ

3) Спутник

http://search.maps.sputnik.ru/search/addr?q=$address

Минусы: для части адресов, с которыми Яндекс справляется отлично, тут безбожно врёт.

Оставить комментарий адрес, геокодинг, получение координат

« 1 … 22 23 24 25 26 … 54 »

Май 2025
Пн	Вт	Ср	Чт	Пт	Сб	Вс
			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