Project summary

upsign Sign on

WHAT

The sign in system is based on HTML5, which is used to participate in the creative application proposition of HTML5 in Qilu university students software design competition. The sign in system adopts GPS positioning sign in + face authentication to ensure that people and mobile phones are together and mobile phones are in the specified location range, and effective sign in is carried out.

WHY

1. One of the features of H5 is geolocation. Therefore, GPS positioning is used to divide the check-in of teachers and students into a certain range
2. It is suggested to use Baidu AI in the proposition. It is found that there is face recognition function in it. If this function is added, it can realize double check for effective sign in
3. Because the proposition requires that both PC and mobile can be used, the validity check is realized by using EXIF to query the photo time of face photos on PC

WHERE

1. In the implementation of the project, it is found that the H5 compatibility between different mobile phone browsers is still different, so many problems are found. Therefore, two kinds of friendly error prompts are made in GPS positioning, which is also convenient for positioning
2. In order to show more features of H5 and CSS3, a MD style suspended menu is added, but it can't be clicked under IOS
3. When exporting the check-in report, open the report through Excel and find that the number changes into scientific counting method
4. Check and compare the validity of photos by EXIF. This is the solution our team came up with in brainstorming. I really like brainstorming
5. Because the use of GPS positioning will be teachers and students to sign in within a certain range, so we need to calculate the longitude and latitude distance between the two points
6. V2.0 adds the function of roster, which needs to be processed by Excel

HOW

1. The solution of GPS positioning
   View code: /student.html#L222-L244
2. Solution to click event invalidation in IOS Safari
   View Article: /Safari-Click.html
3. Solution of digital variable science counting method for exporting CSV file
   View Article: /export-csv.html
4. Check the time between the photo and the current time by EXIF
   View code: /student.html#L193-L209
5. Algorithm of longitude and latitude distance between two points
   View code: /distance.function.php
6. Using phpexcel to process Excel
   View code: /api.php#L80-L95 (for more usage, please go to GitHub to see the example of phpexcel.)

Use Alipay, wechat and QQ clients to scan code and reward
Reward the author
This paper is written by SangSir Creation, adoption Knowledge sharing signature 4.0 International license agreement
In addition to the reprint / source, all articles are original or translated. Please sign before reprinting