This chapter provides an outline relating to the concept of the system. Based on the research that has been made it shows that literature review is one of the vital part as it can be used to implement the method from the research and improve the existing system. The method and algorithm stated will be used during development of the system.
CHAPTER 3
METHODOLOGY
3.1 Introduction
This section describes the methodology used to develop the system because to develop the system, the methodology is one of the basic things that are very important because it is a flow or how we have to develop our system. Thus, in developing this system Rapid Prototyping methods have been chosen. Usually since this method is more organized and structured. It will clarify more about every phase that involves on this project development and also the system requirements.
Besides, this chapter describes the design of implementing the system. Designs are divided into two parts which are system design and database design. System design consists of context diagram, Entity Relationship Diagram (ERD), flow chart and interface. Meanwhile, database design consists of SQL script, entity relationship diagram, and database schema.
and multiple short cycles. This saves time and money by solving common design issues before development begins puts the focus of development on the needs of the end-user.
Rapid Prototyping originated in manufacturing, where it is used to build a physical prototype (now often using 3D printing) to demonstrate and test a product’s capabilities. When used in website development this prototype is either digital or on paper, but the concept is the same.
Rapid Prototyping is normally associated with the Rapid Application Development (RAD) methodology, although you can also use it alongside an agile methodology.
The rapid prototyping process involves three simple steps:
1. Prototyping – The team creates an initial prototype. This is a visual representation of the design specifications as set out in the requirements document. The prototype may be either low-fidelity or high-fidelity (more to come on high- and low-fidelity prototypes) and may be interactive or non-interactive.
2. Feedback – The creators share the prototype with other team members, stakeholders, and focus groups made up the intended end-users. Everyone evaluates both the design and usability before submitting feedback.
3. Improvement – The feedback is used to create a new iteration of the prototype. The process then cycles round to Step 2 for further feedback. This continues until there are no more changes or a specified cut-off is reached (either a date or number of iterations).
3. Refine &
Iterate 1. Prototype
2. Review
Figure 3.0: Rapid Prototyping Overview Process
When it comes to practicing rapid prototyping there are three stages of idea development that can be used to varying levels of effectiveness before a final product is put into production.
They are also typically referred to as high, medium, and low fidelity; which is meant to reflect how close to the final product they get you.
3.2.1 Benefits of Rapid Prototyping
Rapid prototyping has many benefits. In addition to being your fast track to product- market fit, rapid prototyping can help you with all of the following:
1. Quick Iterations Generate Progress – Rapid prototyping uses short cycles to quickly improve the core design.
when compared to waterfall methods, which lack the opportunity for early end- user feedback.
4. Test Key Customer Journeys – Interactive prototypes allow real users to test key customer journeys and provide feedback. The prototype eases to spot key problems without wasting development time.
5. Encourages Collaboration and Feedback - Prototyping enables everyone involved with the project to collaborate and provide feedback. In this case, it allows my supervisor to give feedback on my project.
6. Reduces Project Risk - The low cost of prototyping compared to development means that I can reduce my project risk.
3.3 Quick Design
This phase is to analyze and identify the design of the system and developed the prototype based in the functionalities that will be built. The data or requirement obtained during planning and requirement phase was analyzed and transformed into the design that follows the identified requirement. Some diagrams had been built such as Framework of the project, Context Diagram (CD), Data Flow Diagram (DFD) level 0 and 1, Entity Relation Diagram (ERD) and Data Dictionary.
3.3.1 Framework Design
The framework describes how the entities play their roles in the system. Link Rotator system will be used by two users only which are users and visitors. First and foremost, the user will have to sign up by entering their name, email and password. Then the user can log on into the system by using their registered email and password. On the dashboard page, the user needs to enter one or many URLs that they want to shorten and choose to make the link domain random or according to their preference. The user will be redirected to links page where all created links (by the user only) will be displayed on this page. The user will able to edit, delete, or copy the link to be shared. When visitor clicks on the link that the user shared, for example on their social media account, the visitor will be redirected to the one of the URL entered by the user when creating link.
Figure 3.1: System Framework
3.4 System Design
3.4.1 Context Diagram
Figure 3.2: Context Diagram
Figure 3.2 above shows the context diagram for the Link Rotator System. The context diagram consists of three entities which are the user and visitor. Only the user are required to login into the system before can access the system. The user has to register to the system before they can login into their interfaces. Once the user is authenticated, they will be directed to dashboard and able to browse around the system until their session end. On the dashboard page,
3.4.2 DFD Diagram (Level 0)
Figure 3.3: DFD Diagram Level 0
Figure 3.3 shows a data flow diagram that consists of two processes and four data stores.
There are three processes that involved user in this level which are registration, manage link rotator and open URL of Link Rotator. The user involves with two processes which are registration and manage link rotator. While visitor only given the ability to open URL of Link Rotator.
The user does the registration and the system will store the details input by the user into User (D1) data store and login (D2) data store. The link rotator details which come from the user will be saved into Links (D3) data store and Slug (D4) data store. When Visitor clicks on the Link Rotator, time will be recorded and number of clicks will increase and will be stored onto Slug(D4) . Last but not least, Slug (D4) data store will return links on the link rotator for the visitor that click on it (be it internally or externally from the system).
3.4.3 DFD Diagram Level 1 (Manage Link Rotator)
Figure 3.4: DFD Level 1 (Manage Link Rotator)
Figure 3.4 shows the data flow diagram level 1 of Manage Link Rotator. In this level, user will manage their link rotator by creating a new link rotator by entering one or more link URLs. The link rotator details then will be stored in Links (D3) data store and Slug (D4) data store. The same process will be repeated for updating, deleting and viewing. User only can manage their own created link rotator, link rotator created by another user will not be accessible.
3.4.5 Entity Relationship Diagram (ERD)
Figure 3.6: ERD Diagram for Link Rotator System
Entity Relationship Diagram (ERD) for Link Rotator System is as shown in Figure 3.6. It consists of four (4) entities. The entities are users, slugs, links, and password_resets.
3.5 Database Design
3.5.1 Data Dictionary I. Users
Table 3.1 below shows the data dictionary for users. The table consists of attribute which is id, name, email, email_verified, password, remember_token, created_at and updated_at.
Table 3.1: Data Dictionary for users
NO ATTRIBUTE
NAME
DETAILS TYPE KEY DESCRIPTION
1 id Id for user int (10) PRIMARY
4 email_verified Verified user’s e-mail
7 created_at Account creation time
timestamp Default = NULL
8 updated_at Account
updated time
timestamp Default = NULL
II. Slugs (Link Rotator)
Table 3.2 below shows the data dictionary for slugs (link rotator). The table consists of attribute which is id, slug, create_by, clicks, last_access, created_at and updated_at.
Table 3.2: Data Dictionary for slugs
NO ATTRIBUTE
NAME
DETAILS TYPE KEY DESCRIPTION
1 id Id for slug int (10) PRIMARY
3 create_by Slug creator varchar
(191)
III. Links
Table 3.3 below shows the data dictionary for links. The table consists of attribute which is id, sid, sid, url, endpoint, create_by, gen_url, last_access,created_at and updated_at.
Table 3.3: Data Dictionary for links
NO ATTRIBUTE
NAME
DETAILS TYPE KEY DESCRIPTION
1 id Id for links int (10) PRIMARY
accessed time
8 created_at Link creation
time
timestamp Default = NULL
9 updated_at Link updated
time
timestamp Default = NULL
IV. Password_resets
Table 3.4 below shows the data dictionary for password_resets. The table consists of attribute which is id, sid, sid, url, endpoint, create_by, gen_url, last_access,created_at and updated_at.
Table 3.4: Data Dictionary for password_resets
NO ATTRIBUTE
NAME
DETAILS TYPE KEY DESCRIPTION
1 email Forgotten
3 created_at Password reset
time
timestamp Default = NULL
3.6 Requirement
Software and hardware are essential in order to achieve a smooth project development and testing phase. These are details of the requirement to develop Web Optimization using Link Rotation for Better Marketing:
3.6.1 Hardware
➢ OS: Windows 7 (64-bit)
➢ CPU: Intel® Core™ i7-4790 processor
➢ RAM: 8 GB
➢ Graphics Card: NVIDIA GeForce GTX 750
➢ Storage: 500 GB
3.6.2 Software
➢ Laragon
➢ HeidiSQL
➢ Visual Studio Code
➢ Composer
➢ Git Bash
➢ PHP 7
➢ Bootstrap 5
3.7 Conclusion
This chapter covers all the details on the proposed project. It states on how will this project developed, why choosing rapid prototyping as the developing method, and what is the proof of concept for this project. I am sure this chapter will give a better understanding for the Web Optimization using Link Rotation for Better Marketing.
CHAPTER 4
IMPLEMENTATION AND RESULT
4.1 Introduction
Implementation and results are carried out to guarantee that the system is designed in accordance with the system's principal goal and meets user requirements. This chapter will present the results of the Web Optimization using Link Rotation for Better Marketing that was developed as part of the final year project.
4.2 Implementation of FYP Student Management System
There are several language has been used to develop the Web Optimization using Link Rotation for Better Marketing. For the template interface Bootstrap 5.0, Google API and CloudFlare Fonts has been used. Thus, for the server side PHP: Hypertext Pre-processor has been used as programming language. PHP is widely used because it is an open source for general-purpose scripting language, can be embedded into HTML and it suits for Web development.
For the framework, Laravel 5 has been used. Laravel is a web app development framework with expressive and elegant syntax that makes the entire web development process faster, easier, and enjoyable for developers by eliminating all the pain-points associated with handling complex PHP code.The reason Laravel is used in this project development is because of it better
For the validation, this system had been used HTML5, PHP and JavaScript. Validation is important to make sure user have a minimum chance to make mistake when inserting data.
This system is deployed to free web hosting called 000webhostapp to be able to create a working URL as well as to track visitors using Statcounter.
Open Source database also used in this system and the database is MySQL version 5.7.24- MariaDB. Apache use to run local host server and the apache version is 2.4.35. Visual Studio Code is used to write codes.
4.3 Design Interface
4.3.1 Main Interface (Home)
Figure 4.1 Home Page
Figure 4.1 above shows the main interface of the system. When user first came to the system, they will see this interface. When the user try to go to other pages without logging in first, they will be redirected here.
Figure 4.2 Home Page (cont.)
Figure 4.2 above, still on the same page which is home, shows information about Link Rotator.
Figure 4.3 Home Page (cont.)
Figure 4.3 above shows the bottom part of the home page. Aside from copyrights, there is a button “View My Stats” which will redirect the user to another domain called Statcounter which can help the user to tract this websites usage, traffics, visits and visitor information.
4.3.2 Register Interface
Figure 4.4 Register Page
Figure 4.4 above shows register page. Before logging in to the system, user need to register their name, email and password. The data will be stored in database and then will be used when the user wants to log in to the system. The user must enter a recognizable name, if the user enter number in name area, the system will ask to enter a valid name. Same goes for email address.
4.3.3 Login Interface
Figure 4.5 Login Page
Figure 4.5 above shows login page. To use the link rotator system, user need to enter their registered email and password. The system will search the database and if it match the data, the user will be logged in to the system. User can click on remember me checkbox. After the user logged out, his login data will automatically filled using same computer and browser.
4.3.4 Dashboard Interface
Figure 4.6 Dashboard
Figure 4.6 above shows dashboard. After user has logged in, he will be redirected to this page.
To create a link rotator, simply enter designated URL on the Target area and then click create.
Click on the ‘+’ button to insert more than one URL. User can also customize their link to their likings. If left custom link blank, the system will create a randomize the URL(slug) of the link rotator.
4.3.5 Created Links Interface
Figure 4.7 Created Links Page
Figure 4.7 above shows Created Links page. User can see their created link rotators and only that they created meaning they cannot see other user’s link rotators. If user click on the link rotator or copy paste the URL of the link rotator into address bar, it will redirect user to the first URLs that the link rotator holds or first destinations.On this page, user can see how many people click on their link rotator, when it created at, it last accessed, view more details about their link
Figure 4.8 QR Code
Figure 4.8 above shows when user click on Generate QR Code. User can scan the QR code using smartphones and then he will be redirected to one of the destinations.
4.3.5 Stats Interface
Figure 4.9 Stats Page
Figure 4.9 above shows stats page. On this page, user can see details stats to their link rotator which are destinations, last access and clicks for the destinations.
4.3.6 Edit Link Interface
Figure 4.10 Edit Link Page
Figure 4.10 above shows edit link page. On this page, user can edit their link rotator. They can add destinations and remove existing destinations.
4.3.7 Stat Counter Interface
Figure 4.12 Stat Counter (cont.)
Figure 4.13 Stat Counter (cont.)
Figure 4.14 Stat Counter (cont.)
Figures above show stat counter. This is a web service for tracking website stats. User will be redirected here if they click on view my stats button on homepage. User can see reports about link rotator page here with purpose to improve their businesses or websites. User can print these reports or set preference to email this email daily, weekly, monthly or annually.
4.4 Testing Analysis
After the development of the system is complete. This system will be test using two software testing techniques which are black box testing and white box testing to examine the functionality of the system.
4.4.1 Black Box Testing
4.4.2 White Box Testing
Module involved in this testing are:
I. Link Rotator Page Redirect II. QR Code
III. Number of clicks (total clicks and destination’s clicks) IV. Statcounter reports
4.5 Test Case
A test case is a set of condition or variables under which a tester will determine wheatear a system works correctly or under test satisfies the requirement. A test case may help finding problems in the requirement or design of an application. It simple define that test cases is a set of condition or combination of variables under which tester/engineer will identify wheatear the application under test is working correctly or not. Below shows the cases for several processes in the Web Optimization using Link Rotation for Better Marketing.
Table 4.1 : Test case for Success User Login
Step Procedure Expected Results Pass/Fail
1 Go to login page Login Page Loaded Pass
3 Click “Login” button Login successful. Pass
Redirect to dashboard
Table 4.2 : Test case for Failed User Login
Step Procedure Expected Results Pass/Fail
1 Go to login page Login Page Loaded Pass
2 Enter the name, email
and password
Email :
[email protected] Password : 123456
Pass
3 Click “Login” button “These credentials do not match our records.” text under the email is shown.
Pass
Table 4.3 : Test case for Add Link Rotator
Step Procedure Expected Results Pass/Fail
https://www.google.com
3 Click “Create” button Link Rotator created successfully.
Redirect to created link page.
Pass
Table 4.4 : Test case for Failed to Add Link Rotator
Step Procedure Expected Results Pass/Fail
1 Go to dashboard page Dashboard Page
3 Click “Create” button “Please enter a URL”
alert is shown.
Pass
Table 4.5 : Test case for Customlink
Step Procedure Expected Results Pass/Fail
1 Go to dashboard page Dashboard Page
URL : https://www.google.com Customlink: ammar
3 Click “Create” button Link Rotator created successfully.
Redirect to created link page.
Pass
Table 4.6 : Test case for Update Link Rotator
Step Procedure Expected Results Pass/Fail
1 Go to created links page.
3 Click “Add” button “URL successfully
added” is shown
Pass
1 Go to created links page
Created links page loaded
Pass
2 Click “Delete” button “Links successfully deleted” is shown
Pass
Table 4.8 : Test case for Link Rotator Link Rotation
Step Procedure Expected Results Pass/Fail
1 Go to browser
Chrome redirect to the first destinations of the Link Rotator
Pass
3 Paste into the address
bar on another tab the URL of Link Rotator
Table 4.9 : Test case for Link Rotator Clicks
Step Procedure Expected Results Pass/Fail
1 Go to browser Pass
(Chrome)
2 Paste into the address
bar the URL of Link Rotator and click enter.
Chrome redirect to the destination of the Link Rotator
Pass
3 Go to created links
page and check clicks
Clicks increased by 1 Pass
Table 4.10 : Test case for Link Rotator Last Accessed
Step Procedure Expected Results Pass/Fail
1 Go to browser
Chrome redirect to the destination of the Link Rotator
Pass
3 Go to created links
page and check last accessed
Last accessed change to current time
Pass
1 Go to browser
Chrome redirect to the destination of the destination that just visited increase by 1
Pass
Table 4.12 : Test case for Destinations Last Accessed
Step Procedure Expected Results Pass/Fail
1 Go to browser
Chrome redirect to the destination of the Link Rotator
Pass
3 Go to stats page and
check last accessed
Last Accessed for the destination that just visited change to current time
Pass
Table 4.13 : Test case for Generate QR Codes
Step Procedure Expected Results Pass/Fail
1 Go to created links
CHAPTER 5
CONCLUSION
5.1 Introduction
5.1 Introduction