스타트업 구축: Ajax로 회의 일정 간소화

이 튜토리얼은 Envato Tuts+의 "PHP로 스타트업 구축" 시리즈의 일부입니다. 이 시리즈에서는 미팅 플래너 앱을 실제 사례로 사용하여 스타트업을 시작하는 과정을 컨셉부터 현실까지 안내해 드리겠습니다. 모든 단계에서 귀하가 배울 수 있는 오픈 소스 예제로 Meeting Planner 코드를 공개하겠습니다. 스타트업과 관련해 발생하는 비즈니스 이슈도 다루겠습니다.

Ajax에 대해 자세히 알아보기

지난 주에 저는 Ajax에 대해 자세히 알아보고 회의 예약 경험을 완전히 ajax화된 모델로 변환하고 페이지 새로 고침의 필요성을 제거했습니다. 간단한 요소에 초점을 맞춰 절반 정도 진행했습니다.

오늘 튜토리얼에서는 더 많은 문제 해결, 연구, 디버깅, 브레인스토밍 및 기록이 필요한 더 복잡한 콘텐츠 패널을 안내해 드리겠습니다. 앞서 말했듯이 베타 버전이 출시될 때까지 이 기능을 중단해야 할 수도 있다고 생각할 때가 있습니다. 그 주에 제가 겪은 개인적인 악몽을 여러분께 안내해 드릴테니 따라오세요 (지금은 더 잘하고 있으니 걱정하지 마세요) .

또한 PHP와 JavaScript 사이에서 Ajax를 사용할 때 특히 어려운 깨진 영역을 식별하는 데 도움이 되는 Google의 Chrome 개발자 콘솔을 사용하는 방법도 보여 드리겠습니다. 어두운 터널 끝의 빛처럼.

주최자와 참가자가 선호 사항을 공유하고 날짜 시간과 장소를 최종 선택할 수 있도록 도와주는 멋진 부트스트랩 스위치를 보셨을 것입니다. 글쎄요, Ajax 업데이트 후에는 이렇게 보여서는 안 되지만 이를 수정하는 것이 이번 기능 업데이트의 중요한 부분입니다.

아직 미팅 플래너를 사용해보지 않으셨다면 새로운 대화형 기능을 사용하여 첫 번째 미팅을 예약해 보세요. 저는 아래 댓글 스레드에 참여했습니다. 여러분의 생각을 알려주세요! Twitter @reifman을 통해 저에게 연락하실 수도 있습니다. 향후 튜토리얼에 대한 새로운 기능이나 주제를 제안하고 싶다면 특히 관심이 있을 것입니다.

미팅 플래너의 모든 코드는 PHP의 Yii2 프레임워크를 사용하여 작성되었음을 다시 한번 말씀드립니다. Yii2에 대해 더 자세히 알고 싶으시면 "Yii2를 사용한 프로그래밍" 시리즈를 확인해 보세요.

먼저 Ajax를 통해 회의 참가자를 추가하는 방법을 살펴보겠습니다.

회의 참가자 추가

참가자 추가 코드는 앞서 소개해드린 코드와 비슷합니다. 하지만 참가자 목록과 참가자의 신원을 표시하는 모든 버튼을 업데이트하는 약간 다른 코드를 보고 싶습니다.

이전에는 회의당 참가자가 한 명뿐이었습니다. 그런 다음 그룹 회의를 활성화하고 각 참가자에게 표시할 버튼 목록을 만들었습니다.

참가자가 추가될 때마다 Ajax를 통해 전체 목록을 새로 고칩니다.

다음은 jQuery 함수입니다 addParticipant()，它会在添加每个新按钮后调用 getParticipantButtons():

으아아아

다음은 getParticipantButtons() 기능입니다:

으아아아

ParticipantController.php에 대한 Ajax 호출을 수행합니다. actionGetbuttons() 메소드:

으아아아

참고: 저는ParticipantController 대신 "ParCon"이라는 약어를 좋아합니다. 원격 Star Trek 명령 기지처럼 들리거나 오랫동안 혼자서 이 스타트업을 개발해 왔음을 나타내기 때문입니다. 나는 확실히 Ajax 기능에 너무 많은 시간을 소비했습니다.

어쨌든 위 함수는 업데이트된 모든 참가자로 패널을 다시 채웁니다.

이제 일반적으로 사용되는 Bootstrap 날짜/시간 선택기 위젯 중 하나를 사용하여 날짜와 시간을 살펴보겠습니다.

날짜 및 시간 추가

날짜, 시간, 위치는 Ajaxization에서 가장 복잡한 기능입니다. 양식이 부트스트랩 위젯이나 Google Maps API를 사용하지 않습니다. 그 결과 Ajax용으로 잘 설계되거나 문서화되지 않은 컨트롤러인 부트스트랩 스위치 컨트롤러가 탄생했습니다.

Ajax를 통한 부트스트래핑 스위치 컨트롤러 관련 문제

다음은 Ajax 제출이 위치를 추가한 후 깨진 스위치의 예입니다.

이 문제를 최종적으로 해결하는 방법에 대해 자세히 설명하겠습니다. 먼저 Meet-time/panel.php를 살펴보겠습니다.

<?php
use yii\helpers\Html;
use yii\widgets\ListView;
use yii\bootstrap\Collapse;
use \kartik\switchinput\SwitchInput;
?>
<div id="notifierTime" class="alert-info alert fade in" style="display:none;">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<?php echo Yii::t('frontend',"We'll automatically notify the organizer when you're done making changes."); ?>
</div>
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading" role="tab" id="headingWhen">
    <div class="row"><div class="col-lg-10 col-md-10 col-xs-10"><h4 class="meeting-view">
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseWhen" aria-expanded="true" aria-controls="collapseWhen"><?= Yii::t('frontend','When') ?></a>
    </h4>
    <span class="hint-text">
      <?php if ($timeProvider->count<=1) { ?>
        <?= Yii::t('frontend','add one or more dates and times for participants to choose from') ?>
    <?php } elseif ($timeProvider->count>1) { ?>
      <?= Yii::t('frontend','are listed times okay?'); ?>
    <?php
      }
    ?>
    <?php if ($timeProvider->count>1 && ($model->isOrganizer() || $model->meetingSettings['participant_choose_date_time'])) { ?>
      <?= Yii::t('frontend','you can also choose the time') ?>
    <?php }?>
  </span></div><div class="col-lg-2 col-md-2 col-xs-2"><div style="float:right;">
    <?php
      if ($model->isOrganizer() || $model->meetingSettings->participant_add_date_time) { ?>
        <?= Html::a('', 'javascript:void(0);', ['class' => 'btn btn-primary glyphicon glyphicon-plus','title'=>'Add possible times','id'=>'buttonTime','onclick'=>'showTime();']); ?>
        <?php
      }
    ?>
      </div>
    </div>
  </div> <!-- end row -->
</div> <!-- end heading -->
  <div id="collapseWhen" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingWhen">
    <div class="panel-when">
      <div class="when-form hidden">
        <div id="timeMessage" class="alert-info alert fade in hidden">
          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
          <span id="timeMsg1"><?= Yii::t('frontend','We\'ll automatically notify others when you\'re done making changes.')?></span>
          <span id="timeMsg2"><?= Yii::t('frontend','Please pick a date and time.')?></span>
        </div>
        <div id="addTime" class="hidden">
          <!-- hidden add time form -->
          <?= $this->render('_form', [
              'model' => $meetingTime,
          ]) ?>
        </div>
      </div>
    <table class="table" id="meeting-time-list" class="hidden">
  <?php
   if ($timeProvider->count>0):
  ?>
  <!-- Table -->
    <?= ListView::widget([
           'dataProvider' => $timeProvider,
           'itemOptions' => ['class' => 'item'],
           'layout' => '{items}',
           'itemView' => '_list',
           'viewParams' => ['timezone'=>$timezone,'timeCount'=>$timeProvider->count,'isOwner'=>$isOwner,'participant_choose_date_time'=>$model->meetingSettings['participant_choose_date_time'],'whenStatus'=>$whenStatus],
       ]) ?>
  <?php endif; ?>
  </table>
  </div>
</div>
</div>

您会注意到 timeMessage 提供预加载的警报，以便在某些 Ajax 条件下显示，正如我在上一集中回顾的那样。而且，很大程度上，代码开始遵循我在其他面板上使用的相同格式。

我尽可能地尝试以先前的方法为基础，并在ajax化每个内容面板时重用代码结构。

这是 Meeting.js 中的切换面板 JavaScript：

//show the panel
function showTime() {
  if ($('#addTime').hasClass( "hidden")) {
    $('#addTime').removeClass("hidden");
    $('.when-form').removeClass("hidden");
  }else {
    $('#addTime').addClass("hidden");
    $('.when-form').addClass("hidden");
  }
};

function cancelTime() {
  $('#addTime').addClass("hidden");
  $('.when-form').addClass("hidden");
}

当面板出现并且用户提交新的日期时间时，它会调用 addTime():

function addTime(id) {
    start_time = $('#meetingtime-start_time').val();
    start = $('#meetingtime-start').val();
    if (start_time =='' || start=='') {
      displayAlert('timeMessage','timeMsg2');
      return false;
    }
    // ajax submit subject and message
    $.ajax({
       url: $('#url_prefix').val()+'/meeting-time/add',
       data: {
         id: id,
        start_time: encodeURIComponent(start_time),
        start:encodeURIComponent(start),
      },
       success: function(data) {
         //$('#meeting-note').val('');
         insertTime(id);
         displayAlert('timeMessage','timeMsg1');
         return true;
       }
    });
    $('#addTime').addClass('hidden');
  }

这会调用 MeetingTimeController.php actionAdd() Ajax 函数：

    public function actionAdd($id,$start,$start_time) {
      Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
      $timezone = MiscHelpers::fetchUserTimezone(Yii::$app->user->getId());
      date_default_timezone_set($timezone);
      $model = new MeetingTime();
      $model->start = urldecode($start);
      $model->start_time = urldecode($start_time);
      if (empty($model->start)) {
        $model->start = Date('M d, Y',time()+3*24*3600);
      }
      $model->tz_current = $timezone;
      $model->duration = 1;
      $model->meeting_id= $id;
      $model->suggested_by= Yii::$app->user->getId();
      $model->status = MeetingTime::STATUS_SUGGESTED;
      $selected_time = date_parse($model->start_time);
      if ($selected_time['hour'] === false) {
        $selected_time['hour'] =9;
        $selected_time['minute'] =0;
      }
      // convert date time to timestamp
      $model->start = strtotime($model->start) +  $selected_time['hour']*3600+ $selected_time['minute']*60;
      $model->end = $model->start + (3600*$model->duration);
      $model->save();
      return true;
    }

当我开始通过 Ajax 添加新的日期时间或地点时，我在尝试重新初始化 Bootstrap Switch 控制器时遇到了困难，我在之前的“调度可用性和选择”一集中就开始使用该控制器。

我重新加载日期时间行，但页面上的所有开关控制器都已损坏。

问题的一部分是 Bootstrap Switch 的 Ajax 重新实例化没有详细记录。在黑暗中尝试了一些事情并在互联网上寻求帮助之后，我终于找到了解决办法。

$("input[name='meeting-time-choice']").map(function(){} 循环遍历每个开关控件，并且 $(this).bootstrapSwitch(property,value) 命令重置控件设置。花了一些时间才找到合适的控件 API。

function insertTime(id) {
    $.ajax({
     url: $('#url_prefix').val()+'/meeting-time/inserttime',
     data: {
       id: id,
      },
      type: 'GET',
     success: function(data) {
      $("#meeting-time-list").html(data).removeClass('hidden');
       $("input[name='time-chooser']").map(function(){
          //$(this).bootstrapSwitch();
          $(this).bootstrapSwitch('onText','<i class="glyphicon glyphicon-ok"></i> choose');
          $(this).bootstrapSwitch('offText','<i class="glyphicon glyphicon-remove"></i>');
          $(this).bootstrapSwitch('onColor','success');
          $(this).bootstrapSwitch('handleWidth',70);
          $(this).bootstrapSwitch('labelWidth',10);
          $(this).bootstrapSwitch('size','small');
        });
        $("input[name='meeting-time-choice']").map(function(){
          //$(this).bootstrapSwitch();
          $(this).bootstrapSwitch('onText','<i class="glyphicon glyphicon-thumbs-up"></i> yes');
          $(this).bootstrapSwitch('offText','<i class="glyphicon glyphicon-thumbs-down"></i> no');
          $(this).bootstrapSwitch('onColor','success');
          $(this).bootstrapSwitch('offColor','danger');
          $(this).bootstrapSwitch('handleWidth',50);
          $(this).bootstrapSwitch('labelWidth',10);
          $(this).bootstrapSwitch('size','small');
        });
     },
   });
   refreshSend();
   refreshFinalize();
  }

基本上，我必须从头开始重新配置每个控件所需的每个属性。这将上面的原始复选框转换回更丰富的开关控件。

在达到这一点之前，我在其他解决方法上浪费了很多时间。 Bootstrap Switch 是一个令人惊叹的控制器，也是 Meeting Planner 易用性的关键部分，但 ajaxifying 几乎让我崩溃。

继续，添加会议地点与添加日期和时间类似，但我想使用此内容面板来深入研究使用 Google Chrome 浏览器开发人员工具对 Ajax 进行故障排除。

添加聚会地点

正如我之前所说，在 JavaScript 和 PHP 之间调试 Ajax 可能会变得极其混乱和令人沮丧。 Ajax bug 通常很难追踪。

在这种情况下，使用 Google Chrome 浏览器的开发者控制台帮助我突破了空白。

一般来说，使用 Ajax 时，您只是遇到了故障，没有任何迹象表明出了什么问题。

以下是我用来追踪错误的 Chrome 公开的逐步可见性。

通过使用控制台选项卡，我可以看到失败的 GET 请求。这是尝试请求添加会议地点时发生的服务器错误：

这帮助我确定了通过 ajax 请求的具体参数，在本例中为会议 id = 186。

查看网络选项卡还会显示这些调用及其参数：

当您单击特定查询时，您可以看到五个选项卡；这是标题选项卡：

在本例中，预览选项卡突出显示了 Ajax 遇到的 MeetingPlaceController 中的 PHP 错误请求：

您可以看到这变得多么有用 - 特别是考虑到我必须重建大量代码才能实现所有这些调度特点。

以下是网络标签请求会议 ID = 186 地点的另一个示例：

预览标签显示所请求的视图文件不存在或至少不存在不在它应该在的地方：

Google Chrome 的开发者控制台帮助我完成了 Ajax 工作。

谢谢你，谷歌！ 今天我什至不会拿我的天才模因来取笑你。

下一步是什么？

我希望您喜欢关于 Ajax 的这两集以及向快速、高效的会议安排和消除页面刷新的转变。会议安排是 Meeting Planner 的核心和灵魂，因此使其发挥出色至关重要。

我个人通过这个过程学到了很多东西，这些变化对服务产生了巨大的积极影响。

请尝试更快速的安排并与您的朋友分享会议规划器。与往常一样，如果您在下面的评论中分享您的经验，我将不胜感激，并且我始终对您的建议感兴趣。您随时可以通过 Twitter @reifman 直接联系我。

我即将根据 SEC 新众筹规则的实施与 WeFunder 启动实验。如果您愿意，可以关注我们的个人资料。我还将在以后的教程中详细介绍这一点。

观看“使用 PHP 构建您的初创公司”系列中即将推出的教程。

相关链接

• 会议策划
• 构建您的初创公司：用于调度的动态 Ajax 表单(Envato Tuts+) 

• 会议策划者的 WeFunder 页面
• 使用 Yii2 编程：入门
• Yii2 开发者交流会

위 내용은 스타트업 구축: Ajax로 회의 일정 간소화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!