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

Добавляем данные в таблицу Google Sheeet при помощи PHP

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

Руководство от Гугла для ознакомления. Делано собственно по нему.

1) Включаем в своем аккаунте доступ к Google Sheets API. Сделать это можно прямо на странице «Руководство от Гугла«:

Получаем ID, секрет и файл credentials.json который сохраняем туда, где будет лежать основной скрипт

2) При помощи composer добавляем необходимые библиотеки

composer require google/apiclient:^2.0
composer update

1 2	composer require google/apiclient:^2.0 composer update

3) Создаем таблицу в гуглодокументах и узнаем её ID — можно взять прямо из URL. Так-же даем доступ «всем вподряд по ссылке»

4) Создаем следующего вида файл:

<?php
require 'vendor/autoload.php';

if (php_sapi_name() != 'cli') {
    throw new Exception('This application must be run on the command line.');
}

/**
 * Returns an authorized API client.
 * @return Google_Client the authorized client object
 */
function getClient(){
    $client = new Google_Client();
    $client->setApplicationName('Google Sheets API PHP Quickstart');
    $client->setScopes(Google_Service_Sheets::SPREADSHEETS);
    $client->setAuthConfig('credentials.json');
    $client->setAccessType('offline');
    $client->setPrompt('select_account consent');

    // Load previously authorized token from a file, if it exists.
    // The file token.json stores the user's access and refresh tokens, and is
    // created automatically when the authorization flow completes for the first
    // time.
    $tokenPath = 'token.json';
    if (file_exists($tokenPath)) {
        $accessToken = json_decode(file_get_contents($tokenPath), true);
        $client->setAccessToken($accessToken);
    }

    // If there is no previous token or it's expired.
    if ($client->isAccessTokenExpired()) {
        // Refresh the token if possible, else fetch a new one.
        if ($client->getRefreshToken()) {
            $client->fetchAccessTokenWithRefreshToken($client->getRefreshToken());
        } else {
            // Request authorization from the user.
            $authUrl = $client->createAuthUrl();
            printf("Open the following link in your browser:\n%s\n", $authUrl);
            print 'Enter verification code: ';
            $authCode = trim(fgets(STDIN));

            // Exchange authorization code for an access token.
            $accessToken = $client->fetchAccessTokenWithAuthCode($authCode);
            $client->setAccessToken($accessToken);

            // Check to see if there was an error.
            if (array_key_exists('error', $accessToken)) {
                throw new Exception(join(', ', $accessToken));
            }
        }
        // Save the token to a file.
        if (!file_exists(dirname($tokenPath))) {
            mkdir(dirname($tokenPath), 0700, true);
        }
        file_put_contents($tokenPath, json_encode($client->getAccessToken()));
    }
    return $client;
}




// Get the API client and construct the service object.
$client = getClient();
$service = new Google_Service_Sheets($client);

// Prints the names and majors of students in a sample spreadsheet:
// https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit
$spreadsheetId = 'аыукаыука-HW95_v_xwJ-U_L2Xc';
$range = 'Sheets1!A2:A';
$response = $service->spreadsheets_values->get($spreadsheetId, $range);
$values = $response->getValues();
var_dump($values);
if (empty($values)) {
    print "No data found.\n";
} else {
    print "Name, Major:\n";
    foreach ($values as $row) {
        // Print columns A and E, which correspond to indices 0 and 4.
        printf("%s\n", $row[0]);
    }
};
$values = [
	["2016-02-12", "5453 543543", "=C2+C3"],
	["2017-02-12", "5453 543543", "=C2+C3"],
	["2018-02-12", "5453 543543", "=C2+C3"],
];
$body    = new Google_Service_Sheets_ValueRange( [ 'values' => $values ] );
 
// valueInputOption - определяет способ интерпретации входных данных
// https://developers.google.com/sheets/api/reference/rest/v4/ValueInputOption
// RAW | USER_ENTERED
$options = array( 'valueInputOption' => 'RAW' );
 
$service->spreadsheets_values->update( $spreadsheetId, 'Sheets1!A13', $body, $options );

<?php

require 'vendor/autoload.php';

if (php_sapi_name() != 'cli') {

throw new Exception('This application must be run on the command line.');

}

/**

* Returns an authorized API client.

* @return Google_Client the authorized client object

function getClient(){

$client = new Google_Client();

$client->setApplicationName('Google Sheets API PHP Quickstart');

$client->setScopes(Google_Service_Sheets::SPREADSHEETS);

$client->setAuthConfig('credentials.json');

$client->setAccessType('offline');

$client->setPrompt('select_account consent');

// Load previously authorized token from a file, if it exists.

// The file token.json stores the user's access and refresh tokens, and is

// created automatically when the authorization flow completes for the first

// time.

$tokenPath = 'token.json';

if (file_exists($tokenPath)) {

$accessToken = json_decode(file_get_contents($tokenPath), true);

$client->setAccessToken($accessToken);

}

// If there is no previous token or it's expired.

if ($client->isAccessTokenExpired()) {

// Refresh the token if possible, else fetch a new one.

if ($client->getRefreshToken()) {

$client->fetchAccessTokenWithRefreshToken($client->getRefreshToken());

} else {

// Request authorization from the user.

$authUrl = $client->createAuthUrl();

printf("Open the following link in your browser:\n%s\n", $authUrl);

print 'Enter verification code: ';

$authCode = trim(fgets(STDIN));

// Exchange authorization code for an access token.

$accessToken = $client->fetchAccessTokenWithAuthCode($authCode);

$client->setAccessToken($accessToken);

// Check to see if there was an error.

if (array_key_exists('error', $accessToken)) {

throw new Exception(join(', ', $accessToken));

}

// Save the token to a file.

if (!file_exists(dirname($tokenPath))) {

mkdir(dirname($tokenPath), 0700, true);

}

file_put_contents($tokenPath, json_encode($client->getAccessToken()));

}

return $client;

}

// Get the API client and construct the service object.

$client = getClient();

$service = new Google_Service_Sheets($client);

// Prints the names and majors of students in a sample spreadsheet:

// https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit

$spreadsheetId = 'аыукаыука-HW95_v_xwJ-U_L2Xc';

$range = 'Sheets1!A2:A';

$response = $service->spreadsheets_values->get($spreadsheetId, $range);

$values = $response->getValues();

var_dump($values);

if (empty($values)) {

print "No data found.\n";

} else {

print "Name, Major:\n";

foreach ($values as $row) {

// Print columns A and E, which correspond to indices 0 and 4.

printf("%s\n", $row[0]);

}

};

$values = [

["2016-02-12", "5453 543543", "=C2+C3"],

["2017-02-12", "5453 543543", "=C2+C3"],

["2018-02-12", "5453 543543", "=C2+C3"],

];

$body = new Google_Service_Sheets_ValueRange( [ 'values' => $values ] );

// valueInputOption - определяет способ интерпретации входных данных

// https://developers.google.com/sheets/api/reference/rest/v4/ValueInputOption

// RAW | USER_ENTERED

$options = array( 'valueInputOption' => 'RAW' );

$service->spreadsheets_values->update( $spreadsheetId, 'Sheets1!A13', $body, $options );

,где в переменной $spreadsheetId указываем id таблицы.

5) Запустим скрипт из командной строки. Он предложит открыть ссылку которую выведет на экран. По переходу по ссылке будет показан стандарный диалог «Бал-бла- Разрешить?». Разрешаем. На экран выведется токен. Его нужно будет скопировать в консоль.

После чего снова запускаем скрипт, и в таблице в конец последних заполненных ячеек добавятся данные.

Оставить комментарий api, google sheets, php, добавление данных, работа с api

Копирование объектов в Javascript

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

В Javascript лично мне немножко не привычное поведение при присвоении одного объекта другому. Например:

otvet_4={        
        start_button : 1,
        concurent : 22
}

qwest=otvet_4;
qwest.start_button=10;

console.log(qwest.start_button);
console.log(otvet_4.start_button);

otvet_4={

start_button : 1,

concurent : 22

}

qwest=otvet_4;

qwest.start_button=10;

console.log(qwest.start_button);

console.log(otvet_4.start_button);

Выведет на экран две цифры 10. Т.е. меняется и первоначальный обьект?? Фактически значит знаком =, создается не копия, а ссылка на объект.

Одним из методов позволяющих «истинно копировать», является применение например такого трюка:

otvet_4={
 start_button : 1,
 concurent : 22
}

qwest=JSON.parse(JSON.stringify(otvet_4));
qwest.start_button=10;

console.log(qwest.start_button);
console.log(otvet_4.start_button);

otvet_4={

start_button : 1,

concurent : 22

}

qwest=JSON.parse(JSON.stringify(otvet_4));

qwest.start_button=10;

console.log(qwest.start_button);

console.log(otvet_4.start_button);

В этом случае в консоль выведет 1 и 10, что и ожидали.. Так-же можно воспользоваться функцией Object.assign… Но тут есть тоже подводные камни. Хороший материал по копированию объектов в Javascript тут

Оставить комментарий javascript, копирование, обьекты

Функция «посмотреть пароль» на сайте

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

Иногда бывает полезно раскрыть «звездочки» в теле тэга input при типе равном password. Вообще javascript не позволяет заменять тип «на лету» (например на text), но! как всегда это ограничение можно достаточно просто обойти — просто удалим обьект input и заменим его другим. Например как-то так:

           <div id="input_pass_div">
                <input type="password" id="password_login_form" class="form-control input-shadow" placeholder="Пароль">
            </div>
            <div class="form-control-position">
                <i style="cursor: pointer" onclick="ShowPassMe()" class="icon-eye"></i>
            </div>
<script>     
    tgpass=false;
    function ShowPassMe(){ 
       ps=$("#password_login_form").val();
       $("#password_login_form").remove();  
       if (tgpass==false){
         $("#input_pass_div").html('<input type="text" id="password_login_form" class="form-control input-shadow" placeholder="Пароль">');
         tgpass=!tgpass;
       } else {
           tgpass=!tgpass;
           $("#input_pass_div").html('<input type="password" id="password_login_form" class="form-control input-shadow" placeholder="Пароль">');
       };
       $("#password_login_form").val(ps);
    };    
</script>

</div>

</div>

tgpass=false;

function ShowPassMe(){

ps=$("#password_login_form").val();

$("#password_login_form").remove();

if (tgpass==false){

$("#input_pass_div").html('<input type="text" id="password_login_form" class="form-control input-shadow" placeholder="Пароль">');

tgpass=!tgpass;

} else {

tgpass=!tgpass;

$("#input_pass_div").html('<input type="password" id="password_login_form" class="form-control input-shadow" placeholder="Пароль">');

};

$("#password_login_form").val(ps);

};

</script>

Оставить комментарий javascript, показать пароль

Прогрессбар на vue.js

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

Например можно реализовать как-то так (в примере на самом деле два прогрессбара). К сожалению всёж пока выходит сложнее для чтения и понимания чем «чистый» javascript+jquery

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>        
</head>
<body>
    <table id="hotels_list"></table>
    <div id="hotels_pager"></div>  
    <div id="app">
        <div class="container">
            <div class="row">
                    <div class="col-6">      
                        <persent v-bind:msg="pers1"></persent>
                    </div>
                    <div class="col-6">    
                        <persent v-bind:msg="pers2"></persent>
                    </div>                
            </div>    
        </div>                
    </div>
<script>    
Vue.component('persent', {
    props: ['msg'],
    template: '<div><div>{{ msg.txt }}</div><div class="progress"><div class="progress-bar" role="progressbar" :style="msg.style" :aria-valuenow="msg.value" aria-valuemin="0" aria-valuemax="100">{{ msg.value }}%</div></div></div>'
});      
var app = new Vue({
  el: '#app',
  data: {
    timing: null,
    pers1 : {
        value: 10,
        txt:'Добавление новых',
        style:'width:20%'
    },
    pers2 : {
        value: 70,
        txt:'Обновление',
        style:'width:70%'
    }
  },
  mounted(){
    console.log("-загрузились полностью..");  
    this.runTiming();
  },
  methods: {
      runTiming() {
        this.timing = setInterval(this.changeCurrentPers, 2000)          
      },
      changeCurrentPers(){
         vl=this;
        $.post('progress.txt',{}, function(data){                          
                vl.pers1.value=data;
                vl.pers1.style='width:'+data+'%';
        });       
        $.post('progress_update.txt',{}, function(data){
                vl.pers2.value=data;
                vl.pers2.style='width:'+data+'%';
        });                 
      }
  },  
});

</head>

<body>

</div>

</div>

Vue.component('persent', {

props: ['msg'],

template: '<div><div>{{ msg.txt }}</div><div class="progress"><div class="progress-bar" role="progressbar" :style="msg.style" :aria-valuenow="msg.value" aria-valuemin="0" aria-valuemax="100">{{ msg.value }}%</div></div></div>'

});

var app = new Vue({

el: '#app',

data: {

timing: null,

pers1 : {

value: 10,

txt:'Добавление новых',

style:'width:20%'

pers2 : {

value: 70,

txt:'Обновление',

style:'width:70%'

}

mounted(){

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

this.runTiming();

methods: {

runTiming() {

this.timing = setInterval(this.changeCurrentPers, 2000)

changeCurrentPers(){

vl=this;

$.post('progress.txt',{}, function(data){

vl.pers1.value=data;

vl.pers1.style='width:'+data+'%';

});

$.post('progress_update.txt',{}, function(data){

vl.pers2.value=data;

vl.pers2.style='width:'+data+'%';

});

}

});

Всё ищу, гдеб его (VUE.js) можно применить.. Пока выходит «надумано»..

Один комментарий javascript, progressbar, vue

Пробую Vue.js

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

Ниже писал как тестировал React.js, в итоге не привилось от слова совсем. Всё надумано и усложнено. Для реализации элементарных вещей типа вывода динамического списка загруженного из вне требуются феерические велосипеды. В итоге не смог придумать ни одного примера использования где было бы проще и удобнее чем с использованием чистого javascript + jquery. Теперь задумался в сторону фреймворка Vue.js В нём понравилась идея компонентности (кирпичиков из «своих» тегов) для создания страницы. Пока тестировал, получился вот такой скриптик, демонстрирующий базовые возможности:

<!doctype html>
<head>		
        <meta charset="UTF-8">
        <title>VUE.js test</title>		
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>        
</head>
<body>
<div id="app">
  {{ message }}
  <span v-bind:title="title">Hello</span>
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>      
  </ol>    
  <button v-on:click="addItem">Добавить элемент</button>
  <input v-model="message">
  <brick></brick>
  <brick></brick>
</div>        
<script>   
Vue.component('brick', {
    template: '<div>Это кирпичик</div>'
});    
var app = new Vue({
  el: '#app',
  data: {
    message: 'Привет'+ new Date().toLocaleString(),
    title: 'title me'+ new Date().toLocaleString(),
    msg:"DDD",
    todos:[
        {text:'Один',key:"wedwe"},
        {text:'Два'},
        {text:'Три'}
    ]
  },
  methods: {
        addItem: function () {
          this.todos.push({text: this.message});
        }
  },  
});    

</script>    
</body>
</html>

<!doctype html>

<head>

</head>

<body>

<span v-bind:title="title">Hello</span>

<ol>

</li>

</ol>

<button v-on:click="addItem">Добавить элемент</button>

</div>

Vue.component('brick', {

template: '<div>Это кирпичик</div>'

});

var app = new Vue({

el: '#app',

data: {

message: 'Привет'+ new Date().toLocaleString(),

title: 'title me'+ new Date().toLocaleString(),

msg:"DDD",

todos:[

{text:'Один',key:"wedwe"},

{text:'Два'},

{text:'Три'}

]

methods: {

addItem: function () {

this.todos.push({text: this.message});

}

});

</script>

</body>

</html>

Демо тут

Оставить комментарий javascript, vue.js, web

« 1 … 21 22 23 24 25 … 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