• Tiada Hasil Ditemukan

System Design

In document REPORT STATUS DECLARATION FORM (halaman 46-74)

Figure 4.1.1

In parking and vehicle control application, it will used the client-server architect ure.

Each type of the user will access the application with the internet connection, then the application will communicate with the server. The server will control the flow of data between request and response. As refer to the figure 4.1.1 when a student or security guards perform login function in the mobile application using their smart phone, then the application will access the server, then the server will retrieve the required data from the database to compare the password and username to determine either that is a valid or invalid input by the user with the data stored on the database.

Besides that, the web application which had been developed will used the client -server architecture where the admin use a computer to request the required data and then the web application will generate the report for the admin. For example, when a admin select the date between 01-Jan 2017 and 31-Jul 2017, then the application will connect to the server, the server will control what data that the web application are requesting, then return the related data to the web application before generate the report for the admin to view.

4.2 Block Diagram

Figure 4.2.1

The block diagram of Figure 4.2.1 show that the student are required login to the application before using it. After that, the student are only allow to pass through the barriers gate either with a NFC or student card to open the barriers gate. The

application will determine automatically either the parking zone is same with the parking zone assigned by the admin or not. After that, the student are allow to park their car inside the campus zone.

4.3 Campus map design (Location to put barrier gate)

Figure 4.3.1

The figure 4.3.1 is a map of the UTAR kampar campus which enables to see the gate barrier had been added to the parking zones.

4.4 Sample vehicle sticker of UTAR campus

Figure 4.4.1

The figure 4.4.1 is the sample of the car sticker that going to use in the UTAR campus.

The new designed sticker that with a QR code which will directly store the car plate number which is more convenient for security guard or admin to conduct the spot check operation in the UTAR campus.

4.5 User Interface Design (Mobile application)

Figure 4.5.1 Splash Screen Design

The figure 4.5.1 show the splash screen design, the splash screen design will appear only when the user haven’t login. If the user has been login, the splash screen design will not display on the screen.

Figure 4.5.2 Login Interface Design

After the splash screen appear few seconds, the application will redirect user to the

Figure 4.5.3 Student Main menu

The figure 4.5.3 is the main menu for the student. Each of the student are will redirect to this page, if they are login successfully. The vehicle registration is for the student to apply their vehicle sticker on each trimester. However, each student only allow to apply once for each trimester. If student trying to apply more than one, there will display error to indicate the problem. Besides that, the Help module is to allow student to request a help from security guard where they might face the problem inside the campus. Also, the check In/Out module is a new approaches for the student to enter the campus using the NFC on the device, the application will match the current serial number with the pre-set serial number to increase the security on using this application. Furthermore, the check-in module allow the student to view the parking slot available on their parking zone so that they can enter the parking zone with confident that there have a parking place. Lastly, the profile is for the student to view their personal details.

Figure 4.5.4 car sticker registration

The figure 4.5.4 show the simple interface for a student to register their car sticker through online rather than relying on the web browser. Besides that, the student are required to input the vehicle type, vehicle plate number, vehicle manufacturer, vehicle model, vehicle color and select the vehicle type for proceeding the registration.

The student only allowed for register once only in each trimester. If the student try to register twice on each trimester, the application will display an error to notify the student. After click the apply button, the application will check are the form contain any empty field before proceeding to the confirm alert.

Figure Request help Figure Notification (Admin)

Figure show the module which is providing for students. Every student are allow to use this module to request the help from the security guards. Besides that, the student are able to specific the problem such as the barriers gate cannot be open or NFC reader spoiled, give block by other car and etc. After specific the problem, the student needs to select the problem is occurs in which parking zone in the campus.

Figure show the notification has been received by the security guards. After the security guards received the notification, the security can take action based on the information given. This module can be very useful for those student who has insufficient credit in their mobile phone.

Figure 4.5.6 (Check-In-Out)

Figure 4.5.6 is the module to allow the student to scan through the reader in front of the barrier gate implemented in each faculty zone. Before the student can enter to the parking zone, they need to scan the NFC-enable phone with the reader in order to make the barrier gate open. This module only can access when the ballot result is successful. The student who got the unsuccessful ballot, they are unable to access this module.

After accessing this module, the student are able to view their parking assigned zone and the available parking slot are left in their parking zone only. The current status are the information to determine the student current is in the inside or outside of the parking zone.

Figure 4.5.7 Security Guard Main Menu

Figure 4.5.7 is the main menu of the security guards. The security guards are able to perform the spot check operation, visitor registration, check-in-out and profile module. The security guards can use the mobile application to conduct their spot check operation easily through the QR code scanner and a new design vehicle sticker for UTAR campus. Besides that, the security guards able to register a visitor details in faster ways where the security guards can grab the information directly through the SCAN IC function inside the visitor registration module. The check-in-out module is same as the student but the security are able to access every parking zone instead of only one parking zone.

Figure spot check module(Enter Manually)

The figure above show the interface of the spot check operation which is designed only for security guard to check either a car sticker is valid or invalid. Besides that, the security guard are able to enter the car plate manually (Figure or click the QR code button for accessing the QR code scanner (Figure through the camera.

After the checking, the application will retrieve the car plate number and then compare with the database car plate numer to determine either the sticker is legal or illegal. Besides that, there have a clear button provided for the security guards to clear the car plate input text field. The application also will check

Figure spot check module(Enter Automatically)

Figure Figure

Spot check (Unsuccessful Result) Spot check (Successful Result) The both figures show the spot check result. If the spot check result is unsuccess ful then the figure activity will be appear to request the security guards to select the categories of the problem which had been checked.

Besides, the figure show the spot check result which is successful. Since the security guards only enter the car plate number, then the security guard need to manually matching the vehicle details with the car by using the vehicle manufact ure, color, model and vehicle registration No.

Figure Figure Figure Visitor registration form Splash Screen Scan IC

The figure is the activity of the visitor registration form. The security guard can use this module to register the visitor details. Security guards able to choose either input the visitor details manually or through the scan IC function. The security guards need to enter the visitor name, car plate number, IC number and address. The date and time arrived is auto generated by the application. The security guards need to ask the visitor how long they will be visit the campus and which block they are tends to visits. After successful register, the security guards will issue an access card to the visitor for them to visit the parking zone.

Moreover, the figure is the splash screen to indicate there are loading the camera after the security guard click the SCAN IC button. After loading the splash screen, the figure will be display. The security guards need to fit the IC inside the box in order to scan the details faster. Furthermore, if the place are too dark then the security guard can open the flash light directly through the activity.

4.6 User Interface Design (Web Application)

Figure 4.6.1 Create vehicle registration period

Figure 4.6.2 Reserved parking zone value.

The admin are required to create a new registration period for the student to register their vehicle. The admin need to select the “Red text” which is show in the figure 4.6.1 in order to update the reservation value. If the admin do not update the value, then the web application will directly choose the pre-set value which had been set on last trimester (Figure 4.6.2).

Figure 4.6.3 Date input

Figure 4.6.4 Time input

Besides that, when an admin want to create a new registration period they need to select the date and time for the start, end and result released date. The date (Figure 4.6.3) and the time (Figure 4.6.4) input field has been design on using the JQuery method to change the input type to date and time picker which will reduce the burden for the admin.

After the admin created the registration period, the admin will not be able to create another registration period again until the current ballot is released. Furthermore, the web application will perform the necessary validation such as the end date cannot be greater than start date. Not only that, the web application also will validate the input text field to ensure there doesn’t contain any empty text fields.

Figure 4.6.5 View trimester

Figure 4.6.6 Delete record

The figure 4.6.5 are the list of the trimester which the admin has been created previous ly.

The admin can view the previous start date, end date and result released date of the registration period. If the admin want to delete the registration period, they can click the delete icon in the action columns to delete the registration period. Besides that, there will be a confirmation dialog box show for the admin to confirm that the selected registration period are the one he/she wish to delete ( Figure 4.6.6) . The list of the registration period will be display in paging, if the record is more than 10 which cannot be fit in a screen.

Figure 4.6.7 Create security guard account.

Figure 4.6.8 Validation checking for security guards.

Figure 4.6.9 Encrypted Password.

The figure 4.6.7 is the interface for the admin to create the security account. The admin need to enter the security guards login ID, password, confirmation password, name and the contact no.

Besides that, the web application will ensure that the login ID enter which is unique (figure 4.6.8). The password must be match with the re-enter password. Lastly, all the password stored in the database will be encrypted (Figure 4.6.9).

Figure 4.6.10 List Of Guards details

Figure 4.6.11 Edit Guard Details

Figure 4.6.12 Delete Security Guards Account.

The figure 4.6.10 is the list of the total security guards account in the campus.

Each of the security guards will have one account for them to conduct their tasks in the campus. The admin are allow to edit the security guards details by clicking the action columns with an edit icon. After clicked the edit icon, the Figure 4.6.11 will be pop out for the admin to edit the security guards details. After updated the details, the pop out box will be closed automatically and then will display the security account which has been updated. Besides that, when the admin want to delete a security guards account, there will be a confirmation messages for the admin to select (Figure 4.6.12).

Figure 4.6.13 View current trimester student registration details

The figure 4.6.13 is the interface that for admin to view the current trimester registration status. The student only will be assigned to a particular zone when the ballot result is successful. If the result haven’t released, then the status all will be display in pending. Besides that, the filter selection box (Figure 4.6.14) is to allow the admin to filter the data such as only view the student who get the successful ballot on this trimester only.

Figure 4.6.15 View parking size on each zone

The figure 4.6.15 is the table to view the parking zone size of the 5 faculty zone on the UTAR campus. The table are managed to view the car parking size and motorcycle parking size on each zone.

Figure 4.6.16 Spot Check Result

The figure 4.6.16 show the security guards spot check result. Each time that a security guards check a car plate through the mobile application will be stored on the database. After that, the admin are able to monitor the major problem that occurs inside UTAR campus. Besides that, the admin are able to filter the details by selecting which trimester they want to analyze. Furthermore, the admin can further filter by selecting the check result is either invalid or invalid. The reason that provides these features are to reduce the record that view by the admin.

Figure 4.6.17 Student registration record.

The figure 4.6.17 is the interface that allow the admin to search all student registrat io n details for every trimester. Each pages are allow to display 10 records, the admin can use the filter selection menu to reduce the number of records.

The figure 4.6.18 show the current trimester traffic in the campus. The table show that there are only 2 parking place has been used in the zone P and there still have 178 parking slots in that zone.

Figure 4.6.19 Visitor details

The figure 4.6.19 show the visitor registration details which had been registered by the security guards through the mobile application.

Figure 4.6.20 select duration to view spot check chart report

Figure 4.6.21 Security guards spot check chart

The figure 4.6.20 is to allow the admin to select the duration that he/she wish to view in the charts. The figure 4.6.21 are the result of the duration from 01-06-2017 to 31-08-2017. After that, the admin are able to know the major problem of using vehicle sticker are using the fake sticker (third party).

Figure 4.6.22 select duration to view traffic transaction chart report

Figure 4.6.23 Traffic transaction in campus

The figure 4.6.22 show the interface for the admin to select the duration for view the traffic transaction in the campus. The figure 4.6.23 show the result of the traffic transaction between 01-02-2017 and 30-09-2017.

Figure 4.6.24 Ballot Result report in Chart

The figure 4.6.24 is allowed the admin to select the trimester that he/she want to view in the chart form.

Figure 4.6.25 Chart for Ballot Result

The figure 4.6.24 is the page to allow the admin select which trimester that he/she want to view. The figure 4.6.25 show the chart of the trimester Jul 2017 to indicate that there are 11 number of student get successful registration and none student get unsuccessful.

Figure 4.6.26 Update Serial number

In order to increase the security on using the NFC tag to open the barrier gate, the student need to update their serial number based on their device. If the student who has lost their phone, they need to update the new device serial number through this interface.

Besides, the serial number is bind with the student or security guards account, then the NFC reader only will accept those tag based on the serial number which is has been

Figure 4.6.27 manage user serial number

Before the student are allowed to update the serial number, the student need to fill in the form through the faculty office. The admin are allowed the student to update the serial number by checking the radio button to active. Besides that, the admin can use the filter function to filter out the records.

4.7 Database Design

Figure 4.7.1 Database Design

The figure 4.7.1 show there are nine main class in the proposed project which are users, Reservation, trimester, visitor, parkingzone, checkedcarplate, registervehicle, traffic and vehicle details.

Each of the user with the position of security guards are able to check multiple car plate, register multiple visitor. Besides that, each of the student only can have one

4.8 NFC Design

Figure 4.8.1

The figure 4.8.1 show the NFC connection between the smart phone and the receiver. Each time when a student or security guards they open the parking and vehicle control application and then access the Check-in-out module, the receiver of the NFC will interact with the database.

Each time when a student use the NFC, the receiver will update the record in the database such as the traffic transaction inside the campus. Besides that, the receiver will match the serial code of the scanning device with the serial number which is binds with the user account database to determine whether the current scanning device has the right to enter the parking zone or not.

Chapter 5 System Testing

In document REPORT STATUS DECLARATION FORM (halaman 46-74)