How I created an electronic checkpoint

Dear Reader, please do not be surprised by what you will see on the screenshots below. Since I am a citizen of a country where Russian is one of the main languages, and the project also had to be made in Russian, the screenshots will contain inscriptions in Russian.

Content of the article:

• Preface
• Chapter 1. First Steps
• Chapter 2. Mail and the Qr code
• Chapter 3. Webflow, CSS styles and new design
• Chapter 4. Qr code scan
• Chapter 5. Authorization by Role
• Chapter 6. Assigning status to requests
• Chapter 7. Changing the Theme
• Chapter 8. Adaptive Design
• Chapter 9. What's left unsaid
• Chapter 10. Project defense
• Chapter 11. What has been fixed, added
• Chapter 12. What needs or can be finalized
• Results

Preface

As students, we were offered to participate in a program. In this program, we were taught courses from different areas of both business and programming. Here are some of them: "Javascript", "Fundamentals of.NET and Web Applications", "HTML and CSS", and "Git Skills".

After completing all the courses we had to show what we had learned, so we were offered directions and corresponding projects in advance, which we had to defend at the end of one academic year.

There were many directions, but I chose "Industrial Automation". My project was called: "Electronic gatehouse". The aim of the project was: "Reduction of the time of approval and issuance of passes, reducing the load on the pass office".

The result of the project was to look as follows:

1. Submission/approval of a pass application electronically.
2. Automatic generation of the pass, sending it electronically to the Applicant.
3. Access to the territory of the plant by means of Qr-code.
4. Automatic pass accounting (reporting for security service).

Chapter 1. First Steps

At the very beginning, I thought about where to start, what language to write in (because at that time I knew neither Javascript, nor Python + Django), how to tie everything together. The courses described above were not taught at that moment. All my skills were limited to C++, C#, C# Windows Forms. Thinking briefly, and guided by the principle: "You don't know where to start, just start, and the ideas will come by themselves", I decided to start creating the page "Submission".

At first it was difficult to understand the properties of selectors, especially when display can take different values, and based on this value flex-direction, justify-content, align-items properties were configured. Ugh I'll never forget when I needed to center align, it was an adventure. Sites like habr, Stack Overflow, Mozilla Developer Network helped. At that time there was not yet that boom when everyone was talking about ChatGPT. So I had to search for everything manually.

As I look at the current design of this page, I realize how far my website layout skills have advanced.

Chapter 2. Mail and the Qr code

We needed to move to the next stage of evolution: sending a letter to the recipient's mail with a reply, as well as Qr code. This evolution was an introduction to Javascript and PHP. In this section I will pay more attention to PHP, because I connected the js-script once, and almost did not edit it, but the work with the server part took the basis of all future time. This is where I got acquainted with the libraries for PHP: PHPMailer и PHP Qr Code.

I had no idea how to connect libraries, so just downloading Composer and writing in cmd, not the one in the project, but the one that is called through Win + R, the necessary command, I tried to connect these libraries. Yes, it happens. But everyone learns from mistakes, so I did. In general, at this stage I already had a project that could receive an application and generate a Qr-code that was sent to the mail.

This stage was an introduction to new languages and how to connect SMTP App Password.

From this point on, it became clear that it is better to write search engine queries in English

Chapter 3. Webflow, CSS styles and new design

The next step in my business was to get familiar with Webflow, and that's when I learned the kitchen of all those display-y things. Thanks for that Webflow, but: "How annoying are all these subscriptions, all these Premiums", because of them it was a problem to export the code (you had to publish a page, go to it, open the source code, find a link with CSS styles, go to it, copy the content and only then export it to your project => Phew, I think that's it 😊), and there are only 2 pages per account. And there was a lot of CSS-style code in my opinion, as well as incomprehensible names of classes, id and other things.

Soon I got tired of this cyclic procedure of code export, so I decided to learn CSS to the level where I can do layout myself. I also wanted to get rid of those complicated classes and id's. So I completely rewrote the CSS and HTML content of this page. The design has changed.

At the same time, we were taught a course on design, where they told me what I was doing wrong and how I should improve the design, how to change the color palette. So soon the design changed.

The age of design and not a word more.

Chapter 4. Qr code scan

Since I have to have a Qr code scan in my project, I decided to create a new page associating it with the gatekeeper interface. So first I needed to create a database that stores all the submissions. For this I used the built-in functionality of XAMPP: MySQL. I created a database on the phpmyadmin page, added a table, linked it with php-script and voila, now the project contains some kind of database.

After that we could proceed to the Qr code scan page. For this purpose, I added to my project the library nimiq/qr-scanner, which was installed using npm (Node Package Manager). Having written the code, I set out to test the Qr code scanner. To start with, I added two cases when a visitor scans the code:

1. generated by my program;
2. generated by something else.

And according to which code was scanned, the console would display the result "Welcome" or "Enter correct code".

The figure below has the functionality that is the final result (no VEB interfaces of the earlier stages could be found). Sorting people by full name or by visit period and the "Get Report" and "Update Data" buttons were added in the next stage of this page's development. The report contained information about the visitors that passed for a given day, more precisely the date of entry and exit of visitors, full name.

The "Update data" button, strange as it may seem, updates the data that are recorded in the table. In the table, there are visitors, which should pass today, and if there was a scan of Qr-code, then it is necessary to press the button "Update data", and then the time of entrance or exit will be updated, the table itself is not updated automatically.

At the moment the works on improving this page are already being carried out, namely to remove the button "Update data" and to update the table automatically when scanning a Qr-code.

The "Get Report" button provides an automatically generated report in .xlsx format

When scanning the Qr code, it takes into account whether the pass is valid when the user has to pass. And accordingly for each case it gives an answer. Examples of cases:

1. The visitor has arrived earlier than the authorized visit period. Well, he should not stand and freeze in the street. For this case, 30 minutes are subtracted from the time registered in the application. If it is more than 30 minutes, the visitor will not be allowed in, and the guard will have a page with the reason for refusing the visitor to visit the enterprise: "You came too early!!!";

2. The visitor came later than the prescribed visiting period. In this case the guard will show the following message: "Kuku, time is up!!!";

3. If the visitor is late, then the most important factor will be that there is at least more than an hour left till the end of the visit period;

Also, the guard in the table with current visitors who have passed will mark in red color those entries in which visitors are delayed, i.e. it is time for them to leave.

Familiarity with SQL and new libraries

Chapter 5. Authorization by Role

Since my site contains two pages, i.e. two potential roles, a security guard and an employee submitting an application, it was necessary to enter the site by role, because the security guard cannot create applications. From all this comes the user authorization page and a new table in the database, which will store all the information about the employees, among which the main ones are email, password and role.

Therefore, I added two users, assigned them roles, and when entering the mail and password, the correspondence in the database was checked, and if it was found, it gave the role, and limited the functionality of the program, which was the number of available pages, whether it was "Filing an application" or "Security Guard Interface".

Also, when the program was working, it was found that if you skip the "Authorization" page and go to any other page, there were no errors, except when submitting an application, because in the database in the table with applications there are columns with the name of the applicant and his ID. This was fixed by checking if the user was authenticated. If it was not, the user was redirected to the authorization page.

)

You can already write your own social network

Chapter 6. Assigning status to requests

Until now, requests were always approved, so it was necessary to add a page where requests that should be assigned a status: Rejected or Accepted will be displayed. Two sections "Verified requests" and "Unverified requests" have been added to this page. When going to this page, we would get to the "Unverified requests" section where we could assign statuses to them. A little later, the rejection function was updated by adding a reason, as well as a report in the.docx format, which was generated automatically using the same PHP libraries.

In the verified applications section, we can change the status.

And the report itself:

Getting acquainted with a new library and hard work with JS

Chapter 7. Changing the Theme

I'm sure many people have a dark theme on their phone. That's why I decided to create a theme switcher. I added Bootstrap icons and when you click on this icon block, the theme changes.

To keep the color of the theme, data is written to localStorage so that when the user visits the site again, the theme will be the one the user previously selected.

At this point, I thought that was it, we can stop, Game Over

Chapter 8. Adaptive Design

With the basic work completed, I started on the adaptive design.

Using Webflow, I learned a bit about writing designs for phones, and soon added designs for the "Authorization" and "Submission" pages. For pages with tables in my opinion it is not cost-effective to make a design.

Yes, I did, but what do I test it on? I'd like to see for myself on my phone

Chapter 9. What's left unsaid

Let's start in order:

1. New page:

   The project outcome should have contained one of the following:

   1. ...
   2. ...
   3. ...
   4. Automatic accounting of passes (reporting for security service)

   Based on the 4th point, one more page had to be added to the project, where all information about applications is displayed.

   

   When we clicked on the full name of any user, the following page was opened:

   

2. Сonnecting the Yandex Cloud API:

   Yes I realize that this has nothing to do with my project at all, but the desire to work with some API was greater, it was interesting to implement it, to work with it.

   At a certain point in my head came the idea, if there is authorization, why not add a page with personal data of the user. This page displays the data about the user, and you can also change the phone and mail, by submitting an application, only already for employees.

   Yes I agree that the mail will be issued by the business, not your personal mail, so it doesn't need to be changed.

   "Just a page of data? Too easy," I thought, and decided to add a photo of the user.

   

   Then the following question arose: "What if the user wants to change the photo or delete it altogether?". Storing photos in the database, as we know, is not such a good idea. There is another way: to store them in a directory on the server, but I didn't like this idea. There was only one way: API.

   Thus, I decided to try to implement some API, which was Yandex Cloud. At first I had to read the documentation, I couldn't find something and then I went to the Amazon AWS documentation. Looking for some similarity, ChatGPT helped me in some way.

   Oh, a miracle! The first image was saved in the baket. But now I had to learn how to delete or change these photos in the baket. But already being experienced the matter went faster.

   In addition, on this page, the user can, as mentioned earlier, change the mail and phone number. By clicking on these buttons, it was possible to enter a new mail or phone number, and the request was sent again, only already in the table with requests for employees, and the message was displayed for consideration.

3. Connection to the database and execution of sql-queries are written in such a way to protect against sql-injections, excluding these vulnerabilities.

4. 404.html page added
   
   

5. Password recovery:

   And change again, only the password to log in to the site, which comes to the corporate email. There is no logic in this, but it was worth a try

   On the "Authorization" page, if you have noticed, there is a link to recover the password. For this page, the design was borrowed to some extent from the VK social network.

   

   

   

   

Kind of said it all about my project

Chapter 10. Project defense

The project defense was successful, excellent. I showed a pre-recorded video on the site and showed it to the experts and jury.

Due to the fact that a certain amount of time was allocated for the defense, some features of the site were missing in the video, namely connection to the API, password recovery, page 404.

There were several questions about my project:

1. "What framework did you write on?".

   No one explained frameworks to us. The project was written on a local XAMPP web server using MySQL, which is what XAMPP provides.

2. "What do you have in the address bar on the User Information page?"

   The address bar contains the path to the executable file, and the 'id' parameter, which takes information from the database about the visitor.

3. "How do you have visitors stored in the database, is there any uniqueness, difference from others?"

   Each visitor, as it was said has its own id, it is unique, repeated id is not allowed.

4. "A two-character password? You have a video of a user authorizing with a two-character password?"

   The password contained two characters for ease of use of the site during development. In reality, all users would be authorizing with passwords of a more complex structure. Due to the limited time allocated for the defense of the project, I was not able to show the password recovery page, but there you can see that passwords should have a complex structure. The password must contain upper and lower case letters, numbers and special characters.

I thought at this point they'd want to verify what I said, but in fact they just listened to my answer😞

Chapter 11. What has been fixed, added

After the above, the project received several changes, among them:

1. Validation of fields when entering full name and mail (yes, don't be surprised that at such a late stage, because nobody has tested the system, and it's a matter of 10 minutes to add validation, you just need to learn RegEx);

2. Adding an event to the calendar. When a visitor receives an email, he/she will be able to add this event to his/her calendar so that he/she doesn't forget it;
   

3. Automatic table update when Qr code is scanned during the finalization phase.

The site will get a few more updates, more on that in the next section

Chapter 12. What needs or can be finalized

What can be done:

1. With the API connected, you can also save reports to the cloud at the end of one business day;
2. Although I've said before that the mobile version is not cost-effective for pages with tables, but there are ideas on how to implement this;
3. Ability to add a photo in the submission;
4. Add the ability to create emergency submissions. Suddenly by unexpected coincidences it has become necessary to issue a pass now, and to do that you have to create an application, then submit it for review. This is all long. Therefore, as an option, you can add such applications;
5. And if a group of students have to pass to the company, then the employee will have to fill out each student individually or what? We need to automate this process, either by sending a form for the visitor to fill in the pass application or adding the option to create an application for groups of people.

At the next meeting with the expert we will discuss if this is unnecessary

Results

I'll be brief.

The most important thing I want to say is thank you to this program and its organizers, because if not for all this, I would not have learned about new programming languages (PHP, JS, even Django (at one point I had to learn this framework, and there were ideas to move the project), 1C, Git, Figma), did not get knowledge in the field of business.

I was running ahead of the locomotive, and what they explained to us at the HTML, CSS, JS courses, I already knew ahead of time.

The realization of the project had to be carried out within more than one academic year. At the stage of the project defense, no more than 4 months had passed since I started working on the project.

I am satisfied with my work, and I hope You, Dear Reader, also enjoyed this article.

I hope this article has been useful and informative. My goal is to share my knowledge and experience with my readers. If you have any questions, comments or suggestions for improvement, I would love to hear from You. Please leave your comments below. Your feedback will help me make my articles even better.