php+mysql+jquery implements calendar check-in-PHP Tutorial-php.cn

Home

PHP Tutorial

php+mysql+jquery implements calendar check-in

Mar 01, 2017 pm 05:00 PM

#During the website development process, we often use the check-in function to reward users with points or do some other activities. During the development of this project, I did a calendar check-in. Because I had no experience, I took many detours and recorded the process and steps again.

Recommended related mysql video tutorials: "mysql tutorial"

1. Calendar sign-in style:

php+mysql+jquery implements calendar check-in

2. This check-in only records the number of check-ins this month. If you want to query, you can write other pages to query all check-in records. (The function is available, but it is very troublesome. It has not been implemented in Gu.)

3. Front-end code

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

<include file="Public:menu" />
<style type="text/css">  
*{margin:0;padding:0;font:14px/1.8 "Helvetica Neue","microsoft yahei";}
</style>
<p class="ser_bx">
  <p class="ser_bxc">
    <span style="color:#5381B5;">签到记录</span>
    <if condition="$res[&#39;0&#39;][&#39;points&#39;] eq &#39;5&#39;">
      <p class="already btn_center">已签到</p>
    <else />
      <p class="ser_mbx btn_center">立即签到</p>
    </if>
    <p class="already btn_center" style="display:none;">已签到</p>
    <!--<p class="minein">积分 : <span style="color:#b81d25">{$poin.points}</span></p>-->
  </p>
</p>
<p class="check_box">
<p style="width:500px;height:400px;margin:0 auto;">
  <p style="width:300px;height:300px;margin-left:50px;" id="calendar"></p>
</p>
  </p>
<script type="text/javascript">
   $(document).ready(function(){
     $(".ser_mbx").click(function(){
       $.ajax({
        url:"{:U(&#39;Index/Checkin&#39;)}",
          type:&#39;POST&#39;,
        datatype:"json",
        success:function(msg){
          $(".already").show();
          $(".ser_mbx").hide();
       MonthSign();
        }
      });
     });
   });
</script>
 <script type="text/javascript" language="javascript">
  $(document).ready(function(){  
        MonthSign();
   }); 
  function MonthSign(){
     //ajax获取日历json数据
     $.ajax({
        url:"{:U(&#39;Index/MonthSign&#39;)}",
          type:&#39;POST&#39;,
        datatype:"json",
        success:function(msg){
          //alert(msg);
          /*var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
          */
          calUtil.init(JSON.parse(msg));
        }
      });
  }
 </script> 
 <script type="text/javascript">
  var calUtil = {
  //当前日历显示的年份
  showYear:2015,
  //当前日历显示的月份
  showMonth:1,
  //当前日历显示的天数
  showDays:1,
  eventName:"load",
  //初始化日历
  init:function(signList){
    calUtil.setMonthAndDay();
    calUtil.draw(signList);
    calUtil.bindEnvent();
  },
  draw:function(signList){
    //绑定日历
    var str = calUtil.drawCal(calUtil.showYear,calUtil.showMonth,signList);
    $("#calendar").html(str);
    //绑定日历表头
    var calendarName=calUtil.showYear+"年"+calUtil.showMonth+"月";
    $(".calendar_month_span").html(calendarName);  
  },
  //绑定事件
  bindEnvent:function(){
    //绑定上个月事件
    $(".calendar_month_prev").click(function(){
      //ajax获取日历json数据
      /*var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
      calUtil.eventName="prev";
      calUtil.init(signList);*/
    });
    //绑定下个月事件
    $(".calendar_month_next").click(function(){
      //ajax获取日历json数据
      /*var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
      calUtil.eventName="next";
      calUtil.init(signList);*/
    });
  },
  //获取当前选择的年月
  setMonthAndDay:function(){
    switch(calUtil.eventName)
    {
      case "load":
        var current = new Date();
        calUtil.showYear=current.getFullYear();
        calUtil.showMonth=current.getMonth() + 1;
        break;
      case "prev":
        var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];
        calUtil.showMonth=parseInt(nowMonth)-1;
        if(calUtil.showMonth==0)
        {
            calUtil.showMonth=12;
            calUtil.showYear-=1;
        }
        break;
      case "next":
        var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];
        calUtil.showMonth=parseInt(nowMonth)+1;
        if(calUtil.showMonth==13)
        {
            calUtil.showMonth=1;
            calUtil.showYear+=1;
        }
        break;
    }
  },
  getDaysInmonth : function(iMonth, iYear){
   var dPrevDate = new Date(iYear, iMonth, 0);
   return dPrevDate.getDate();
  },
  bulidCal : function(iYear, iMonth) {
   var aMonth = new Array();
   aMonth[0] = new Array(7);
   aMonth[1] = new Array(7);
   aMonth[2] = new Array(7);
   aMonth[3] = new Array(7);
   aMonth[4] = new Array(7);
   aMonth[5] = new Array(7);
   aMonth[6] = new Array(7);
   var dCalDate = new Date(iYear, iMonth - 1, 1);
   var iDayOfFirst = dCalDate.getDay();
   var iDaysInMonth = calUtil.getDaysInmonth(iMonth, iYear);
   var iVarDate = 1;
   var d, w;
   aMonth[0][0] = "日";
   aMonth[0][1] = "一";
   aMonth[0][2] = "二";
   aMonth[0][3] = "三";
   aMonth[0][4] = "四";
   aMonth[0][5] = "五";
   aMonth[0][6] = "六";
   for (d = iDayOfFirst; d < 7; d++) {
    aMonth[1][d] = iVarDate;
    iVarDate++;
   }
   for (w = 2; w < 7; w++) {
    for (d = 0; d < 7; d++) {
     if (iVarDate <= iDaysInMonth) {
      aMonth[w][d] = iVarDate;
      iVarDate++;
     }
    }
   }
   return aMonth;
  },
  ifHasSigned : function(signList,day){
   var signed = false;
   $.each(signList,function(index,item){
    if(item.signDay == day) {
     signed = true;
     return false;
    }
   });
   return signed ;
  },
  drawCal : function(iYear, iMonth ,signList) {
   var myMonth = calUtil.bulidCal(iYear, iMonth);
   var htmls = new Array();
   htmls.push("<p class=&#39;sign_main&#39; id=&#39;sign_layer&#39;>");
   htmls.push("<p class=&#39;sign_succ_calendar_title&#39;>");
   htmls.push("<p class=&#39;calendar_month_span&#39;></p>");
   htmls.push("</p>");
   htmls.push("<p class=&#39;sign&#39; id=&#39;sign_cal&#39;>");
   htmls.push("<table>");
   htmls.push("<tr>");
   htmls.push("<th>" + myMonth[0][0] + "</th>");
   htmls.push("<th>" + myMonth[0][1] + "</th>");
   htmls.push("<th>" + myMonth[0][2] + "</th>");
   htmls.push("<th>" + myMonth[0][3] + "</th>");
   htmls.push("<th>" + myMonth[0][4] + "</th>");
   htmls.push("<th>" + myMonth[0][5] + "</th>");
   htmls.push("<th>" + myMonth[0][6] + "</th>");
   htmls.push("</tr>");
   var d, w;
   for (w = 1; w < 7; w++) {
    htmls.push("<tr>");
    for (d = 0; d < 7; d++) {
     var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]);
     console.log(ifHasSigned);
     if(ifHasSigned){
      htmls.push("<td class=&#39;on&#39;>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td>");
     } else {
      htmls.push("<td>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td>");
     }
    }
    htmls.push("</tr>");
   }
   htmls.push("</table>");
   htmls.push("</p>");
   htmls.push("</p>");
   return htmls.join(&#39;&#39;);
  }
};
</script>
<include file="Public:footer" />

Copy after login

4. Back-end code: Check whether you have checked in today :

$points = M(&#39;points_log&#39;);
    $userid=session(&#39;user.id&#39;);
    $begintime=date("Y-m-d H:i:s",mktime(0,0,0,date(&#39;m&#39;),date(&#39;d&#39;),date(&#39;Y&#39;)));
    $endtime=date("Y-m-d H:i:s",mktime(0,0,0,date(&#39;m&#39;),date(&#39;d&#39;)+1,date(&#39;Y&#39;))-1);
    $where=array(
        &#39;points&#39;=>&#39;5&#39;,
        &#39;user_id&#39;=>$userid,
        &#39;createtime&#39; => array(array(&#39;gt&#39;,$begintime),array(&#39;lt&#39;,$endtime)),
      );
    $res=$points->where($where)->order("createtime desc")->select();
    //var_dump($res[&#39;0&#39;][&#39;points&#39;]);
    $this->assign(&#39;res&#39;,$res);

Copy after login

5. Query points:

/*查询积分*/
    $jfen=M(cuser);
    $list=$jfen->where(array(&#39;id&#39;=>$userid))->field(&#39;points&#39;)->find();
    $preg = &#39;/[0]*/&#39;;
    $poin = preg_replace($preg, &#39;&#39;, $list, 1);
    $this->assign(&#39;poin&#39;,$poin);

Copy after login

6. Sign in and write to the database:

/*签到*/
    if(IS_AJAX){  
      $userid=session(&#39;user.id&#39;);
      $type=&#39;签到&#39;;
      $typename=&#39;checkin&#39;;
      $id_status=&#39;up&#39;;
      $date=Date(&#39;Y-m-d H:i:s&#39;); 
      $dataList=array(
          &#39;user_id&#39;=>$userid,
          &#39;type&#39;=>$type, 
          &#39;typename&#39;=>$typename,
          &#39;id_status&#39;=>$id_status,
          &#39;points&#39;=>&#39;5&#39;,
          &#39;createtime&#39;=>$date,
          &#39;remark&#39;=>&#39;奖励5积分&#39;
          );  
      $points = M(&#39;points_log&#39;);
      if($points->add($dataList)){
        $log=session(&#39;user.id&#39;);
        $user=M(&#39;cuser&#39;);
        $user->where(array(&#39;id&#39;=>$log))->setInc(&#39;points&#39;,5);
      }  
      $this->ajaxReturn($status);
    }

Copy after login

7. /*Query the number of check-in days this month and return it in json format*/

public function MonthSign(){
    $userid=session(&#39;user.id&#39;);
    $points = M(&#39;points_log&#39;);
    $res=$points->where(array(&#39;user_id&#39;=>$userid))->select();
    $sign=&#39;[&#39;;
    foreach($res as $key=>$value){
      $first=explode(&#39; &#39;, $value[&#39;createtime&#39;]);
      $second=explode(&#39;-&#39;, $first[&#39;0&#39;])[&#39;2&#39;];
      if($key==0){
        $sign .= &#39;{"signDay":"&#39;.$second.&#39;"}&#39;;
      }else{
        $sign .= &#39;,{"signDay":"&#39;.$second.&#39;"}&#39;;
      }
    }
    $sign .=&#39;]&#39;;
    $this->ajaxReturn($sign,&#39;json&#39;);
  }

Copy after login

php+mysql+jquery implements calendar check-in

##More php +mysql+jquery to implement calendar sign-in related articles, please pay attention to the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn